Cheloniidae Live

This page requires a browser with HTML5 canvas support. Valid browsers include Mozilla Firefox, Google Chrome, and most others that aren't Internet Explorer.

Documentation

Return to your code

What's New?

Welcome back to Cheloniidae Live! We've made some changes that you should know about.

No simple mode

There's no longer a simple mode. All commands are now issued in power-user mode, using method calls on the turtles.

Mutable turtles

It might be more accurate to say that we've merged simple and power-user modes. We kept the power-user mode syntax, but we've made the turtles mutable the way they were in simple mode. Now, methods on t return a modified t, instead of a new turtle.

// Old: You had to capture changes and store them back into t.
t = t.move (100);

// New: This does the same thing. Now, t changes itself.
t.move (100);

If you're thinking that this looks awfully similar to simple mode, you're right! In fact, you can use the simple mode commands just as before, except now they're methods on t.

t.move (d);   // Same as move (d)
t.jump (d);   //         jump (d)
t.turn (a);   //         turn (a)
t.bank (a);   //         bank (a)
t.pitch (a);  //         pitch (a)

Since turtles are now mutable, branching is done a little differently.

// Old: t is unchanged
var r = t.move (100);
var s = t.turn (90).move (100);

// New: This does the same thing
var r = t.clone ().move (100);
var s = t.clone ().turn (90).move (100);

The examples

We ported all of the examples to accomodate the changes. If we've accidentally mangled your code, please let us know and we'll fix it up for you.

Return to your code

Turtle Commands

Turtle commands are simply JavaScript methods that tell a turtle how to move around the screen. Here's a quick overview of the available commands.

Driving the turtle

Each scene comes with a default turtle called t. There are five basic turtle operations:

var a = 90;     // a is an angle in degrees
var d = 100;    // d is a distance, roughly in pixels

// Basic turtle commands
t.move (d);     // Moves d pixels, drawing a line
t.jump (d);     // Jumps d pixels, without drawing a line
t.turn (a);     // Turns a degrees to the right (clockwise)
t.bank (a);     // Banks a degrees to the right (clockwise)
t.pitch (a);    // Pitches a degrees downwards (counterclockwise)

Branching

To branch into multiple turtles, use the clone() method:

var s = t.clone ();  // s is a copy of t
s.move (100);        // s moves without changing t

Changing pen attributes

By default, the pen color is #444 (gray), opacity is 0.6, and width is 1 pixel. You can change each of these attributes individually, or set them all at once.

 
// Set each individually:
//   with_color takes a string with a hexadecimal color.
t.with_color ('#f00');  // Changes the color to red.

//   with_opacity takes a float between 0 and 1.
t.with_opacity (0.25);  // Changes the opacity to 25% opaque.

//   with_size method takes an integer.
t.with_size (4);        // Changes the pen size to roughly 4 pixels wide.


// Set all three at once:
t.with_pen ({color:'#f00', opacity:0.25, size:4});

Commands are expressions

Each command is an expression that returns the modified turtle. This means you can chain them:

// Move 50 pixels, turn 90 degrees, change the color to red, move 50 pixels.
t.move (50).turn (90).with_color ('#888').move (50);

Go forth and conquer

Have fun writing your turtle programs! If you make anything you're super proud of, be sure to send it in.

Return to your code