GeezerVison

Welcome to JavaScript Turtle Graphics!

Type your commands at the prompt and see them faithfully executed by our eponymous turtle. Press F1 to toggle between the prompt and this help screen.

What's turtle graphics? From Wikipedia: "Turtle graphics is a term in computer graphics for a method of programming vector graphics using a relative cursor (the "turtle") upon a Cartesian plane. Turtle graphics is a key feature of the Logo programming language."

Here, you'll be programming in JavaScript instead of the Logo language, but you still get to watch a triangle race around the screen! The interactive prompt below exposes the valiable t, which is an instance of class Turtle. Here's a quick rundown of its methods.

method	description
t.fd(n)	Forward. Move ahead by n pixels.
t.bk(n)	Back. Move in reverse by n pixels.
t.rt(deg)	Right turn. Rotate deg clockwise.
t.lt(deg)	Left turn. Rotate deg counter-clockwise.
t.pu()	Pen up. Turtle no longer traces line along its path.
t.pd()	Pen down. Turtle resumes tracing line along its path.
t.circle(radius)	Make an empty circle with midpoint at turtle position, with given radius.
t.disc(radius)	Make a solid disc with midpoint at turtle position, with given radius.
t.clean(bgColor)	Erases all lines. If bgColor is provided, updates background color.
t.home()	Revert turtle to center screen (0,0) and facing "north".
t.clear()	Equivalent to clean() and home() together.
t.reset()	Same as clear(), but also restores defaults.
t.color(color)	Sets pen color. Accepts any CSS color.
t.thickness(n)	Sets the width in px of the pen stroke.
t.face(x, y)	Turtle faces toward the given absolute coordinate.
t.butt(x, y)	Turtle faces away from the given absolute coordinate.
t.xy(x, y)	Moves turtle to given absolute coords, where origin (0,0) is center of screen.
t.x(x)	Moves turtle to given absolute X coord, leaving Y coord unchanged.
t.y(y)	Moves turtle to given Y coord, leaving X coord unchanged.
t.heading(deg)	Sets absolute turtle direction in degrees, with 0 being "north".

The above methods all return this, so they can be chained, e.g. t.fd(100).rt(90).fd(100). You may also wish to query turtle state. For that, we have the get methods.

method	description
t.get.x()	Turtle's x position where origin (0,0) is center of screen.
t.get.y()	Turtle's y position where origin (0,0) is center of screen.
t.get.heading()	Turtle's orientation in degrees, where 0 is "north".
t.get.pu()	true if pen is up, false otherwise.
t.get.pd()	true if pen is down, false otherwise.
t.get.color()	Pen color.
t.get.background()	Background color.
t.get.thickness()	Width in pixels of pen stroke.
t.get.top()	Top boundary of screen.
t.get.bottom()	Bottom boundary of screen.
t.get.left()	Left boundary of screen.
t.get.right()	Right boundary of screen.
t.get.oob()	Returns true if the turtle has moved out of bounds of the screen.

...and also some randomness functions for convenience.

method	description
t.rand.uni([lower, ]upper)	A uniform distribution between lower (or zero) and upper.
t.rand.norm(mean, stdDev)	A normal distribution with the given mean and stdDev (standard deviation).
t.rand.chance(odds)	Returns true with a probability of odds, where odds is between 0 and 1.

Depth notes I

JavaScript provides a number of ways to do loops, and you're certainly free to use them here. Alternatively, the turtle gives you a couple of its own ways to do things over and over again. This allows you to do loops the "turtle" way, which isn't necessarily better, just fitting with the rest of the API.

method	description
t.repeat(n, func)	Runs func until it returns false or until it runs n times, passing i as arg.
t.forever(func)	Runs func until it returns false, passing i as arg.

Depth notes II

Colors can take any form accepted by CSS or canvas. This includes "#fff", "#ffffff", "rgb(...)", "hsl(...)", and even "rgba(...)" and "hsla(...)".

Depth notes III

Some drawings finish quickly, while others take a long time. This is because the drawing is rendered sequentially, piece by piece, and sometimes there are lots of pieces. To speed things up, when the number of pieces gets quite long, more and more of them are batched together between renders. When the drawing approaches the end, this batching decreases and then stops. You'll see the turtle initially tear through the drawing at a high rate of speed, and then slow to a more leisurely pace at the end. Your machine is actually working harder at the beginning of the drawing than at the end.

Depth notes IV

Who am I? My name is Greg Reimer. I build web applications for fun and profit. Find me on github and LinkedIn. This turtle graphics project is also on github under the MIT license. If you write an awesome sample program that you think should be included here, send me a pull request!

Sample Code

Sunburst run this example

t.reset()
.color('rgba(255,255,255,0.15)')
.repeat(720, function(i){
  if(i%72 < 36){
    t.fd(2000).bk(2000);
  }
  t.rt(.5);
})
		

Interesting moiré run this example

t.reset()
.repeat(1000, function(i){
  t.fd(i).rt(90.1)
})
		

Phi rays run this example

var phi = (Math.sqrt(5) + 1)/2;
t.reset().color('rgba(255,255,255,0.2)')
.repeat(987, function(){
  t.fd(2000).pu().bk(2000).pd().rt(360*phi);
});
		

Random paths run this example

t.reset()
.color('rgba(255,255,255,0.1)')
.repeat(200000, function(){
  t.fd(3).rt(t.rand.uni(-10,10))
  if (t.get.oob()) t.home().rt(t.rand.uni(360))
})
		

Fun with spirograph run this example

t.reset()
.repeat(10, function(){
  t.repeat(36, function(i){
    t.color('hsla('+(i*10)+',50%,50%,0.3)')
    .repeat(36, function(){
      t.fd(27).rt(10)
    }).rt(10);
  }).rt(1);
});
		

More fun with Phi run this example

var phi = (Math.sqrt(5) + 1)/2;
t.reset().repeat(1000, function(i){
  t.pu().rt(360*phi).fd(Math.log(i)*40).pd();
  t.repeat(50, function(j){
    t.color('hsla('+((360 * (i/1000))-120)+',50%,50%,'+ Math.pow(1.1,-j) +')').fd(2.5);
  });
  t.pu().xy(0,0).pd();
});
		

Cool thingy run this example

var phi = (Math.sqrt(5) + 1)/2;
t.reset().repeat(3000, function(i){
  t.pu().rt(360*phi).fd(Math.log(i)*40).pd();
  t.repeat(25, function(j){
    t.color('hsla('+((360 * (i/3000))-120)+',50%,50%,'+ Math.pow(1.2,-j) +')').fd(5).lt(2);
  });
  t.pu().xy(0,0).pd();
});
		

Circles run this example

var circle = (function(){
  function circ(size, steps, level) {
    t.repeat(2, function(){
      if (level > 0) { circ(size/2, steps, level-1); }
      t.repeat(steps, function(){ t.fd((size/steps)*2).rt(180/steps); });
    });
  }
  return function(size, steps, level){
    var r = (size/Math.PI)*2;
    t.pu().lt(90).fd(r).rt(90).pd().rt((180/steps)/2);
    circ(size, steps, level);
    t.lt((180/steps)/2).pu().rt(90).fd(r).lt(90).pd();
  }
})();
t.reset().color('rgba(255,255,255,0.5)');
circle(500, 20, 8);
		

Sierpinski triangle 1 run this example

function triangle(len, level){
  if (level < 1) {
    t.repeat(3, function(){
      t.fd(len).rt(120);
    });
  } else {
    t.repeat(3, function(){
      t.pd();
      triangle(len/2, level-1);
      t.pu().fd(len).rt(120);
    })
  }
}
t.reset().xy(-300, -200).rt(30).clean();
triangle(600, 7);
		

Sierpinski triangle 2 run this example

var triangle = (function(){
  function frag(len, depth, left){
    if (left === undefined) left = !(depth % 2);
    if (depth > 1) {
      frag(len/2, depth-1, !left);
      t[left?'lt':'rt'](60);
      frag(len/2, depth-1, left);
      t[left?'lt':'rt'](60);
      frag(len/2, depth-1, !left);
    } else {
      t.fd(len);
    }
  }
  return frag;
})();
t.reset().pu().bk(250).rt(90).bk(350).pd().color('hsl(30, 100%, 70%)');
triangle(700, 8);
		

Koch snowflake run this example

var koch = (function(){
  function frag(len, depth){
    if (depth > 1) {
      frag(len/3, depth-1); t.rt(60);
      frag(len/3, depth-1); t.lt(120);
      frag(len/3, depth-1); t.rt(60);
      frag(len/3, depth-1);
    } else {
      t.fd(len);
    }
  }
  return function(len, depth){
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
  }
})();
t.reset().bk(300).clean().rt(30).color('#0f0');
koch(550, 6);
		

Koch snowflake with subtriangles randomly oriented run this example

var kochRandom = (function(){
  function frag(len, depth){
    if (depth > 1) {
      var r = t.rand.chance(1/2);
      frag(len/3, depth-1); t[r?'rt':'lt'](60);
      frag(len/3, depth-1); t[r?'lt':'rt'](120);
      frag(len/3, depth-1); t[r?'rt':'lt'](60);
      frag(len/3, depth-1);
    } else {
      t.fd(len);
    }
  }
  return function(len, depth){
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
  }
})();
t.reset().bk(300).clean().rt(30).color('#90f');
kochRandom(550, 6);
		

Lots of randomized Koch snowflakes overlaid run this example

var kochRandom = (function(){
  function frag(len, depth){
    if (depth > 1) {
      var r = t.rand.chance(1/2);
      frag(len/3, depth-1); t[r?'rt':'lt'](60);
      frag(len/3, depth-1); t[r?'lt':'rt'](120);
      frag(len/3, depth-1); t[r?'rt':'lt'](60);
      frag(len/3, depth-1);
    } else {
      t.fd(len);
    }
  }
  return function(len, depth){
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
    frag(len,depth); t.lt(120);
  }
})();
t.reset().bk(300).clean().rt(30);
t.repeat(60, function(i){
  t.color('hsla('+i+',50%,50%,0.1)');
  kochRandom(550, 6);
});
		

Tree run this example

function tree(length, branches, depth, origDepth){
  if (origDepth === undefined) origDepth = depth;
  var l = t.rand.uni(length*.95,length*1.05);
  t.color('rgba(255,255,255,'+(depth+1)/origDepth+')').fd(l);
  var angle = 180/branches;
  if (depth > 0) {
    t.lt(90);
    for (var i=0; i<branches; i++){
      t.rt((angle/2));
      var angleJitter = t.rand.uni(-5,5);
      t.rt(angleJitter);
      tree(length*(3/4), branches, depth-1, origDepth);
      t.lt(angleJitter);
      t.rt(angle/2);
    }
    t.lt(90);
  }
  t.pu().bk(l).pd();
}
t.reset().bk(280).clean();
tree(180,4,6);
		

Heighway dragon run this example

function dragon(length, iters){
  var d = [true];
  for (var i=0; i<iters; i++) {
    var len = d.length;
    d.push(true);
    for (var j=len-1; j>=0; j--) {
      d.push(!d[j]);
    }
    length = Math.sqrt((length * length) / 2);
  }
  var c = 0;
  for (var i=0; i<d.length; i++) {
    c += .01;
    t.color('hsl('+c+',100%,70%)').fd(length)[d[i]?'rt':'lt'](90);
  }
}
t.reset().xy(250,170).clean().lt(95);
dragon(470,15);
		

Another sample run this example

t.reset()
.color('rgba(255,255,255,0.1)')
.repeat(360, function(i){
  t.pu().home().pd()
  .repeat(80, function(){
    t.fd(20).rt(t.get.y()+i)
  })
})