juyeonk-Project-11-Composition

sketch

//Claire Koh
//Section E
//juyeonk@andrew.cmu.edu
//Project-11

var t1; // Linked to makeTurtle

function setup() {
    createCanvas(480, 300);
    
    t1 = makeTurtle(width/2,height/2); // sets the starting coordinate for the turtle
    t1.penDown();
    
}



function draw() {
    background(0);
    t1.forward(1)
    t1.turnToward(mouseX, mouseY, 10);
    
    drawCarrots(); // draws the Carrot
}


//Draws the carrot that follows around the cursor
function drawCarrots () {
    noStroke();
    fill(56, 88, 48);
    triangle(mouseX, mouseY, mouseX+3, mouseY - 20, mouseX+6, mouseY)
    triangle(mouseX+6, mouseY, mouseX + 9, mouseY - 20, mouseX+10, mouseY-3)
    fill(255,156,0);
    triangle(mouseX, mouseY - 10, mouseX-5, mouseY + 30, mouseX + 10, mouseY - 3)
}



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) {
    push();
    
   
    if (this.penIsDown) {
      strokeJoin(MITER);
      strokeCap(PROJECT);
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
      this.x = x;
      this.y = y;
        
        
        noStroke();
    fill(174, 237, 201);
    ellipse(this.x, this.y, 30,50);
    
    fill(56, 88, 48);
    ellipse(this.x, this.y, 20,40);
    
    ellipse(this.x, this.y + 31, 12)
    }
    pop();
    
    
    
    
}


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;
    
}

For this project I wanted to take the term “turtle” literally and make a turtle that follows around the cursor. The turtle is constantly moving, but its point of destination is always changing according to the new location of mouseX and mouseY. When reaches the cursor, it will circle around the cursor, but as soon as you move the mouse it will start moving towards the mouse again.

One thing that I could have done is rotating the turtle towards the mouse so that its head will always facing the cursor. But unfortunately the push and pop commands and the translate and rotate commands did not work as I expected.

Author: Claire

B.Arch Class of 2021 (Sophomore) View all posts by Claire