Category: Project-11-Composition

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.