Tanvi Harkare – Project 11 – Composition

sketch

var l = 50;
var m = 10;
var R = 100;
var G = 200;
var B = 50;

function setup(){
    frameRate(10);
    createCanvas(400, 400);
    background(0);
    myTurtle = makeTurtle(mouseX, mouseY);
    myTurtle.setWeight(6);
    myTurtle.penDown(); 
}

function draw(){
    var c = color(R, G, B)
    myTurtle.setColor(c);
    myTurtle.turnToward(mouseX, mouseY, l);
    myTurtle.forward(m);
    if (frameCount % 100 === 0){
        newColor();
    }
}

function newColor(){
    m = random(0, 20);
    l = random(0, 100);
}

function mouseClicked(){
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

function keyPressed(){
    background(0);
}

//// change nothing under this line ////
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: 1,
                  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 was inspired by the etch a sketch toy, which draws small lines that can potentially create an interesting drawing. The turtle turns towards the direction of the mouse. Every 100 frames, the line type changes to be more jagged or more smooth. When you click the mouse on the canvas, it changes the color of the line. If you press any key, the background erases to create a blank slate – similar to shaking an etch a sketch.