Category: Section C

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-11-Turtle Freestyle

var strOpt = 1; 
var turtle1;
var turtle2;

function setup() {
  createCanvas(480, 400);
}
 
function draw() {
  background(175);
  if (strOpt === 1) {
    orangeLines();
  }
  if (strOpt === 2) {
    redLines();
  }
  if (strOpt === 3) {
    greenLines();
  }
  if (strOpt === 4) {
    purpleLines(); 
  }
}

//function for line 1 - longest line  
function line1(x, y, z){
  turtle1 = makeTurtle(x, y); 
  turtle1.setWeight(10); 
  turtle1.setColor(z);

  turtle1.right(30);
  turtle1.penDown();
  for (i = 0; i < 6; i++) {
    turtle1.forward(15);
    turtle1.right(50);
    turtle1.forward(15);
    turtle1.left(50);
  }
  turtle1.penUp();
}

//function for line 2 
function line2(a, b, n) {
  turtle2 = makeTurtle(a, b); 
  turtle2.setWeight(10); 
  turtle2.setColor(n);

  turtle2.left(30);
  turtle2.penDown();
  for (i = 0; i < 3; i++) {
    turtle2.forward(15);
    turtle2.left(50);
    turtle2.forward(15);
    turtle2.right(50);
  }
  turtle2.penUp();
}

//function for line 3 
function line3(j, k, f) {
  turtle3 = makeTurtle(j, k); 
  turtle3.setWeight(10); 
  turtle3.setColor(f);

  turtle3.right(50);
  turtle3.penDown();
  for (i = 0; i < 4; i++) {
    turtle3.forward(15);
    turtle3.right(50);
    turtle3.forward(15);
    turtle3.left(50);
  }
  turtle3.penUp();
}

//function for line 4 
function line4(l, m, p) {
  turtle4 = makeTurtle(l, m); 
  turtle4.setWeight(10); 
  turtle4.setColor(p);

  turtle4.right(-50);
  turtle4.penDown();
  for (i = 0; i < 4; i++) {
    turtle4.forward(15);
    turtle4.right(50);
    turtle4.forward(15);
    turtle4.left(50);
  }
  turtle4.penUp();
}

//function for line 5 
function line5(o, h, q) {
  turtle5 = makeTurtle(o, h); 
  turtle5.setWeight(10); 
  turtle5.setColor(q);

  turtle5.right(-80);
  turtle5.penDown();
  for (i = 0; i < 5; i++) {
    turtle5.forward(15);
    turtle5.right(50);
    turtle5.forward(15);
    turtle5.left(50);
  }
  turtle5.penUp();
}
//draws white lines, pink shapes, and green block in background
function orangeLines() {
  //makes the green block of color in background
  fill("GREEN");
  noStroke();
  beginShape();
  vertex(0, 150);
  vertex(480,75);
  vertex(480, 400);
  vertex(0, 400); 
  endShape(CLOSE);
  //line color orange
  line1(350, 30, "ORANGE"); 
  line2(50, 330, "ORANGE");
  line3(370, 270, "ORANGE");
  line4(50, 100, "ORANGE");
  line5(190, 190, "ORANGE");

}

//draws pink lines, white shapes, and blue block in background
function redLines() {
  //makes the blue block in background
  fill("BLUE");
  noStroke();
  beginShape();
  vertex(0, 140);
  vertex(480, 200);
  vertex(480, 400);
  vertex(0, 400); 
  endShape(CLOSE);

  //line color red 
  line1(20, 240, "RED");
  line2(250, 90, "RED");
  line3(100, 90, "RED");
  line4(340, 360, "RED");
  line5(300, 270, "RED");
}

//draws green lines, yellow shapes, and pink block in background 
function greenLines() {
  //makes pink block in background
  fill(255, 125, 125);
  noStroke();
  beginShape();
  vertex(0, 150);
  vertex(420, 0);
  vertex(480, 0);
  vertex(480, 400);
  vertex(0, 400); 
  endShape(CLOSE);

  //draw green line 
  line1(60, 250, "GREEN");
  line2(370, 350, "GREEN");
  line3(390, 50, "GREEN");
  line4(50, 90, "GREEN");
  line5(220, 250, "GREEN");
}

//draws orange lines, blue shapes, and yellow block in background
function purpleLines() {
  //makes orange block in background
  fill("GOLDENROD");
  noStroke();
  beginShape();
  vertex(0, 0);
  vertex(100, 0);
  vertex(480, 300);
  vertex(480, 480); 
  vertex(0, 480);
  endShape(CLOSE);

  //draws purple line
  line1(350, 50, "PURPLE");
  line2(120, 90, "PURPLE");
  line3(90, 190, "PURPLE");
  line4(350, 380, "PURPLE");
  line5(220, 200, "PURPLE");
}

function mousePressed() {
  strOpt ++; // mouse is pressed every time changes the lines & line colors
  if (strOpt > 4) {
    strOpt = 1; 
  }
}


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

Starting this project, I really wanted crinkle-cut fries. Also, in one of the studio classes I am taking for design, we talked about color theory, so I decided to combine both the “crinkle-cut fries” idea and color theory into this project. It was definitely really fun to experiment with turtles.

Press any key to restart!

/*
Alexandra Kaplan
aekaplan@andrew.cmu.edu
Section C
Project - 11
*/

function setup() {
    createCanvas(480, 480);
    background(250, 90, 15);
    
}

function draw() {

    var ttl1 = makeTurtle(240,240);
    var ttl2 = makeTurtle(240,240);
    var ttl3 = makeTurtle(width + width / 2, 240);
    var ttl4 = makeTurtle(width, 245);
    var ttl5 = makeTurtle(width * 2, 240);
    var tt2ColR = map(mouseY, 0, height / 2, 200, 50);
    

    // sand 1
    ttl1.penDown();
    ttl1.setWeight(10)
    col1 = color(250, 220, 200);
    ttl1.setColor(col1);
    for(var i = 0; i < 10; i++){
        ttl1.forward(-mouseY / 4);
        ttl1.right(-mouseX /50); 
        ttl1.left(mouseX/100)  
    }
    
    //sky
    ttl2.penDown();
    ttl2.setWeight(20);
    col2 = color(tt2ColR, 150, 225);
    ttl2.setColor(col2);
    for(var j = 0; j < 200; j++){
        ttl2.forward(mouseY / 4);
        ttl2.right(-mouseX / 50);
    }

     //sand 3
    ttl3.penDown();
    ttl3.setWeight(10);
    col3 = color(250, 230, 190);
    ttl3.setColor(col3);
    for(var i = 0; i < 10; i++){
        ttl3.forward(-mouseY / 4);
        ttl3.right(-mouseX / 50); 
        ttl3.left(mouseX / 100)  
    }
    //sand 2
    ttl4.penDown();
    ttl4.setWeight(10);
    col4 = color(250, 230, 200);
    ttl4.setColor(col4);
    for(var i = 0; i < 10; i++){
        ttl4.forward(-mouseY / 5);
        ttl4.right(-mouseX / 50); 
        ttl4.left(mouseX / 100);  
    }

    ttl5.penDown();
    ttl5.setWeight(10);
    col5 = color(250, 220, 200);
    ttl5.setColor(col5);
    for(var i = 0; i < 10; i++){
        ttl5.forward(-mouseY / 4);
        ttl5.right(-mouseX / 50); 
        ttl5.left(mouseX / 100);
    }

}

function keyPressed(){
    background(240, 90, 15);

}

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 focus on mouse interactivity and how turtles could be used to create an overall picture. Using a few different turtles, I was able to make a desert landscape with different colors of sand and a sun that can be included depending on the person using it.

sketch

// Sophie Chen
// Section C
// sophiec@andrew.cmu.edu
// Project 11

var turtle;

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


function draw() {
    
    turtle = makeTurtle(width / 2 + 50, height + 50)
    //gradient color
    var g = map(mouseY, 0, height, 255, 0);
    var r = map(mouseY, 0, width, 10, 155);
    var col = color(r, g, 200);

    turtle.setColor(col);
    turtle.setWeight(2);
    var navY = map(mouseY, 0, 480, 480, 0); // navigation Y to scale of canvas
    var navX = map(mouseX, 0, 480, 480, 0); // navigation X to scale of canvas

    // not visible, sets distance between blobs
    for (var i = 0; i < 100; i++) {
        turtle.penUp();
        turtle.forward(navY / 2);
        turtle.left(90.4);
        turtle.forward(navX); 
        turtle.penDown(); 

    // blobs along path of previous for loop
        for (var j = 0; j < 100; j++){
        	turtle.setWeight(0.3);
        	turtle.right(200.5);
        	turtle.forward(100);
        	turtle.right(19.1);
        }

    }
 
}

/////////////////////////////////////////////

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 turtle graphics to create something that allows the user to draw something that looks 3d, made up of the 2d patterns. I tested out a lot of different variations and ended up liking this one the most (the slower you move the mouse, the smoother the gradient). Overall I had a lot of fun with this, I’m definitely a lot more comfortable with turtle graphics now.

use arrow keys to generate spirals

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project 11 - Composition

//var numFlowers = Number(prompt('how many flowers?'));
var numFlowers = 1;
var pastNumFlow = 1;
var firstFlower;
var flowers = [];


function setup() {
  // put setup code here
  createCanvas(480,480);
  //print(numFlowers);
  firstFlower = makeFlower();
  flowers.push(firstFlower);
}

function draw() {
	background(177, 237, 196);
	for(var i = 0; i < numFlowers; i++) {
		flowers[i].draw();
	}
	fill(56, 112, 90);
	textSize(20);
	text('# of Flowers:', width / 2 - 50, height - 50);
	noStroke();
	fill(32, 76, 72);
	textSize(25);
	text('←  ' + numFlowers + '  →', width / 2 - 40, height - 10);
}

function keyPressed() {
	if (keyCode == RIGHT_ARROW) {
		pastNumFlow = numFlowers;
		numFlowers++;
		newFlower = makeFlower();
		flowers.push(newFlower);
	}
	if ((keyCode == LEFT_ARROW) & (numFlowers > 1)) {
		pastNumFlow = numFlowers;
		numFlowers -= 1;
	}
}

function makeFlower() {
	var f = {
		x: random(width),
		y: random(height),
		c: color(random(255), random(255), random(255)),
		petals: random(30, 200),
		r: random(5, 50),
		ang: random(100, 360),
		draw: drawFlower,
	}
	return f;
}

function drawFlower() {
	currFlow = makeTurtle(this.x, this.y);
	currFlow.setColor(this.c);
	for(var i = 0; i < this.petals; i++) {
		currFlow.forward(this.r);
		currFlow.right(this.ang);
	}
}



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 kind of had an idea for an abstract garden for this project. You use the arrow keys to control the amount of ‘flowers’ (randomized spirals) on the screen. I made an object to store the properties of all the spirals and then drew them with turtles. It’s really cool and interesting to see what kinds of patterns the program can come up with!

Here’s one example

Firefly Jar

// Kevin Thies
// Section C
// kthies@andrew.cmu.edu
// Project-11- Turtle Freestyle

var ttl; // turtle


function setup() {
    // style
    createCanvas(480, 480);
    background(4, 20, 45);

    // make the turtle with starting values
    ttl = makeTurtle(width/2, height/2);
    ttl.penDown();
    ttl.setWeight(6);
    ttl.setColor("yellow");
    ttl.face(0);
}

function draw() {
    background(4, 20, 45, 20);

// firefly
    // move
    ttl.forward(5);

    // rotate
        // random, flying-insect-like movement
    ttl.right(map(noise(ttl.x, ttl.y), 0, 1, -180, 180));

        // if mouse over jar, make it move towards mouse
    if(mouseX < 360 & mouseX > 120 && mouseY > 90 && mouseY < 390) {
        ttl.turnToward(mouseX, mouseY, 40);
    }

    // if near jar wall,
    if (ttl.x > 350 || ttl.x < 130 || ttl.y > 380 || ttl.y < 100) {
        // turn towards center
        ttl.turnToward(width/2, height/2, 180);
        ttl.forward(10);

        // teleport back into jar
        if (ttl.x > 350) {
            ttl.goto(350, ttl.y);
            print("turtle too far right");
        } else if (ttl.x < 130) {
            ttl.goto(130, ttl.y);
            print("turtle too far left");
        } else if (ttl.y > 380) {
            ttl.goto(ttl.x, 380);
            print("turtle too far down");
        } else if (ttl.y < 85) {
            ttl.goto(ttl.x, 100);
            print("turtle too far up");
        }
    }
    // firefly light
    strokeWeight(0);
    fill(255, 255, 0, 40);
    ellipse(ttl.x, ttl.y, 40, 40);


    // jar (dimensions are x 120 to 360 y 90 to 390)
        fill(0, 0, 0, 0);
        rectMode(CENTER);
        stroke(255);
        strokeWeight(2);
        rect(width/2, height/2, 240, 300, 20);
        fill(173, 151,64);
        strokeWeight(0);
        rect(width/2, 73, 240, 30, 20);
}

//////////////////////////////////////////////////////////////////////////
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’ve done projects making “flying bugs in a jar” before, and I decided it would be a good time to try and make one with turtles. Getting the turtle to stay inside the jar was more challenging that I expected, mostly because of the way I made the turtle move. However, it responds to the cursor while it’s inside the jar. I suppose the way to expand on this project would to have multiple fireflies in the jar that have some level of collision so that they could act like a swarm.
I would add screenshots but they’d look just like the program above.

freestyleturtle

var star;
var x;

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

function draw() {
    background(0);

    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    star = makeTurtle(mouseX, mouseY);
    star.setColor("yellow");
    star.setWeight(1);

    x = map(mouseX, 0, width, 0, 10000);

	for (var i = 0; i < 300; i++) { // draw multiple
		for (var j = 0; j < 5; j ++) { // draw star
			star.penDown();
			star.forward(20);
			star.right(144);
		}
		star.penUp();
		star.face(x * i / 300); // draw in a line
		star.forward(i); // create spaces between stars
	}
}

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 create a composition surrounding the movement of my mouse. I wanted to create a shooting star that moves towards your mouse, which is similar to what you see in the first picture below. From there, I wanted to make it seem like the shooting star was falling into a hole once it arrives to the mouse’s location, which is what you see in the second picture. Lastly, I wanted to create multiple shooting stars falling into a hole.

In order to create this illusion, I had to focus on creating spirals using turtle graphics. When you move the mouse across the width of the canvas, you see that the stars form a spiral around the mouse’s location. Although you don’t see the first star move towards the mouse’s location like a shooting star, when you take screenshots like the ones below, it creates the illusion of the concept/idea that I wanted to create.

kzr turtle project

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_11*/
//details 1 changes how detailed it is horizontally, width gives pixel perfect color
//details 2 changes how detailed it is vertically, 1 gives pixel perect change
var details1 = 65;
var details2 = 5;
function preload() {//i have 2 background images, farnham jahanian or subra suresh
    var myImageLink = "https://i.imgur.com/PhOrH0d.jpg";
    //var myImageLink = "https://i.imgur.com/WNxbkQj.jpg";
    myImage = loadImage(myImageLink);
}

function setup() {
    createCanvas(480,480);
    background(0);
    myImage.loadPixels();//loading pixels in to use get later
}

function draw() {
    var t = makeTurtle(0,0);//make my turtle 🙂
    t.doTheStuff(width / details1,details2);//watch it do the stuff 🙂
}
//colorChangeDist is how often it changes color, is equal to details1
function doTheStuff(colorChangeDist,rowSize){
    var pixelColor;
    this.setWeight(details2);
    var increment = colorChangeDist;
    var numRows = height / rowSize;
    for(var k = 0; k < numRows; k++){//for loop to iterate vertically
        for(var i = 0; i < width; i += increment){//for loop for the odd rows
            pixelColor = myImage.get(this.x,this.y);
            this.setColor(color(pixelColor));
            this.forward(increment);
        }
        this.right(90);
        this.forward(rowSize);
        this.right(90);//turns it back after moving it to the next row position
        for(var j = width; j > 0; j -= increment){//for loop for the even rows
            pixelColor = myImage.get(this.x,this.y);
            this.setColor(color(pixelColor));
            this.forward(increment);
        }
        this.left(90);
        this.forward(rowSize);
        this.left(90);//turns it back after moving it to the next row position
    }
}
//turtle stuff
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, doTheStuff: doTheStuff};//added a function about doing stuff
    return turtle;
}

I wanted to make the turtle draw out an underlying image for my project. By making two variables for how detailed I wanted the drawing to be, detail1 and detail2, I can control how clear or blurry the picture is. The images look really cool at a medium amount of detail level, and I like the way farnham and subra look when drawn by turtles. Overall, this project helped me better understand how functions work together and I had alot of fun with it.