Mimi Jiao – Project 11 – Section E

click to toggle between drawings

/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E 
Project 11
*/

var toggle = 0; //toggle between images drawn
var increment = 0; //increment for moving turtle and drawing turtle

function setup() {
    createCanvas(400, 400);
    background(0);
    
}

function draw() {

    //first drawing image
    if (toggle === 0) {
        for (var i = 0; i < 260; i ++) {
            var play = makeTurtle(cos(i) * 100 + 200, 200 + sin(i) * 100);
            play.penDown();
            play.setColor(color(0, 255, 0));
            play.right(increment);
            play.forward(increment);
        }
    increment += 1;
    if (increment > 850) {
        fill(0)
        rect(0, 0, width, height);
        increment = 0;
    }
    }

    //second drawing image
    if (toggle === 1) {
        for (var i = 0; i < 360; i ++) {
            var play = makeTurtle(width / 2, 200 + sin(i));
            play.penDown();
            play.setColor(color(255, 0, 0)); 
            play.left(increment);
            play.forward(increment);

        }
    increment ++;
    }

    //third drawing image
    if (toggle === 2) {
        for (var i = 1; i <= 800; i ++) {
            var play = makeTurtle(random(.1,.65) * 2**2 * cos(PI/i)/sin(PI/i),
                                    2**cos(PI/i)/sin(PI/i)
                );
            play.penDown();
            play.setColor(color(0, 0, 255));
            play.right(i);
            play.forward(i);
        }
    }

    //fourth drawing image
    if (toggle === 3) {
        for (var i = 0; i < 360; i ++) {
            //increment = map(mouseX, 0, windowWidth, 0, width);
            var play = makeTurtle(random(400), random(400) + sin(i));
            play.penDown();
            play.setColor(color(255, 0, 255)); 
            play.left(increment);
            play.forward(increment);
        }
    increment += 1;
    }

    //fifth drawing image
    if (toggle === 4) {
        for (var i = 1; i <= 800; i ++) {
            var play = makeTurtle(.45 * 2**2 * cos(PI/i)/sin(PI/i),
                                    2**cos(PI/i)/sin(PI/i)
                );
            play.penDown();
            play.setColor(color(0, 255, 255));
            play.right(increment);
            play.forward(increment);
        }
    increment += 1;
    if (increment > 950) {
        fill(0)
        rect(0, 0, width, height);
        increment = 0;
    }
    }

    //image reset back to black
    if (toggle === 5) {
        fill(0);
        rect(0, 0, width, height);
    }

}

//if mouse is pressed, toggle between the drawn images
function mousePressed() {
    toggle ++;
    if (toggle > 5) {
        toggle = 0;
    }

}

function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: .005,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I wanted to create something where you could toggle between states to see different drawings. I wanted to play with curves and spirals so I went back to mathworld.com to find some math equations.
Some process shots: