Category: Project-11-Composition

james-turtlegraphicscompostion

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-11

var timer = 0.01;
var inc = 0.001;
//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(200),
                  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;
}
//using turtle graphics to draw cloudy sin curve using perlin noise
function setup(){
    createCanvas(600, 400);
    background(250, 50);
}

function draw(){
    var amplitude = 50 + timer * noise(inc);
    var startVal = 50 + timer * noise(inc);
    var myTurtle = makeTurtle(0, startVal);
    for (var x = 0; x < width; x++){
        //restrict sin curve within the canvas edges
        var angle = map(x, 0, width, 0, TWO_PI);
        //sin curve
        var yLoc = startVal + sin(angle) * amplitude;
        myTurtle.goto(x, yLoc);
    }
    timer++;
    inc++;

    if (frameCount%400 == 0){
        background(250);
    }
}

I wanted to use the turtle to draw a sin curve that gently distorts over time leaving a soft mesh in its wake similar to the image below. I lost control of the turtle stroke and perlin noise, then ran out of time. Will explore more after.

For the composition project this week, I decided to attempt to create an abstract rendering of a rose. To start with, I looked at the properties of Turtle Graphics that we had learned and implemented last week and began my project.

Here is what it looked like throughout the process of creating my “rose petals.”

‘I found that when I was incrementing by numbers larger than one, I was getting the desired density in the center of my graphic, essentially the center of the flower. When I switched my incrementation to i++, I got the exact look I was going for – a heavily filled in center that spiraled outwards to create a beautiful abstract rose.

Here’s the final result:

ijhong-11

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project 11 

//angle to turn and reposition by in degrees 
var turnAngle = 110;
//the degree by which the turtle turns by 
var adegree = 120;   

function setup() {
    createCanvas(400, 400);
    //pale yellow background 
    background(250, 255, 200);
    strokeJoin(MITER); 
    strokeCap(PROJECT); 
    var turtle = makeTurtle(width / 2, 265);
    //pink color for rose 
    turtle.setColor(color(255, 174, 188));
     
//loops that will continue to draw the base figure to create the rose
    for (var i = 0; i < 100; i++) { 
      for (var length = 0; length < 200; length += 100) {
        //base figure for the rose 
          //set the line weight 
          turtle.setWeight(2); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length);
          turtle.right(adegree);   
        //push the base figure by turnAngle each time it is drawn
          turtle.penUp(); 
          turtle.forward(i * 2);
          turtle.right(turnAngle); 
          turtle.penDown();   
        }
    }
    //save on computation
    noLoop();  
}

function draw() {   
}

//turtle graphics API 

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 tried a bunch of different ideas for this project but in the end I wanted to keep it simple. I created two turtles that would draw and rotate themselves in two different positions and in the end I thought that it kind of looked like a tire on a car. As a result I drew a road and a sign that says how far carnegie mellon is from my home while the tiring is stitching itself together before it hits the road. I think it worked out well.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 10 Frestyle Playing With Turtles

//Global Variables
var turtle1Length = 20
var turtle2Length = 40
var turtle3Length = 50
var turtle4Length = 60

function setup() {
    createCanvas(400, 400);
    background('teal');
    myTurtle1 = makeTurtle(width/2,height/2) //make turtle 1
    myTurtle2 = makeTurtle(width/2,height/2) //make turtle 2
    myTurtle1.penDown();
    push();
    fill(50)
    rect(0,(height/2)-12,width,12) //road
    pop();
}

function draw() {
    
    push()
    rotate(frameCount) //rotation
    turtleLine1(turtle1Length)
    pop();
    push();
    rotate(-frameCount) //rotation in other direction
    turtleLine2(turtle2Length)
    pop();
    line(60,(height/2)-12,60,(height/2)-50) //sign 
    rectMode(CENTER)
    rect(60,(height/2)-50,50,30) //signrectangle
    textAlign(CENTER)
    textSize(5)
    text("CARNEGIE MELLON",60,(height/2)-50) //CMU Text
    text("238 Miles",60,(height/2)-45) //CMU Miles To my House
    push();
    for(i=0;i<width;i+=10){ //road yellow marks
        noStroke()
        fill('yellow')
        rect(i,(height/2)-6,3,1)
    }
    pop();
}

function turtleLine1 (length){ //turtle 1 Actions
    myTurtle1.setColor('blue')
    myTurtle1.setWeight(1)
    strokeJoin(MITER)
    myTurtle1.left(90)
    myTurtle1.forward(10)
    myTurtle1.left(90)
    myTurtle1.forward(20)
    myTurtle1.left(30)
    myTurtle1.forward(length)
   
    
    
}

function turtleLine2 (length){ //turtle 2 Actions
    myTurtle2.setColor('black')
    myTurtle2.setWeight(1)
    strokeJoin(MITER)
    myTurtle2.left(90)
    myTurtle2.forward(10)
    myTurtle2.right(90)
    myTurtle2.forward(20)
    myTurtle2.right(30)
    myTurtle2.forward(length)
    }




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

Playing with “Paint” : a childhood memory….

‘

Click and Dragg mouse to fill.

Click any key to send to back of drawing.

sketch

//Grace Cha
//section C
//heajinc
//Project 11 -Turtle Graphics



function setup() {
    createCanvas(600, 600);
    //background(255);

    var step = 7; //forward
    
    var goldenAngle = 137.507764;

    //hexagon has 6 sides
    var hexNumberofSide = 9; 

    //each side has a degree of 60 degrees
    var hexDegrees = 10;

    //Draw 400 little hexagons 
    var numHex = 500;

    //each side has a length of 5 pixels.
    var hexSideLength = 20;
    

   
    var turtle1 = makeTurtle(width/2  , height/2 );
    for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
        turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle)); 
        turtle1.setWeight(5);
        turtle1.penDown();

        

        for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
            step+=1;
            turtle1.forward(150 + step); //number of sides
            turtle1.left(40); //number of degrees
            
        }

        //lift the pen 
        turtle1.penUp();


        //These control the amount of spreading between each hexagon

        //turn each hexagon a golden angle 
        turtle1.left(goldenAngle);

        //the space between each hexagon 
        turtle1.forward(i + 30 );
        
        //the forward
        turtle1.right(200);


        turtle1.forward(10); //controls the amount of 
    }
    
    
    
    
}


function draw() {



    if(mouseIsPressed){
    noStroke();
    fill("#6C028A");
    ellipse(mouseX, mouseY, 80,80)
    }

    if(keyIsPressed){
    var step = 7; //forward
    
    var goldenAngle = 137.507764;

    //hexagon has 6 sides
    var hexNumberofSide = 9; 

    //each side has a degree of 60 degrees
    var hexDegrees = 10;

    //Draw 400 little hexagons 
    var numHex = 500;

    //each side has a length of 5 pixels.
    var hexSideLength = 20;
    

   
    var turtle1 = makeTurtle(width/2  , height/2 );
    for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
        turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle)); 
        turtle1.setWeight(5);
        turtle1.penDown();

        

        for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
            step+=1;
            turtle1.forward(150 + step); //number of sides
            turtle1.left(40); //number of degrees
            
        }

        //lift the pen 
        turtle1.penUp();


        //These control the amount of spreading between each hexagon

        //turn each hexagon a golden angle 
        turtle1.left(goldenAngle);

        //the space between each hexagon 
        turtle1.forward(i + 30 );
        
        //the forward
        turtle1.right(200);


        turtle1.forward(10); //controls the amount of 
    }
    }
    
}




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

When I was little my first encounter with digital drawing was with “Paint” on a windows computer, I always tried to fill in the white spaces of my drawing based on an outline.  In this stimulation, I wanted to recreate this childhood memory with the added touch of being able to see the process by “sending back the painted section to see the “holes” that I missed.

 

 

siminl-project11

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 11
var seaTurtle;
//create a turtle
function setup() {
    createCanvas(600, 400);
    background(21,40,71);
    seaTurtle = makeTurtle(300,200);
    //make a turtle
}
function draw(){
    strokeJoin(MITER);
    strokeCap(PROJECT);
    for(var i = 0; i < 6; i++){
        seaTurtle.penUp();
        seaTurtle.right(60);
        seaTurtle.forward(random(70,200));
        var snowFlakeSize = random(1,8);
        snowFlake(snowFlakeSize);
    }
}

function mouseReleased() {
//when mouse is clicked, redraw 6 snowflakes according to the mouse position
  seaTurtle.penUp();
  seaTurtle.goto(mouseX,mouseY);
  println(mouseX);
  for(var i = 0; i < 6; i++){
  //draw six snowflakes
        seaTurtle.penUp();
        seaTurtle.right(60);
        seaTurtle.forward(random(70,200));
        //randomize how far apart each snowflake is from each other
        var snowFlakeSize = random(1,10);
        //randomize the size of the snowflakes
        snowFlake(snowFlakeSize);
    }
}
function snowFlake(a){
    seaTurtle.penDown();
//draw snow flake with dimension of a 
    if(a < 5){
    //if a is smaller than 5 fill it with white
    seaTurtle.setColor(255);
    }
    else{
    //else fill it with a randomized shade of blue
        seaTurtle.setColor(color(random(0,100),random(100,255),255));
    }
    for(var i = 0; i < 6; i ++){
        patternA(a);
    }
    noLoop();

}
    
function patternA(a){
    //draw branch of snowflake with dimension a
    seaTurtle.penDown();
    seaTurtle.setWeight(a / 5);
    //determine line weight according to the size
    seaTurtle.left(30);
    seaTurtle.forward(5 * a);
    seaTurtle.left(60);
    seaTurtle.forward(3 * a);
    seaTurtle.left(45);
    seaTurtle.forward(4 * a);
    seaTurtle.right(45);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(90);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(45);
    seaTurtle.forward(3 * a);
    seaTurtle.left(135);
    seaTurtle.forward(2 * a);
    seaTurtle.left(45);
    seaTurtle.forward(4 * a);
    seaTurtle.right(45);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(90);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(45);
    seaTurtle.forward(3 * a);
    seaTurtle.left(135);
    seaTurtle.forward(2 * a);
    seaTurtle.left(30);
    seaTurtle.forward(2 * a);
    seaTurtle.right(60);
    seaTurtle.forward(2 * a);
    seaTurtle.right(60);
    seaTurtle.forward(2 * a);
    seaTurtle.right(60);
    seaTurtle.forward(2 * a);
    seaTurtle.right(60);
    seaTurtle.forward(2 * a);
    seaTurtle.left(30);
    seaTurtle.forward(2 * a);
    seaTurtle.left(135);
    seaTurtle.forward(3 * a);
    seaTurtle.right(45);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(90);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(45);
    seaTurtle.forward(4 * a);
    seaTurtle.left(45);
    seaTurtle.forward(2 * a);
    seaTurtle.left(135);
    seaTurtle.forward(3 * a);
    seaTurtle.right(45);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(90);
    seaTurtle.forward(a / sqrt(2));
    seaTurtle.right(45);
    seaTurtle.forward(4 * a);
    seaTurtle.left(45);
    seaTurtle.forward(3 * a);
    seaTurtle.left(30);
    //draw pattern A
}

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

For this project I wanted to use turtles to draw a complex shape that would be otherwise difficult to achieve through other methods. The shape of a snowflake seemed beautiful and intriguing to me. 

My approach to this project was simple. I was looking at previous assignments, particular homework 10-b and thought how can you add movement to it. I think the outcome is fun because there are several designs that come from just a few adjustments to each of the turtles.

sketch-43.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Project-11

var startFrame;

function setup(){
    createCanvas(800,800);
    strokeJoin(MITER);
    strokeCap(PROJECT);
    frameRate(8);
    startFrame = frameCount
    //use helper fcns to draw each row individually
}

function drawTurtle1(turtle1,step){
    turtle1.setWeight(2);
    turtle1.setColor(color(250,20,250));
    for (var i=0; i <10; i++){
        turtle1.penDown();
        turtle1.left(80*step);
        turtle1.forward(10);
        turtle1.right(90);
        turtle1.forward(10);
        turtle1.right(90);
        turtle1.forward(10*step);
        turtle1.left(90);
        turtle1.forward(10);
    }
}

function drawTurtle2(turtle2,step){
    turtle2.setWeight(2);
    turtle2.setColor(color(230,12,10));
    for (var i=0; i <10; i++){
        turtle2.penDown();
        turtle2.left(90*step);
        turtle2.forward(10*step);
        turtle2.right(90);
        turtle2.forward(10);
        turtle2.right(90);
        turtle2.forward(10);
        turtle2.left(90);
        turtle2.forward(10);
    }
}

function drawTurtle3(turtle3,step){
    turtle3.setWeight(2);
    turtle3.setColor(color(230,230,250));
    for (var i=0; i <10; i++){
        turtle3.penDown();
        turtle3.left(100*step);
        turtle3.forward(10*step);
        turtle3.right(90);
        turtle3.forward(10);
        turtle3.right(90);
        turtle3.forward(10*step);
        turtle3.left(90*step);
        turtle3.forward(10);
    }
}


function draw(){
    background(20);
    var step = (frameCount - startFrame)/30.0;
    for (var x = 20; x < width+200; x+=60*step){
        var turtle1 = makeTurtle(width/4,height/2);
        drawTurtle1(turtle1,step);
        var turtle2 = makeTurtle(3*width/4,height/2);
        drawTurtle2(turtle2,step);
        var turtle3 = makeTurtle(width/2,height/2);
        drawTurtle3(turtle3,step);
    }
}



//=====================Turtle Funcions Below from lecture notes===============

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

For this project, I wanted to have an interactive turtle in which it follows your mouse as you drag it through a maze. Here’s my rendition below:
Turtle maze

var myTurtle;
var startFrame;
var maze;

function preload() {
    maze = loadImage("http://i.imgur.com/dwclzf4.png");
}

function setup() {
    createCanvas(400, 440);
    image(maze,0,20,width,height); //background maze image
    myTurtle = makeTurtle(30, 30); //starts turtle at starting point
    myTurtle.setColor(color(255, 200, 200)); //light pink turtle
    myTurtle.setWeight(2); //stroke weight of 2
    myTurtle.penDown();
    resetCanvas(); //resets canvas to keep drawing the line
    frameRate(10);
}

function draw() {
    if (mouseIsPressed) { //makes turtle follow where your mouse is dragged
        var step = (frameCount - startFrame)/30.0;
        myTurtle.goto(mouseX,mouseY);
        if (myTurtle.y > height) resetCanvas();
    }
}

function resetCanvas() { //updates the image
    image(maze,0,0,width,height);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(30, 30);
    myTurtle.penDown();
}











//-------------------------------------------------------
//Turtle graphics given code
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;}

Screenshots of the final product (I don’t want to give away the solution, so the second image only has a small portion of turtle):

For this project, I thought of how the turtle could respond to the mouse and I really liked the idea of a drawing pad, and so I recreated that. The turtle follows the mouse and draws as the mouse moves. It is similar to the snake assignment, but in some aspects was easier for me to understand how it worked.

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//turtle project

//global location variable

var x = 0;
var y = 0;

function setup() {
	createCanvas(400,400);
	background(75, 175, 255);

}

function draw() {
    var t1 = makeTurtle(x, y);
	  t1.penDown();
	  t1.right(90);
	  t1.setColor(255);
    //reassign x and y to = mouseX and mouseY so it draws
	  t1.goto(mouseX, mouseY);
	  x = mouseX;
    y = 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;
}

turtle graphic

/*Emma Shi
eyshi@andrew.cmu.edu
Section B
Project 11
*/
var myTurtle;
var hexSize = 60;

function setup() {
  createCanvas(500, 500);
  background(0);
  frameRate(1);
  myTurtle = makeTurtle(200, 130);
}

function draw() {
  turtleBody();
}

function turtleBody() {
  myTurtle.penDown();
  for (j = 0; j < 25; j++){
    for (i = 0; i < 8; i++){
      myTurtle.forward(hexSize*j);
      myTurtle.right(45);//draws the turtle body
  }
}
  myTurtle.forward(hexSize/4);
  myTurtle.left(90);
  myTurtle.forward(hexSize/2);
  myTurtle.right(45);
  myTurtle.forward(hexSize/3);
  myTurtle.right(90);
  myTurtle.forward(hexSize/3);
  myTurtle.right(135);
  myTurtle.forward(hexSize/2.2);
  myTurtle.right(180);
  myTurtle.forward(hexSize/2.2);
  myTurtle.right(90);
  myTurtle.forward(hexSize/2);
  myTurtle.penUp();//draws turtle head

  myTurtle.penDown();
  myTurtle.left(90);
  myTurtle.forward(hexSize/3.5);
  myTurtle.left(315);
  myTurtle.forward(hexSize/2.5);
  myTurtle.left(90);
  myTurtle.forward(hexSize/2);
  myTurtle.left(300);
  myTurtle.forward(hexSize/2);
  myTurtle.left(320);
  myTurtle.forward(hexSize);
  myTurtle.left(210);
  myTurtle.forward(hexSize);
  myTurtle.left(320);
  myTurtle.forward(hexSize/2);
  myTurtle.left(180);
  myTurtle.forward(hexSize/2);
  myTurtle.left(115);
  myTurtle.forward(hexSize/1.9);
  myTurtle.left(115);
  myTurtle.forward(hexSize/2);
  myTurtle.left(60);
  myTurtle.forward(hexSize/10);
  myTurtle.left(30);
  myTurtle.forward(hexSize/2.1);
  myTurtle.penUp();//draws upper right fin

  myTurtle.penDown();
  myTurtle.right(120);
  myTurtle.forward(hexSize/1.55);
  myTurtle.left(45);
  myTurtle.forward(hexSize);
  myTurtle.left(45);
  myTurtle.forward(hexSize/2.5);
  myTurtle.left(270);
  myTurtle.forward(hexSize/2);
  myTurtle.right(300);
  myTurtle.forward(hexSize/2);
  myTurtle.right(320);
  myTurtle.forward(hexSize);
  myTurtle.right(210);
  myTurtle.forward(hexSize);
  myTurtle.right(320);
  myTurtle.forward(hexSize/2);
  myTurtle.right(180);
  myTurtle.forward(hexSize/2);
  myTurtle.right(115);
  myTurtle.forward(hexSize/1.9);
  myTurtle.right(115);
  myTurtle.forward(hexSize/2);
  myTurtle.right(60);
  myTurtle.forward(hexSize/10);
  myTurtle.right(30);
  myTurtle.forward(hexSize/2.1);
  myTurtle.penUp();//draws upper left fin

  myTurtle.penDown();
  myTurtle.right(60);
  myTurtle.forward(hexSize/2.7);
  myTurtle.right(315);
  myTurtle.forward(hexSize);
  myTurtle.right(315);
  myTurtle.forward(hexSize/2.5);
  myTurtle.left(270);
  myTurtle.forward(hexSize/2);
  myTurtle.right(300);
  myTurtle.forward(hexSize/2);
  myTurtle.right(320);
  myTurtle.forward(hexSize);
  myTurtle.right(210);
  myTurtle.forward(hexSize);
  myTurtle.right(320);
  myTurtle.forward(hexSize/2);
  myTurtle.right(180);
  myTurtle.forward(hexSize/2);
  myTurtle.right(115);
  myTurtle.forward(hexSize/1.9);
  myTurtle.right(115);
  myTurtle.forward(hexSize/2);
  myTurtle.right(60);
  myTurtle.forward(hexSize/10);
  myTurtle.right(30);
  myTurtle.forward(hexSize/2.1);
  myTurtle.penUp();//draws lower left fin

  myTurtle.penDown();
  myTurtle.right(60);
  myTurtle.forward(hexSize/2.7);
  myTurtle.right(315);
  myTurtle.forward(hexSize);
  myTurtle.right(315);
  myTurtle.forward(hexSize/1.5);
  myTurtle.right(90);
  myTurtle.forward(hexSize/2);
  myTurtle.left(300);
  myTurtle.forward(hexSize/2);
  myTurtle.left(320);
  myTurtle.forward(hexSize);
  myTurtle.left(210);
  myTurtle.forward(hexSize);
  myTurtle.left(320);
  myTurtle.forward(hexSize/2);
  myTurtle.left(180);
  myTurtle.forward(hexSize/2);
  myTurtle.left(115);
  myTurtle.forward(hexSize/1.9);
  myTurtle.left(115);
  myTurtle.forward(hexSize/2);
  myTurtle.left(60);
  myTurtle.forward(hexSize/10);
  myTurtle.left(30);
  myTurtle.forward(hexSize/2.1);
  myTurtle.penUp();//draws lower left fin
}

//////////////////////////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("green"),
                  weight: random(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 started out with creating a geometric turtle. I drew a very simple sketch to get an idea of how I would be directing the turtle’s pen.

While I was originally going to have the turtle rotate according to the user’s mouse, I ended up playing around with it and create a self-drawing “turtle spiral.” A possible beginning-to-end image rendition is shown below.