## jmmedenb-Project 11

``````//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Section C 1:30PM
//Assignment 011-C

var turtles = [];
var heart;
function setup() {
strokeWeight(20);
var colors =[ color(113, 222, 241),
color(175, 230, 51), color(183, 140, 255), color(150,20,150)];

createCanvas(550, 550);

for(i = 0; i < colors.length; i++){ // creates multiple turtles
var turt = makeTurtle(325,400);
turt.setColor(colors[i]);
turt.penDown
turtles.push(turt);
}
}

function draw() {
background(0);
fill(0);
strokeWeight(4);

var heart =makeTurtle(325,100);

for (b=0; b<width;b++){
heart.forward(100);
heart.right(45);
heart.forward(100);
heart.right(45)
heart.forward(100);
heart.right(50);
heart.forward(200);

}

for(i = 0; i < turtles.length; i++){
turtles[i].forward(50);
turtles[i].left(100);
turtles[i].forward(50);
turtles[i].right(50);
turtles[i].forward(50);
turtles[i].right(50);
//if(turtles[i].distanceTo(300, 300) > 300){
//turtles[i].goto(300, 300);
//}

for(m = 0; m < turtles.length; m++){
turtles[m].forward(25);
turtles[m].left(50);
turtles[m].forward(25);
turtles[m].right(25);

for(x = 0; x < turtles.length; x++){
turtles[x].forward(5);
turtles[x].left(10);
turtles[x].forward(5);
turtles[x].right(5);

}
}
}

}

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

For this project, I wanted to experiment with using turtles and colors as well as geometric shapes. I liked creating a more rigid grey geometric shape with movement and color within it.

## project 11

``````//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a
//project 11

function setup() {
createCanvas(400, 400);

frameRate(10);
}

function draw() {

for (var i=0;i<30;i++) {
strokeWeight(15);
stroke(220-i);
line(0,i*15,width,i*15);
}//background color

push();
var turtle = makeTurtle(0, 45);
turtle.penDown();
turtle.setColor(255);
turtle.setWeight(3);
strokeJoin(MITER);
strokeCap(PROJECT);
var i = 0;
while ( i < width) {
i++;
turtle.left(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(30);
turtle.right(90);
turtle.forward(20);
turtle.right(90);
turtle.forward(10);
turtle.right(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(20);
turtle.left(90);
turtle.forward(30);
turtle.left(90);
turtle.forward(40);

}
noLoop();
turtle.penUp();
pop();//upper frame

push();
var turtle = makeTurtle(0, height-5);
turtle.penDown();
turtle.setColor(255);
turtle.setWeight(3);
strokeJoin(MITER);
strokeCap(PROJECT);
var i = 0;
while ( i < width) {
i++;
turtle.left(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(40);
turtle.right(90);
turtle.forward(30);
turtle.right(90);
turtle.forward(20);
turtle.right(90);
turtle.forward(10);
turtle.right(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(10);
turtle.left(90);
turtle.forward(20);
turtle.left(90);
turtle.forward(30);
turtle.left(90);
turtle.forward(40);

}
noLoop();
turtle.penUp();
pop();//bottom frame

}

function mousePressed()  {
var turtle = makeTurtle(mouseX, mouseY);
turtle.penDown();
turtle.setColor(255);
for (var i = 0; i < 20; i++) {
turtle.forward(50);
turtle.right(137.5);
turtle.forward(50);
}
turtlePenUp();
//make random turtles

}

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

For this project I tried to use turtle to create some abstract graphic that could interact with mouse motion. I use the turtle to make frames and another turtle to follow the mouse movement. whenever the mouse is pressed, a new turtle is drawn.

## Turtle Composition

This is a doodle of mine that I have doodled in the corners of my notebooks and sketchbooks since my freshman year of high school. I was very excited to be able to doodle it in code!

``````<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

<!-- Uncomment the lines below to include extra p5 libraries, or
use template-all or template-all-min:
-->

<script src="sketch.js" type="text/javascript"></script>
<body>
</body>
</html>
``````

``````//Arula Ratnakar
//Section C
//Turtle Composition
//aratnaka@andrew.cmu.edu

function setup() {
createCanvas(600, 400);
background(255);
var turtle = makeTurtle(width/2, height/2);
turtle.penDown();
turtle.setColor(0);
turtle.setWeight (4)
turtle.left(90)
turtle.forward(145)
turtle.right(135)
turtle.forward(16)
turtle.right(135)
turtle.forward(100)
turtle.right(90)
turtle.forward(16)
turtle.right(90)
turtle.forward(16)
turtle.right(90)
turtle.forward(75)
turtle.right(135)
turtle.forward(16)
turtle.right(135)
turtle.forward(150)
turtle.left(90)
turtle.forward(16)
turtle.left(90)
turtle.forward(16)
turtle.left(90)
turtle.forward(100)
turtle.left(135)
turtle.forward(16)
turtle.left(135)
turtle.forward(11.313708499)
turtle.forward(63.686291501)
turtle.left(90)
turtle.forward(16)
turtle.left(90)
turtle.forward(16)
turtle.left(90)
turtle.forward(20)
turtle.forward(120)

turtle.penUp()

}

function draw() {

}

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

## AndrewWang-Project-11

``````var myTurtles = [];
var img;
}
function setup() {
createCanvas(600, 400);
var turtle = new makeTurtle(width/2, height/2);
turtle.setColor("yellow");
turtle.setWeight(4);
myTurtles.push(turtle);
strokeJoin(MITER);
strokeCap(PROJECT);

}
function mousePressed(){
//creates new turtle on mouse click
var ranColor = random(0,255);
px = random(0,width);
py = random(0,height);
turtle = new makeTurtle(px,py);
turtle.setColor('yellow');
turtle.setWeight(4);
myTurtles.push(turtle);
}

function draw() {
//draws image
background(255);
image(img, 0, 0, 600, 400);
//draws firefly
for(i=0; i<myTurtles.length; i++){
myTurtles[i].penDown();
drawTurtles(myTurtles[i]);
myTurtles[i].penUp();
}
}

function drawTurtles(turtle){
//draws a firefly
angle = random(-90,90);
distance = random(0,3);
turtle.right(angle);
turtle.forward(distance);
}
////////

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

I wanted to replicate the effect of fireflies using the turtles. I made them move randomly and change direction randomly in order to do this over a dark relevant background.

## project-11

For this project I decided I wanted to play around with how turtles worked and what they could look like, so I didn’t start out with anything specific in mind. I ended up with someone that looks almost like electricity – it reminded me of a plasma globe!

The screenshots of it don’t look very cool, you really have to view it in motion.

``````/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 11
*
*/

var turtles = [];
function setup() {
var colors =[color(250, 45, 125), color(113, 222, 241),
color(175, 230, 51), color(183, 140, 255), color(255), color(253, 162, 35)];

createCanvas(600, 600);

for(i = 0; i < colors.length; i++){ // creates multiple turtles
var turt = makeTurtle(width/2,height/2);
turt.setColor(colors[i]);
turt.penDown
turtles.push(turt);
}
}

function draw() {
background(0);
fill(0);
ellipse(300, 300, 300, 300);

for(i = 0; i < turtles.length; i++){
turtles[i].forward(random(50));
turtles[i].left(random(100));
turtles[i].forward(random(50));
turtles[i].right(random(50));
if(turtles[i].distanceTo(300, 300) > 300){
turtles[i].goto(300, 300);
}
}

}

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

## Shannon Case Project 11

``````//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 11

function setup() {
createCanvas(600, 600);
background('#230133');
}

function draw() {
background('#230133');

var rot = map(mouseY, 0, width, 130, 137.507764);

var turtle = makeTurtle(width/2, height/2); //center turtle
var turtle2 = makeTurtle(width/2, height/2);
var turtle3 = makeTurtle(width/2, height/2);

if (mouseX < 200){
turtle.penDown();
turtle.setColor('#7100a5'); //purple turtle
for (var i = 0; i < 300; i++) { //draw many turtles

turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
turtle.forward(3);
turtle.right(60);
//draw the hexagons
turtle.penUp(); //stop drawing

turtle.forward(i); //move out by incriment
turtle.left(rot); //move around the golden angle

turtle.penDown(); //draw again
}
}

else if ( mouseX > 200 & mouseX < 400){
turtle2.penDown();
turtle2.setColor('#d09de8');
for (var i = 0; i < 400; i++) { //draw many turtles

turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
turtle2.forward(3);
turtle2.right(60);
//draw the hexagons
turtle2.penUp(); //stop drawing

turtle2.forward(i); //move out by incriment
turtle2.left(rot); //move around the golden angle

turtle2.penDown(); //draw again
}
}

else if ( mouseX > 400 & mouseX < 600){
turtle3.penDown();
turtle3.setColor('#e4dce8');
for (var i = 0; i < 500; i++) { //draw many turtles

turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
turtle3.forward(3);
turtle3.right(60);
//draw the hexagons
turtle3.penUp(); //stop drawing

turtle3.forward(i); //move out by incriment
turtle3.left(rot); //move around the golden angle

turtle3.penDown(); //draw again
}
}

}

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

For this project I chose to work with the golden ratio turtle graphic that we did for the last assignment. I thought it would be cool to map this to the mouse Y positions to create different spirals. I then made three different turtles so that as you move across the mouse X positions you can play with varied sizes of turtle spirals.

## Project 11 Freestyle – Sofia Syjuco

``````//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 11- c

var turtle1;// create a turtle

function setup(){
createCanvas(700,400);// create a canvas
turtle1 = makeTurtle(width/2,height/2);// make the first turtle
}
function draw(){

background(235,100,210,10); // fill the background with white
turtle1.penDown();// start drawing
turtle1.setColor(255); //set the color to white
turtle1.setWeight(5);// weight to 6

turtle1.turnToward(mouseX, mouseY, 30);// turn the turtle towards the mouse
turtle1.forward(1);// move the turtle forward
}

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

I spent a long time tinkering with the turtle trying to figure out exactly how to turn it towards the mouse, and it was such a relief to discover it was actually pretty simple! From there it was just tweaking certain numbers and values, and trying to get an interesting result.

## owen fox project 11

``````//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project Week 11

var progress = 0;

//color values
var r = 0;
var g = 0;
var b = 0;
//constant
var c = 50;
//where the gradient stops and the color UI begins
var ylimit = 90;

function setup() {
createCanvas(400,400);
background("white");
}

function draw() {

//draws a turtle square at every 3 by 3 pixels
for (var x = 0; x < width/3; x ++) {
for (var y = 0; y < width/3; y ++) {
if (y < ylimit) {
turtleSquare(r - x,g - x,b,x*3,y*3);
}
}
}

//prints colot values as text
textAlign(CENTER);
textSize(14);
fill("white");
text("red:" + r, c, height- c);
text("green:" + g, width/2, height- c);
text("blue:" + b, width - c, height- c);

}

function mouseClicked() {
//whenever a user clicks on the three text graphics created in draw, they will change the value of the color by + 10
if ((mouseX > c/2) & (mouseX < c + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
background("white");
r += 10;
}
if ((mouseX > width/2 - c/2) & (mouseX < width/2 + c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
background("white");
g += 10;
}
if ((mouseX > width - c - c/2) & (mouseX < width - c/2) && (mouseY > height - c - c/3) && (mouseY < height - (c - c/3))) {
background("white");
b += 10;
}
}

function turtleSquare(r,g,b,x,y) {
//uses turtle graphics to draw a 3 by 3 square
var turtle = makeTurtle(x,y);
turtle.setColor(color(r,g,b))
turtle.setWeight(3);
turtle.penDown();
turtle.forward(3);
turtle.right(90);
turtle.forward(3);
turtle.right(90);
turtle.forward(3);
turtle.right(90);
turtle.forward(3);
turtle.penUp();
}

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

uses small turtle squares to create a user generated gradient.

clicking on the color labels changes their value.

## Hannah K-Project 11

``````var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;
var turtle7;
var turtle8;
var turtle9;

function setup() {
createCanvas(500, 500);
turtle1 = makeTurtle(120, 60);
turtle2 = makeTurtle(110, 230);
turtle3 = makeTurtle(120, 350);
turtle4 = makeTurtle(250, 75);
turtle5 = makeTurtle(260, 210);
turtle6 = makeTurtle(250, 375);
turtle7 = makeTurtle(400, 60);
turtle8 = makeTurtle(390, 230);
turtle9 = makeTurtle(400, 350);
}

function draw() {

// Draw the frame
fill(255, mouseX, mouseY);
rect(0, 0, width-1, height-1);

// Creating turtle 1 / 9
turtle1.penDown();
turtle1.setColor(0);
for (var i = 0; i < 500; i++) {
turtle1.forward(10);
turtle1.right(50);
turtle1.forward(40);
if (i % 10 === 0) {
turtle1.forward(15);
}
}

// Creating turtle 2 / 9
turtle2.penDown();
turtle2.setColor(0);
for (var i = 0; i < 500; i++) {
turtle2.forward(10);
turtle2.right(65);
turtle2.forward(40);
if (i % 10 === 0) {
turtle2.forward(15);
}
}

// Creating turtle 3 / 9
turtle3.penDown();
turtle3.setColor(0);
for (var i = 0; i < 500; i++) {
turtle3.forward(10);
turtle3.right(50);
turtle3.forward(40);
if (i % 10 === 0) {
turtle3.forward(15);
}
}

// Creating turtle 4 / 9
turtle4.penDown();
turtle4.setColor(0);
for (var i = 0; i < 500; i++) {
turtle4.forward(10);
turtle4.right(65);
turtle4.forward(40);
if (i % 10 === 0) {
turtle4.forward(15);
}
}

// Creating turtle 5 / 9
turtle5.penDown();
turtle5.setColor(0);
for (var i = 0; i < 500; i++) {
turtle5.forward(10);
turtle5.right(50);
turtle5.forward(40);
if (i % 10 === 0) {
turtle5.forward(15);
}
}

// Creating turtle 6 / 9
turtle6.penDown();
turtle6.setColor(0);
for (var i = 0; i < 500; i++) {
turtle6.forward(10);
turtle6.right(65);
turtle6.forward(40);
if (i % 10 === 0) {
turtle6.forward(15);
}
}

// Creating turtle 7 / 9
turtle7.penDown();
turtle7.setColor(0);
for (var i = 0; i < 500; i++) {
turtle7.forward(10);
turtle7.right(50);
turtle7.forward(40);
if (i % 10 === 0) {
turtle7.forward(15);
}
}

// Creating turtle 8 / 9
turtle8.penDown();
turtle8.setColor(0);
for (var i = 0; i < 500; i++) {
turtle8.forward(10);
turtle8.right(65);
turtle8.forward(40);
if (i % 10 === 0) {
turtle8.forward(15);
}
}

// Creating turtle 9 / 9
turtle9.penDown();
turtle9.setColor(0);
for (var i = 0; i < 500; i++) {
turtle9.forward(10);
turtle9.right(50);
turtle9.forward(40);
if (i % 10 === 0) {
turtle9.forward(15);
}
}

}

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

This week for my project, I decided to make several repeating turtles with a changing background. It kind of reminds me of the pattern we had to create for a project in a past week. It was fun revisiting the use of turtles, and I enjoyed making turtles that looked totally different from the meanders we created for the assignment last week. I think the changing background adds a cool visual effect, and it was something I came up with during the course of making this project. I did not really start this project with an exact plan, like I usually do, but I enjoyed it nonetheless and feel much more comfortable using turtles now.

## Project 11

I really enjoyed this project.  I liked being able to add in the color changing functions because it added variety and made the turtle design a bit more engaging. sketch

``````var turtle;
var startFrame;

var r = 235;
var g = 200;
var b = 200;
var x = 300;
var y = 300;

function setup() {
createCanvas(600, 600);
background(0);
x = mouseX;
y = mouseY;
turtle = makeTurtle(430,100);
turtle.setColor(color(r,g,b));
stroke(r,g,b);
fill(r,g,b);
turtle.setWeight(1);
turtle.penDown();
frameRate(10);
}

function draw(){

for (var i = 0; i < 100; i++) {
if(i %2){
r = r - random(0,.08);
g = g - random(.03,.06);
b = b - random(.01,.2);
}
turtle.setColor(color(r,g,b));
turtle.forward(90);
turtle.right(80.5);
turtle.forward(60);
if (i % 50 === 0) {
turtle.forward(200);
}
}
}

function mousePressed(){
background(0);
r = random(0,255);
b = random(0,255);
g = random(0,255);
}

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

``````