Project 09: Turtle Graphics

This is self-generative scribble graphic, where the user is only in control of the thickness of the line. I thought the randomness of the scribbles would give it a human or endearing quality, almost like witnessing a toddler scribbling on a wall. I enjoyed playing with this project, as I’ve found you can make some interesting compositions.

Screen Shot 2015-12-18 at 7.50.21 AM Screen Shot 2015-12-18 at 7.58.49 AM

Project09

//Adrienne Cassel
//Turtle Project

var myTurtle;
var startFrame;

function setup() {
    createCanvas(800, 500);
    background('linen');
    myTurtle = new Turtle(width/2, height/2);
    myTurtle.setColor(color("black"));
    myTurtle.setWeight(random(5));
    myTurtle.penDown();
    strokeJoin(ROUND);
    strokeCap(ROUND);
    resetCanvas();
}

function draw() {
    var step = (frameCount - startFrame)/30.0;
    myTurtle.forward(step);
    myTurtle.left(random(100));
    myTurtle.forward(random(100));
    myTurtle.right(random(30));
   // myTurtle.forward(40);
    //myTurtle.right(90);
  

    if (myTurtle.y > height || myTurtle.x > width) 
        resetCanvas();
        myTurtle.setWeight(mouseX/50);

}

function resetCanvas() {
    background('linen');
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}
//=======================================================
// TURTLE API
function Turtle(x, y) {
    this.x = x;
    this.y = y;
    this.angle = 0.0;
    this.penIsDown = true;
    this.color = color(128);
    this.weight = 1;

    this.left = function(d) {
        this.angle -= d;
    };
    this.right = function(d) {
        this.angle += d;
    };
    this.forward = function(p) {
        var rad = radians(this.angle);
        var newx = this.x + cos(rad) * p;
        var newy = this.y + sin(rad) * p;
        this.goto(newx, newy);
    };
    this.back = function(p) {
        this.forward(-p);
    };
    this.penDown = function() {
        this.penIsDown = true;
    };
    this.penUp = function() {
        this.penIsDown = false;
    };
    this.goto = function(x, y) {
        if (this.penIsDown) {
            stroke(this.color);
            strokeWeight(this.weight);
            line(this.x, this.y, x, y);
        }
        this.x = x;
        this.y = y;
    };
    this.distanceTo = function(x, y) {
        return sqrt(sq(this.x - x) + sq(this.y - y));
    };
    this.angleTo = function(x, y) {
        var absAngle = degrees(atan2(y - this.y, x - this.x));
        var angle = ((absAngle - this.angle) + 360) % 360.0;
        return angle;
    };
    this.turnToward = function(x, y, d) {
        var angle = this.angleTo(x, y);
        if (angle < 180) {
            this.angle += d;
        } else {
            this.angle -= d;
        }
    };
    this.setColor = function(c) {
        this.color = c;
    };
    this.setWeight = function(w) {
        this.weight = w;
    };
    this.face = function(angle) {
        this.angle = angle;
    }
}