agusman-Project11-TurtleGraphicsFreestyle

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//Turtle Graphics


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

var t1;

function setup() {
    createCanvas(400,400);
    background(0);
    t1 = makeTurtle(200, 200);
    t1.setColor(255);
    t1.setWeight(1);
    t1.penDown();

    var sideLength = 20;
    for(var i = 0; i < 100; i++) {
        t1.penDown();
        sideLength = sideLength - 20;
        t1.right(2);
        makeSquare(sideLength);

    }
  }

function makeSquare(sideLength)
    {t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);

    ellipse(t1.x,t1.y,10,10)
    t1.penUp();
    t1.right(90);
    t1.forward(sideLength)
    t1.right(90);
    t1.forward(sideLength)

    ellipse(t1.x,t1.y,10,10)
}

Inspired by my struggles with the lab this week, I wanted to dive a bit further into the mechanism of iterated rotation. Here’s a simple transformation I thought looked really lovely.

Sheenu-Project 11-Composition

sketch

var myTurtle;
var startFrame;
function setup() {
    createCanvas(400, 400);
    background(220);
    myTurtle=makeTurtle(width/2,height/2);
    myTurtle.setColor(color(0))
    myTurtle.setWeight(2);
    myTurtle.penDown();
    myTurtle.left(90);
    myTurtle.forward(10);

}
function draw() {
	var rand = random(0,10);
	if(rand>5){
		myTurtle.left(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	} else if (rand<5){
		myTurtle.right(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	}
}


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

This is a project that didn’t come out as planned, yet looked very interesting in the end. I originally tried to make the turtle generate structures that looked similar to trees or tree roots using arrays. I was planning to find a way to make the program create a turtle using a For loop and push that turtle into the array on command. Although, I admit that I wasn’t sure where to start when thinking about this, I still tried my best to do what I wanted to do and got started. I was working on the code and wanted to give the program a test run. When I ran the program, it generated these octagonal structures and lines all over the canvas. That is when I realized that this structure was more interesting than the tree structure I had in mind.

nahyunk1 – project 11 Composition

sketch

//Na Hyun Kim
//section B
//nahyunk1@andrew.cmu.edu
//Project-11

var r = 255;
var g = 255;
var b = 255;
var turtle =[];
var counter = 30;
function setup() {
    createCanvas(400, 400);
    background(0);
    ellipseMode(CENTER);
    //position of the turtle.
    for (var t = 0; t < counter; t ++) {
      turtle[t] = makeTurtle(0, 0);
      turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //set color
      turtle[t].setWeight(random(0.5,4)); // set weight
      turtle[t].penDown;
      }
      strokeJoin(MITER);
      strokeCap(PROJECT);
      frameRate(30);
}

function draw() {
  for (var t = 0; t < counter; t ++) {
    turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //stroke random colors
    turtle[t].setWeight(random(0.5,4));
    turtle[t].turnToward(t,mouseY, turtle[0].angleTo(pmouseX+5, pmouseY-10)); //turn along mouse movement.
    turtle[t].forward(turtle[t].distanceTo(mouseX, mouseY));//move along mouse movement.
  }
}

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

This is a semi-free drawing turtle that reacts to the movement of the mouse and creates an image that resembles to a ball of rubber. The lines build up as the person interacting moves her mouse across the screen.

amui1-Project-11-Composition

amui1-p11

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-11
//

//variables for rain
var x = 30;
var y = 30;
var xSpeed = 0.5;
var ySpeed = 3;
var treex = 10;

function setup() {
    createCanvas(480,480);
}

function draw() {
    background(51,79,102);

    noStroke();
    fill(178,198,204);

    //make rows of rain
    for (row = 0; row < 10; row++) {
      ellipse(x + row*50,y,5,10);
      //make columns of rain
      for (col = 0; col < 5; col++) {
        ellipse(x+row*50,y-80*col,5,10);
      }
    }
    //move rain a different way based on location
    if (y < height/4){
      x -= xSpeed;
    }
    //move rain a different way based on location
    if (y > height/4){
      x += xSpeed;
    }
    //move rain down canvas
    y += ySpeed;
    //if rain off the page, go back to top
    if (y > height/2+10) {
      y = 0;
    }
    //if mouse is pressed, then show lightning
    if (mouseIsPressed) {
      lightning();
    }



    //move tree based on wind based on wind position
    //reposition trunk and tree based on how wind is moving the tree
    if (mouseX > width/2 - 10 & mouseX < width/2+10) {
      wind = 118;
      treew = 68;
      trunkw = 90;
      trunkDist = 50;

    }
    if (mouseX < width/2-10) {
      wind = 110;
      treew = 70;
      trunkw = 80;
      trunkDist = 50;
    }
    if (mouseX > width/2+10) {
      wind = 135;
      treew = 60;
      trunkw = 100;
      trunkDist = 38;
    }

    //make 5 trees
    for (t = 0; t < 5; t++) {
      turtleTree(treex+t*100,wind,treew,trunkw,trunkDist);
    }
}


//make turtle for lightning
function lightning() {
    light = makeTurtle(mouseX,mouseY);
    light.setColor(color(233,255,103));
    light.setWeight(5);
    light.penDown();
    light.forward(20);
    light.right(115);
    light.forward(30);
    light.left(135);
    light.forward(10);
    light.right(140);
    light.forward(30);
    light.left(125);
    light.forward(10);
    light.right(130);
    light.forward(40);
    light.right(150);
    light.forward(20);
    light.left(115);
    light.forward(10);
    light.right(130);
    light.forward(30);
    light.left(120);
    light.forward(10);
    light.right(123);
    light.forward(41);
    light.penUp();
}

//make turtle tree
function turtleTree(treex,wind,treew,trunkw,trunkDist) {

    trunk = makeTurtle(treex+25,height-trunkDist);
    trunk.setColor(color(95,81,48));
    trunk.setWeight(3);
    trunk.penDown();
    trunk.right(trunkw);
    trunk.forward(48);
    trunk.left(90);
    trunk.forward(10);
    trunk.left(90);
    trunk.forward(48);
    tree = makeTurtle(treex,height-50);
    tree.setColor(color(93,134,67));
    tree.setWeight(3);
    tree.penDown();
    tree.left(65);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(130);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(wind);
    tree.forward(80);
    tree.right(130);
    tree.forward(80);
    tree.left(230);
    tree.forward(8);
    tree.left(135);
    tree.forward(15);
    tree.left(240);
    tree.forward(8);
    tree.right(240);
    tree.forward(20);
    tree.right(122);
    tree.forward(treew);
    tree.penUp();
}


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 had trouble coming up with a concept for this project. It was so open ended, that I wasn’t sure exactly what I should do. I managed to come to the idea of depicting a storm. The user can interact with the program by pressing the mouse to show lightning or move the mouse left and right to portray how wind would behave.

Caption: The user moved to the left side, as the “wind”, which swayed the trees on the bottom left.

Caption: The user clicked the mouse and the lightning appeared.

ikrsek-SectionC-Project-11

My original idea was to create a field of sunflowers using turtles that changed the way that they faced based on the the location of the sun (which is attached to the mouse), but unfortunately I had so much other work that I couldn’t spend as much time as I wanted on this and I had to simplify my idea and so I stuck with the sunflower aspect and just had the little buds and smaller petals around the center be modified by the mouse location (just circle the mouse around the center and it will draw more buds).

I hope that I get the chance to expand on this code and actually make sunflowers that change the way that they face based on the location of the mouse/sun, or even more time in the future to modify these

 

original sketch

screenshots

 

 

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Project 11: "Sunflower center"

var ang = (90);
var leng = (3);
var gold = (137.507764); //golden angle 
var space = (1);
var transX = (140);
var transY = (160);
var turtle;
var turtle2;
var r; 
var g; 
var b; 
var randG;
var randB;
 
function setup() {
    createCanvas(480, 480);
    background(219,240,253);
    
    petals();
    petals2();
    petals3();
    petals4();
    petals5();
}
 
 
function draw() {
    var a = atan2(mouseY-height/2, mouseX-width/2);
    var b = atan2(mouseY-height/2, mouseX-width/2);
  
    push();
    translate(233,230);
    rotate(b);
    scale(.15,.15);
    mousePetals();
    pop();
  
    
    push();
    translate(233,230)
    rotate(a);
    scale(.1,.1);
    sunflowerOuterBuds();
    pop();
    
    push();
    translate(transX,transY+2);
    sunflowerCenterBack();
    scale(.24,.24);
    translate(145,68);
    sunflowerCenter(); 
    pop();
    
    
        
    push();
    translate(transX+98,transY-25);
    scale(.25,.25);
    sunflowerOuterBuds2();
    rotate(90);
    translate(390,-540);
    sunflowerOuterBuds3();
    rotate(180);
    translate(-270,-630);
    sunflowerOuterBuds2();
    rotate(270);
    translate(-60,-20);
    sunflowerOuterBuds3();
    pop();
    
    
}
 
//sunflower center turtle 
  //draw that sunflower center
function sunflowerCenter(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    //colors for gradient 
    var brownColor  = color(226,145,7); // 226,145,7 //62, 42, 20
    var greenColor  = color(73,161,3);
    
    turtle.setWeight(10);
    //turtle square placement rendering 
    for( var i = 0; i< 300; i++){ 
      //color gradient for center 
      turtle.setColor(lerpColor(greenColor, brownColor, i/350));
      turtSquare(turtle, ang, leng); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        turtle.left(gold); 
        turtle.penDown();
  }
} 
  //shape of the turtle each time it loops
function turtSquare(turtle, ang, leng){ //hexagons because my octagon refused to cooperate
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
}

function sunflowerCenterBack(){
   var radius = (93);
   noStroke();
    fill(39, 20, 13);
    ellipse(93,72,radius,radius);
   
}


//little buds outside the sunflower center 
function sunflowerOuterBuds(){
    r = random(193,255);
    g = random(98,211);
    b = random(4,67);
    
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(r,g,b));
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,,4); &  //brighter yellow = (252,198,,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds2(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(237,183,4));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds3(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(255,229,142));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function budShape(turtle){
  var angle = 90;
  var lengg = 10;
        turtle.right(angle);
        turtle.right(angle+60);
        turtle.forward(lengg+1);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-65);
        turtle.forward(lengg);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-40);
        turtle.forward(lengg);  
        turtle.right(angle+25);
        turtle.forward(lengg);  
        turtle.left(angle-45);
        turtle.forward(lengg); 
        turtle.right(angle+25);
        turtle.forward(lengg); 
        turtle.left(angle-45);
        turtle.forward(lengg);
        turtle.right(angle+25);
        turtle.forward(lengg);
        
}

//petals
function petals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    
    turtle.setWeight(4);
    //turtle square placement rendering 
    for( var i = 0; i< 9; i++){ 
      //color gradient for center 
      turtle.setColor(color(254,209,40));
      petalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape(turtle){
  var angle = 90;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 2
function petals2(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape2(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape2(turtle){
  var angle = 60;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 3
function petals3(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(252,224,72));
      petalShape3(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape3(turtle){
  var angle = 70;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}


//petals set 4
function petals4(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape4(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape4(turtle){
  var angle = 40;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 5 
function petals5(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape5(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape5(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//mouse petals 
function mousePetals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 1; z++){ 
      //color gradient for center 
      //orangeCol = (242,139,0);
      //lightOranCol = (242,178,62);
      //var randR = random();
      randG = random(139,178);
      randB = random(0,62); 
      
      
      turtle.setColor(color(242,randG,randB));
      mousePetalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function mousePetalShape(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}





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

 

NatalieKS-Project-11

snow

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-11

//coordinates for the falling snowflakes
//adapted from code here:
//http://alpha.editor.p5js.org/projects/rkBAHA3h
var position = {
    x: 133,
    y: 68
};
//to help move the snowflakes
var gravity = 1;

//--------TURTLE FUNCTIONS-------
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;
}


function setup() {
    createCanvas(480, 480);
    frameRate(10);
    background(138, 172, 224);
}

function draw() {
    fill(255);
    noStroke();
    //create the snowflakes in the background
    var transparency = random(10, 255);
    fill(255, transparency);
    position.x = random(0, width);
    position.y = random(0, 400);
    ellipse(position.x, position.y, 5, 5);
    //left snow hill
    ellipse(0, height, 300, 300);
    //right snow hill
    ellipse(width, height, 300, 300);
    //left middle snow hill
    ellipse(175, height, 200, 200);
    //right middle snow hill
    ellipse(300, height, 250, 250);

}

function mousePressed() {
  var posY = mouseY;
  //set the snowflake
  var snowflake1 = makeTurtle(mouseX, posY);
  posY += 1;
  snowflake1.penDown();
  snowflake1.setColor(255);

//draw snowflakes; used the turtle graphics template from the
//Turtle Graphics page on the website
      for (var i = 0; i < 200; i++) {
          snowflake1.forward(40);
          snowflake1.left(190);
          snowflake1.forward(10);

          if (i % 30 == 0) {
              snowflake1.forward(20);
          }
      }
}

For this project, I was inspired by something that happened today: it snowed! Well, barely, but I was still really excited. I started playing around with the turtle, moving it forward and right and such to see what kind of shape it would give me, and I ended up with a snowflake-like shape. I really like the outcome of this project, I think the background with the snowflake-turtle looks really pretty! As time goes on, the background will be (almost) completely filled by the background “snowflakes,” so it looks like a snowstorm.

Here is what it looks like after some time:

daphnel-Project 11-Composition

Composition

var turtle;
var turtles=[];
var nTurtles=10;
var s;
var r;
var g;
var b;

function setup(){
    createCanvas(480,480);
    background(0);
    frameRate(10);
    //background before the black and white turtles appear
    var turtle=makeTurtle(width/2,height/2);
    turtle.setColor(color(255,255,0,100));
    turtle.setWeight(1);
    turtle.penDown();
    var goldenRatio=1+sqrt(5)/2;
    for(var i=0; i<150; i++){
    var s=5;
    turtle.right(60*goldenRatio);
    turtle.forward(s*i);
    }
}

function draw(){
    for(var i=0; i<turtles.length; i++){
        var step=random(-3,3);
        turtles[i].setWeight(i*3);
        var r=random(100,255);
        var g=random(150,255)
        var b=random(150,255)
        turtles[i].setColor(r,g,b);
        turtles[i].penDown();
        turtles[i].forward(step*i);
        turtles[i].left(25);
        turtles[i].penUp();
    }
}
function mousePressed(){
    //click to make turtles appear
    turtles.push(makeTurtle(mouseX,mouseY));

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

While I was experimenting with the golden ratio assignment previously, I was able to make some interesting designs as I played around with the code. I decided to use one of them as a basis for my background. This code starts off with a canvas with a patterned background. When you click on the canvas, turtles are made. I tend to like it when the entire canvas is covered by something and is constantly flickering like lights.

merlebac Project-11

Turtle Composition

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-11

var turtle1;
var turtle2;
var turtle3;
var turtle4;

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

function setup() {
    createCanvas(480, 480);
    background(125);

    var color1 = (255, 255, 0);
    // Creates yellow color
    turtle1 = makeTurtle(0, height / 2);
    // Creates the first turtle
    turtle1.penDown();
    turtle1.setColor(color1);
    turtle1.setWeight(4);
    // Prepares turtle for movement

    var color2 = (255, 0, 0);
    // Creates red color
    turtle2 = makeTurtle(width, height / 2);
    // Creates second turtle
    turtle2.penDown();
    turtle2.setColor(color2);
    turtle2.setWeight(4);
    // Prepares turtle for movement

    var color3 = (0, 255, 0);
    // Creates green color
    turtle3 = makeTurtle(width / 2, 0);
    // Creates third turtle
    turtle3.penDown();
    turtle3.setColor(color3);
    turtle3.setWeight(4);
    // Prepares turlte for movement

    var color4 = (0);
    // Creates black color
    turtle4 = makeTurtle(width / 2, height);
    // Creates fourth turtle
    turtle4.penDown();
    turtle4.setColor(color4);
    turtle4.setWeight(4);
    // Prepares turtle for movement
}

function draw() {
    turtle1.forward(1);
    // Moves turtle1 forward
    turtle1.turnToward(mouseX, mouseY, 1);
    // Turns turtle1 toward mouse

    turtle2.forward(1);
    // Moves turtle2 forward
    turtle2.turnToward(480 - mouseX, mouseY, 1);
    // Turns turtle2 away from mouseX toward mouseY

    turtle3.forward(1);
    // Moves turtle3 forward
    turtle3.turnToward(mouseX, 480 - mouseY, 1);
    // Turns turtle3 toward mouseX away from mouseY

    turtle4.forward(1);
    // Moves turtle4 forward
    turtle4.turnToward(480 - mouseX, 480 - mouseY, 1);
    // Turns turtle4 away from mouse
}

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

Overall this project wasn’t that difficult. I decided to have the turtles movements based on the location of the mouse. Each of them have different interactions with the mouse.

selinal-Project-11

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-11

var turt1;
var turt2;
var turt3;

function setup() {
    createCanvas(480, 480);
    frameRate(10); //best speed for change in turtle function

}

function draw() {
	background(40, 255, 215); //aqua backround
	turt1 = makeTurtle(mouseX, mouseY); //follows mouse from center
	turt1.setColor(color(255, 0, 255)); //magenta
	turt1.setWeight(.5); //thin lines

	turt2 = makeTurtle(mouseX, mouseY); 
	turt2.setColor(color(255, 200, 0)); //orange turtles
	turt2.setWeight(4); 

	turt3 = makeTurtle(mouseX, mouseY);
	turt3.setColor(color(180, 255, 30)); //yellow turtles
	turt3.setWeight(10); //largest stroke weight span

	turt4 = makeTurtle(mouseX, mouseY);
	turt4.setColor(color(255, 100, 50));

	for(var i = 0; i < 12; i++) { //there are about 12 visible iterations of the yellow turtles 
		turt3.penDown();
		turt3.forward(random(30,35)*i); //by multiplying by i, the side lengths increase with each iteration of the turtle shape
		turt3.left(60); //constant angle for visual flow
		turt3.forward(random(30,35)*i); //larger length sides
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.penUp();
	}

	for(var i = 0; i < 18; i++) { //iterations of the orange turtles
		turt2.penDown();
		turt2.forward(random(6,10)*i); //shorter sides
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.penUp();
		turt2.left(20);
		turt2.forward(5);
	}

	for(var i = 0; i < 20; i++) { //there are about 20 visible iterations of the magenta turtles
		turt1.setWeight(i*.1); //stroke weight increases with side length of the turtle
		turt1.penDown();
		turt1.back(20*i/3); //medium scale sides scale sides
		turt1.left(random(50,70)); 
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.penUp();
		turt1.right(noise(.001)*50); //natural movement away from the other circles with noise function
		turt1.back(40);	 //constant for visual appeal
	}

	for(var i = 0; i < 50; i++) {
		turt4.setWeight(i*.04);
		turt4.penDown();
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.penUp();
		turt1.right(noise(.001)*50);
		turt1.back(80);	
	}

	if(mouseIsPressed) {
		noLoop();
	}
}


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

My process for this project started with playing around with the abstraction and composition of different polygons and their color. The mouse interaction and randomization were added after.

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-11

var turt1;
var turt2;
var turt3;

function setup() {
    createCanvas(480, 480);
    frameRate(10); //best speed for change in turtle function

}

function draw() {
	background(40, 255, 215); //aqua backround
	turt1 = makeTurtle(mouseX, mouseY); //follows mouse from center
	turt1.setColor(color(255, 0, 255)); //magenta
	turt1.setWeight(.5); //thin lines

	turt2 = makeTurtle(mouseX, mouseY); 
	turt2.setColor(color(255, 200, 0)); //orange turtles
	turt2.setWeight(4); 

	turt3 = makeTurtle(mouseX, mouseY);
	turt3.setColor(color(180, 255, 30)); //yellow turtles
	turt3.setWeight(10); //largest stroke weight span

	turt4 = makeTurtle(mouseX, mouseY);
	turt4.setColor(color(255, 100, 50));

	for(var i = 0; i < 12; i++) { //there are about 12 visible iterations of the yellow turtles 
		turt3.penDown();
		turt3.forward(random(30,35)*i); //by multiplying by i, the side lengths increase with each iteration of the turtle shape
		turt3.left(60); //constant angle for visual flow
		turt3.forward(random(30,35)*i); //larger length sides
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.penUp();
	}

	for(var i = 0; i < 18; i++) { //iterations of the orange turtles
		turt2.penDown();
		turt2.forward(random(6,10)*i); //shorter sides
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.penUp();
		turt2.left(20);
		turt2.forward(5);
	}

	for(var i = 0; i < 20; i++) { //there are about 20 visible iterations of the magenta turtles
		turt1.setWeight(i*.1); //stroke weight increases with side length of the turtle
		turt1.penDown();
		turt1.back(20*i/3); //medium scale sides scale sides
		turt1.left(random(50,70)); 
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.penUp();
		turt1.right(noise(.001)*50); //natural movement away from the other circles with noise function
		turt1.back(40);	 //constant for visual appeal
	}

	for(var i = 0; i < 50; i++) {
		turt4.setWeight(i*.04);
		turt4.penDown();
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.penUp();
		turt1.right(noise(.001)*50);
		turt1.back(80);	
	}

	if(mouseIsPressed) {
		noLoop();
	}
}


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

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.