## Turtle Graphics

``````//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 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.

## Isabella Hong – Project 11 – Composition

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:

``````// 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

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.forward(length);
turtle.forward(length);
turtle.forward(length);
//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;}
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;}

``````

## Project 11- Composition-sehenry

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.

``````//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)
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();
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 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;
}``````

## Grace Cha – Project 11- Composition

Playing with “Paint” : a childhood memory….

Click and Dragg mouse to fill.

Click any key to send to back of drawing.

``````//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;}
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.

## Project 11 – Simin Li

``````// 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 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.

## vtavarez-Project-11

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.

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

## Diana Connolly – Project 11

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 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() {
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;}
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):

## Project-11-Composition

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.

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

## Project 11: Turtle Composition

``````/*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.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 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.