Creating A Turtle In Javascript: A Beginner's Guide

Turtle graphics is a concept of drawing graphics using a virtual 'turtle' that draws lines as it moves around. Turtle graphics is available in Logo and Python, but not in JavaScript. However, it is possible to replicate turtle graphics in JavaScript using HTML5's Canvas element. This involves using context.rotate to emulate 'turn left/right' and combining context.translate with moveTo/drawTo to behave like 'move forward/back'. The turtle understands several simple commands, including moving forward or backward by a certain number of steps, turning left or right by a certain number of degrees, and drawing lines.

Turtle graphics in JavaScript

Turtle graphics is a flagship feature of the Logo programming language. It is a great way to initiate beginners into the world of coding. Thanks to HTML5's Canvas element, an implementation of Turtle Graphics programming can be created in pure JavaScript.

To get started with Turtle graphics in JavaScript, you can use an online platform like CodeGuppy, which allows you to create your own games and share them with others. Alternatively, you can use GitHub's js-turtle, an environment to learn and teach programming with JavaScript.

To set up js-turtle, open turtle.js in a text editor and turtle.html in your browser. You can then write and test your code in the browser or use the codepan, which has js-turtle integrated. The area where the turtle moves is the canvas, and you can specify the coordinates for the turtle to move to.

Some basic commands for Turtle Graphics include:

• Forward(steps): The turtle moves forward and draws a line by the specified number of steps.
• Left(degrees) and right(degrees): The turtle turns by the specified number of degrees.
• Width(thickness): Sets the thickness of the line drawn by the turtle.
• Color(r [, g [, b ]]]): Sets the colour of the line drawn by specifying RGB values.
• Penup(): The turtle temporarily moves without drawing a line.
• Pendown(): The turtle resumes drawing a line when moving.

With these basic commands and an understanding of trigonometry functions, you can start creating Turtle Graphics primitives in JavaScript.

TurtleScript commands

The TurtleScript commands are as follows:

• `fd`(_distance_): Move forward by the given distance.
• `bk`(_distance_): Move backward by the given distance.
• `rt`(_angle_): Turn right (clockwise) on the spot.
• `rt`(_angle_, _radius_): Turn right (clockwise) in an arc of the given radius.
• `lt`(_angle_): Turn left (counterclockwise) on the spot.
• `lt`(_angle_, _radius_): Turn left (counterclockwise) in an arc of the given radius.
• `arc`(_angle_, _radius_): Draw an arc around the turtle without moving it. The angle is relative to the current heading.
• `pu`(): Pick up the pen to move without drawing.
• `pd`(): Put the pen down to resume drawing.
• `setColor`(_color_): Set the pen colour by name (e.g. `RED) or CSS colour string (e.g. `"#FF0041").
• `setColor`(_r_, _g_, _b_): Set the pen colour based on three RGB values, each between zero and one.
• `setColor`(_r_, _g_, _b_, _a_): Set the pen colour based on three RGB values and an opacity value, each between zero and one.
• `startFill`(_color_): Start drawing a filled region of the given colour. Must end with `endFill`().
• `startFill`(_r_, _g_, _b_): Start drawing a filled region with a colour given by three RGB values, each between zero and one.
• `setColor`(_r_, _g_, _b_, _a_): Start drawing a region filled by three RGB values and an opacity value, each between zero and one.
• `endFill`(): End drawing a filled region and fill it. If the pen is down, the outline will also be stroked.
• `setPosition`(_x_, _y_): Sets the absolute position. If the pen is down, draws a line to that position.
• `setX`(_x_): Sets the absolute x-axis position. If the pen is down, draws a line to that position.
• `getX`(): Returns the absolute x-axis position.
• `setY`(_x_): Sets the absolute y-axis position. If the pen is down, draws a line to that position.
• `getY`(): Returns the absolute y-axis position.
• `setWidth`(_width_): Sets the pen width.
• `setHeading`(_degrees_): Sets the current heading in degrees measured clockwise from the upwards vertical axis. North = 0, East = 90, South = 180, West = 270.
• `getHeading`(): Returns the current heading in degrees measured clockwise from the upwards vertical axis.
• `setScale`(_s_): Scales all distances (but not _x_ and _y_ coordinates or pen width) by this factor. Useful for reusing drawing commands for different-sized objects. 1.0 is the default scale.
• `getScale`(): Returns the current drawing scale.
• `setSpeed`(_speed_): Sets the number of commands executed before showing the next frame of animation. Defaults to 1. Can be set to `Infinity` to draw the entire image at once.
• `clear`(_color_): Clears the screen to the specified colour.
• `clear`(_r_, _g_, _b_): Clears the screen to the specified colour.
• `wait`(_seconds_): Pauses drawing for approximately the given number of seconds. Useful for creating animations. Not affected by `setSpeed`.
• `repeat` (_count_) { ... }: Repeat the commands between the curly braces the specified number of times.

TurtleScript also supports the use of JavaScript or codeheart.js code, such as `randomReal`() or `floor(x)`.

Turtle graphics functions

Turtle graphics is an implementation of the popular geometric drawing tools introduced in Logo, developed by Wally Feurzeig, Seymour Papert and Cynthia Solomon in 1967. It involves giving commands to a robotic turtle starting at (0, 0) in the x-y plane.

Movement

• Forward(steps): Move the turtle forward by the specified number of steps or pixels.
• Backward(steps): Move the turtle backward by the specified number of steps or pixels, but leave it pointing forward.
• Left(degrees): Turn the turtle left by the specified number of degrees.
• Right(angle): Turn the turtle to the right by the specified number of degrees.
• Goto(x, y): Move the turtle to the specified x and y coordinates without drawing a line.

Pen Control

• Penup(): Lift the pen so the turtle does not draw a line as it moves.
• Pendown(): Lower the pen so the turtle draws a line as it moves.
• Hideturtle(): Hide the turtle. It can still draw, but it won't be visible.
• Showturtle(): Make the turtle visible.

Colour and Width

• Color(colour): Set the colour of the pen. The colour can be specified by name, RGB values, or hex code.
• Width(thickness): Set the width of the pen in pixels.

These are just a few examples of the functions available in Turtle graphics for JavaScript. There are also functions for filling shapes, creating patterns, and more advanced movements and animations.

Turtle graphics capabilities

Turtle graphics in JavaScript is a concept of drawing graphics using a virtual 'turtle', which draws lines on the screen as it moves around. The turtle understands simple commands such as moving forward or backward by a certain number of steps, turning left or right by a certain number of degrees, and drawing lines of different colours and widths.

The turtle can also be instructed to pick up and put down its pen, allowing for the creation of gaps in the lines it draws. Additionally, the colour and width of the lines can be adjusted, and the canvas can be cleared or filled with colour. The speed of the turtle's movement and animation frame rate can also be controlled, and commands can be repeated a certain number of times.

Turtle graphics in JavaScript can be achieved using HTML5's Canvas element, which allows for the creation of an implementation of Turtle Graphics programming. This makes it accessible to beginners and advanced users can modify the open-source code to suit their needs.

Turtle graphics and 2D arrays

Turtle graphics is a popular concept that was made famous by the Logo programming language, which is widely used by young computer users. It involves imagining a mechanical turtle that moves around per the instructions of a JavaScript program, holding a pen that can be in one of two positions: up or down. When the pen is down, the turtle draws shapes as it moves, and when the pen is up, it moves freely without drawing.

Turtle graphics can be implemented in JavaScript using HTML5's Canvas element, allowing beginners to learn programming and advanced users to modify code thanks to its open-source nature. The turtle's movements can be controlled using commands such as forward and backward, left and right turns, pen up and pen down, and setting the colour and width of the lines drawn.

To create more complex shapes and patterns, 2D arrays can be used in conjunction with turtle graphics. For example, a 20x20 array can be initialized with zeros, and the turtle's movements can be read from another array that contains the commands. This allows the turtle to draw shapes and patterns by following the instructions in the command array and setting the appropriate elements in the 2D array to 1 as it moves with the pen down. When the print command is given, an asterisk or other chosen character is displayed wherever there is a 1 in the array, and a blank is displayed for zeros.

Javascript

Turtle Graphics Commands

• 1:Pen Up
• 2:Pen Down
• 3:Turn Right
• 4:Turn Left
• 5,10:Move forward 10 spaces
• 6:Print 20 by 20 array
• 9:End of data (sentinel)
• Note: Enter the move command (5) as two commands

In this example, the turtle starts at position (0, 0) with its pen up and facing right. The commands in the array are as follows:

• 2: Pen down
• 5: Move forward 12 spaces
• 3: Turn right
• 5: Move forward 12 spaces
• 3: Turn right
• 5: Move forward 12 spaces
• 3: Turn right
• 5: Move forward 12 spaces
• 1: Pen up
• 6: Print the array
• 9: End of data

By executing these commands, the turtle will draw a 12x12 square and then lift its pen up.

Frequently asked questions