https://douglocke.github.io/turtle.js

1// Turtle
2// Basic turtle graphics implementation:
3// https://en.wikipedia.org/wiki/Turtle_graphics
4// For more info on Javascript OOP:
5// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
6//
7// The turtle's coordinate system uses pixels for distance and degrees for rotations
8// 0 degrees is straight right (east); positive degrees are clockwise
9
10// Turtle constructor
11// takes optional x, y starting coordinates (default is center of sketch)
12function Turtle(x, y) {
13  // assign default values to x and y if they were not passed
14  if (typeof x === "undefined") {
15    x = width * 0.5;
16  }
17  if (typeof y === "undefined") {
18    y = height * 0.5;
19  }
20  this.x = x;
21  this.y = y;
22  this.bearingRadians = 0;
23  this.isPenDown = true;
24  this._stateStack = [];
25}
26
27// moveTo instantly transports the turtle to the provided x, y location, drawing a line if pen is down
28Turtle.prototype.moveTo = function (newX, newY) {
29  if (this.isPenDown) {
30    line(this.x, this.y, newX, newY);
31  }
32  this.x = newX;
33  this.y = newY;
34};
35
36// moveForward moves the turtle along its current bearing, drawing a line if pen is down
37Turtle.prototype.moveForward = function (distance) {
38  var newX = this.x + cos(this.bearingRadians) * distance;
39  var newY = this.y + sin(this.bearingRadians) * distance;
40  this.moveTo(newX, newY);
41};
42
43// moveBackward moves the turtle backward from its current bearing, drawing a line if pen is down
44Turtle.prototype.moveBackward = function (distance) {
45  this.moveForward(-distance);
46};
47
48// turnTo changes the turtle's bearing to the provided angle in degrees
49Turtle.prototype.turnTo = function (angleDegrees) {
50  this.bearingRadians = radians(angleDegrees);
51};
52
53// turnRight rotates the turtle's bearing clockwise by the provided angle in degrees
54Turtle.prototype.turnRight = function (amountDegrees) {
55  this.bearingRadians += radians(amountDegrees);
56};
57
58// turnLeft rotates the turtle's bearing counter-clockwise by the provided angle in degrees
59Turtle.prototype.turnLeft = function (amountDegrees) {
60  this.bearingRadians -= radians(amountDegrees);
61};
62
63// penUp tells the turtle to move without drawing
64Turtle.prototype.penUp = function () {
65  this.isPenDown = false;
66};
67
68// penDown tells the turtle to draw a line when it moves
69Turtle.prototype.penDown = function () {
70  this.isPenDown = true;
71};
72
73// pushState records the turtle's current state (position, bearing, etc.) to a stack so that changes can be undone easily
74Turtle.prototype.pushState = function () {
75  this._stateStack.push({
76    x: this.x,
77    y: this.y,
78    bearingRadians: this.bearingRadians,
79    isPenDown: this.isPenDown
80  });
81};
82
83// popState restores the turtle's state to the top recorded state on the stack
84Turtle.prototype.popState = function () {
85  if (this._stateStack.length === 0) {
86    console.error(
87      "Turtle: No states left on stack. Make sure your calls to .pushState and .popState are balanced."
88    );
89    return;
90  }
91  var state = this._stateStack.pop();
92  this.x = state.x;
93  this.y = state.y;
94  this.bearingRadians = state.bearingRadians;
95  this.isPenDown = state.isPenDown;
96};
97
98// image draws and image centered on the turtle's current location and alligned with the turtle's rotation (forward = up)
99Turtle.prototype.image = function (i, w, h) {
100  // w, h are optional parameters to this function and to p5's image
101  // p5's image function will draw the image at its "normal" size if w and h are undefined
102
103  push();
104  translate(this.x, this.y);
105  rotate(this.bearingRadians + PI * 0.5);
106  imageMode(CENTER);
107  image(i, 0, 0, w, h);
108  pop();
109};
110