Category: Project-11-Composition

Connor McGaffin – Project 11

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-11
*/

var option = 1;
var b = 2;
var gold = 137.507764;

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

function draw() {
    background(0); 

    //each option provides diff colors and 
    if(option == 1){
        greenHex();
    }
    if(option == 2){
        yellowTri();
    }
    if(option == 3){
        orangSq
    ();
    }
}

function greenHex () {
    var swim = mouseX / 10;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 300; i++){
        if( i % 3 == 1){
            turtle.setColor("darkgreen");
        } else {
            turtle.setColor("pink");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function yellowTri () {
    var swim = mouseX * 3;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 500; i++){
        if( i % 3 == 1){
            turtle.setColor("gold");
        } else {
            turtle.setColor("indigo");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(120);
            turtle.forward(swim);
            turtle.right(120);
            turtle.forward(swim);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function orangSq () {
    var swim = mouseX * 3;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 500; i++){
        if( i % 3 == 1){
            turtle.setColor("navy");
        } else {
            turtle.setColor("chocolate");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function mousePressed() {
    option++;
    if(option > 3) option = 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;}

 

I approached this project as an exploration in color, shape, and the golden ratio. I created three separate interactions, which can be shuffled through via clicking on the canvas. Each of these options is an exploration in a different color palette and use of shape, each with a similar underlying turtle for loop.

In my explorations, I found a few structures that resemble organic shapes of nature. In the first interaction, Ive found a faint outline of a succulent like growth present in the green strokes when the cursor is all the way to the right. The second interaction generates a negative space at its center which resembles a seashell. Finally, the third interaction yielded a similar succulent-like growth to the first, except it is constrained by right angles on the leftmost sides, dictated so by the 90 degree angles of the squares which make up the structure.

All screenshots below were taken when the cursor was on the far right of the canvas, generating the shapes with line segments at its upper bound.

Jamie Dorst Project 11

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-11
*/

var turtlesArray = [];
var mouseClicks = [];

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

function draw() {
    // change frame rate slower
    frameRate(5);
    // make turtle in center of screen
    var turtle1 = makeTurtle(width / 2, height / 2);
    turtle1.setColor(255);
    turtle1.goto(random(0, 460), random(0, 460));
    // make another same turtle in center of screen
    var turtle2 = makeTurtle(width / 2, height / 2);
    turtle2.setColor(255);
    turtle2.goto(random(0, 460), random(0, 460));
    // make another same turtle in center of screen
    var turtle3 = makeTurtle(width / 2, height / 2);
    turtle3.setColor(255);
    turtle3.goto(random(0, 460), random(0, 460));
    // draw new turtles on a loop too
    for (var i = 0; i < turtlesArray.length; i++) {
        turtlesArray[i].goto(random(0, 460), random(0, 460));
    }
    // stop updating turtles past 10 clicks by removing them from the array
    if (turtlesArray.length > 10) {
        turtlesArray.shift();
    }
    // put translucent black screen over canvas every 10 clicks
    // not when there have been 0 clicks
    if (mouseClicks.length === 0 & mouseClicks.length < 10) {
        textAlign(CENTER);
        noStroke();
        fill(0);
        rect(0, 460, 460, 480);
        fill(255);
        text("keep clicking to start fading", width / 2, 470);
    } else if (mouseClicks.length % 10 === 0) {
        // translucent box over canvas
        fill(0, 0, 0, 30);
        noStroke();
        rect(0, 0, 460, 460);
        // instructions text
        noStroke();
        fill(0);
        rect(0, 460, 460, 480);
        fill(255);
        text("click to stop fading", width / 2, 470);
    } else if (mouseClicks.length === 11) {
        // clear array so it never exceeds 10 items
        for (var j = 0; j < 11; j++) {
            mouseClicks.shift();
        }
    }
    print(mouseClicks.length)
}

function mousePressed() {
    // new turtle when mouse is pressed at location mouse was pressed
    var newTurtle = makeTurtle(mouseX, mouseY);
    // color and weight are random
    newTurtle.setColor(color(random(255), random(255), random(255)));
    newTurtle.setWeight(random(1, 5));
    // push the new turtle onto the turtles array
    turtlesArray.push(newTurtle);
    // count how many clicks there have been total
    mouseClicks.push("click")
}


//-----------TURTLE-----------//
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 started with the base white star type thing, where the turtle starts at the center of the canvas but then always spreads out a random amount.  I then wanted to let the user click to add more turtles, where they would have a new random stroke and color, and they would move around randomly within the canvas. Every 10 clicks, a faded black screen is added over the canvas. I implemented this because I felt that the lines became overwhelming at a certain point, and this would help tame them.

A screenshot of my project while the fading is going on
A screenshot of my project when the fading is not going on, and it has run for a while
A screenshot of my project when you’ve only clicked once, and it hasn’t run for too long

Dani Delgado – Project 11

Click to see more!

sketch

/*
Dani Delgado 
Section E
ddelgad1@adnrew.cmu.edu
Project 11
*/

//set global variables 
var trl;
var trlSet = 1;

function poly(){
	//create the first polygon to iterate 
	for (var i = 0; i < 6; i ++) {
		trl.penDown();
		trl.forward(4.5);
		trl.left(60);
		trl.penUp();
	}
}

function poly2() {
	//create the second polygon to iterate
	for (var j = 0; j < 5; j++) {
		trl.penDown();
		trl.forward(5);
		trl.left(70);
		trl.penUp();
	}
}

function poly3() {
	//create the third polygon to iterate
    for (var j = 0; j < 1; j++) {
		trl.penDown();
		trl.forward(6);
		trl.left(180);
		trl.penUp();
	}
}

function poly4() {
	//create the fourth polygon to iterate
	for (var p = 0; p < 50; p++){
		trl.penDown();
		trl.forward(0.1);
		trl.left(360/50);
		trl.penUp();
	}
}

function setup() {
	//setup canvas dimensions 
    createCanvas(480, 400); 
    frameRate(20);
}

function draw() {

    var set = int(trlSet);
    //the following if statements creates a list of possible turtle screens
    //draw the first turtle screen 
    //this turtle is basic, cream background and gray spiral
    if (set === 1) {

    	background(255, 240, 230);
	    //create the turtle 
        trl = makeTurtle(width / 2, height / 2);
        trl.setColor(60);
        trl.setWeight(1.25);
        trl.penUp();
        //draw the spiral 
    	for (var j = 0; j < mouseY / 1.25; j ++){
      	    trl.penUp();
    	    var dist = 1  + j  * 0.7;
    	    trl.forward(dist)
    	  	poly();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate
    	    trl.left(mouseX / 25);
    	    constrain(mouseX, 0, 480);
    	    //change the widths as the turtle increases
    	    if (j > 100) {
    		    trl.setWeight(1.75);
    	    }
    	    if (j > 125) {
    		    trl.setWeight(2.25);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(2.75);
    	    }
        }

    }
    //draw the second turtle screen 
    //this turtle is slightly modified from the first
    //the colors are inverted and the spacing has changed
    if (set === 2) {
    	background(60);
	    //create the turtle 
        trl = makeTurtle(width / 2, height / 2);
        trl.setColor(255, 190, 180);
        trl.setWeight(1.25);
        trl.penUp();

        for (var j = 0; j < mouseY * 1.1; j ++){
        	//draw a turtle spiral
        	var dist = 1  + j  * 0.25;
    	    trl.forward(dist)
    	 	poly();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);

            //rotate 
    	    trl.left(mouseX / 25);
    	    constrain(mouseX, 0, 480);
    	    //change the widths as turtle increases 
    	    if (j > 100) {
    	        trl.setWeight(1.75);
    	    }
    	    if (j > 125) {
    		    trl.setWeight(2.25);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(2.75);
    	    }
        }
    }  
    //create the third turtle screen 
    //for this one, I changed the color mode to HSB to get a rainbow 
    if (set === 3) {
    	background(240);
	    //create the turtle 
	    trl = makeTurtle(width / 2, height / 2);
	    //set colors
	    push();
	    colorMode(HSB, 255);
        var col = 0; 
        trl.setWeight(1.5);
        trl.penUp();
        //create spiral
        for (var j = 0; j < mouseY / 1.5; j ++){
       	    trl.penUp();
    	    var dist = 1  + j  * 2;
    	    trl.forward(dist)
    	    col = col + 255 / (mouseY / 1.25);
            trl.setColor(color(col, 255, 255));
    	    poly();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate 
    	    trl.left(mouseX / 20);
    	    constrain(mouseX, 0, 480);
    	    //make the variable weights
    	    if (j > 100) {
    		    trl.setWeight(2);
    	    }
    	    if (j > 125) {
    	    	trl.setWeight(2.5);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(3);
    	    }
        }
        pop();
    }
    //create the fourth trutle screen 
    //this screen has multiple turtle spirals
    if (set === 4) {
    	push();
        background(60);
	    //create the turtle 
	    trl = makeTurtle(width / 2, height / 2);
	    //set colors
	    colorMode(HSB, 255);
        var col = 0; 
        trl.setWeight(1.5);
        trl.penUp();
        //create the first spiral
        for (var j = 0; j < mouseY / 1.10; j ++){
       	    trl.penUp();
          	var dist = 1  + j  * 0.25;
    	    trl.forward(dist);
    	    col = col + 255 / (mouseY / 1.25);
            trl.setColor(color(col, col, col));
    	    poly2();
        	trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate
    	    trl.left(mouseX / 15);
    	    constrain(mouseX, 0, 480);
    	    //variable wieghts 
    	    if (j > 100) {
    		    trl.setWeight(2);
    	    }
    	    if (j > 125) {
    	    	trl.setWeight(2.5);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(3);
    	    }
        }
        pop();
        //create the second turtle spiral
        //this one is dashed lines and on the top left
        trl = makeTurtle(0, 0);
	    //set colors
	    push();
	    translate(100, 100)
	    colorMode(HSB, 255);
        var col = 0; 
        trl.setWeight(1.5);
        trl.penUp();
        //make the spiral
        for (var j = 0; j < mouseY; j ++){
       	    trl.penUp();
    	    var dist = 1  + j  * 0.5;
    	    trl.forward(dist)
        	col = col + 255 / (mouseY / 1.25);
            trl.setColor(color(col, col, 255));
    	    poly3();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate 
    	    trl.left(mouseX);
    	    constrain(mouseX, 0, 480);
    	    //variable widths
    	    if (j > 100) {
    		    trl.setWeight(2);
    	    }
    	    if (j > 125) {
    	    	trl.setWeight(2.5);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(3);
    	    }
        }
        pop();
        //create the third spiral
        //this one is dashed lines and on the bottom right 
        trl = makeTurtle(0, 0);
	    //set colors
	    push();
	    translate(350, 300)
	    colorMode(HSB, 255);
        var col = 0; 
        trl.setWeight(1.5);
        trl.penUp();
        //spiral draw
        for (var j = 0; j < mouseY; j ++){
       	    trl.penUp();
        	var dist = 1  + j  * 0.5;
    	    trl.forward(dist)
    	    col = col + 255 / (mouseY / 1.25);
            trl.setColor(color(col, col, 255));
    	    poly3();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate
    	    trl.left(mouseX);
    	    //varaible widths
    	    if (j > 100) {
    		    trl.setWeight(2);
    	    }
    	    if (j > 125) {
    	    	trl.setWeight(2.5);
    	    }
    	    if (j > 150) {
    		    trl.setWeight(3);
    	    }
        }
        pop();
    }   
    //create the fifth turtle screen
    //this one is a thick spiral that gets darker in the center
    if (set === 5) {
    	push();
        background(255);
	    //create the turtle 
	    trl = makeTurtle(width / 2, height / 2);
	    //set colors
	    colorMode(HSB, 255);
        var col = 0; 
        trl.setWeight(30);
        trl.penUp();
        //draw the spiral
        for (var j = 0; j < mouseY; j ++){
       	    trl.penUp();
            var dist = 1  + j  * 0.2;
    	    trl.forward(dist)
        	col = col + 255 / (mouseY / 1.25);
            trl.setColor(color(255, col, col));
    	    poly4();
    	    trl.left(180);
    	    trl.forward(dist);
    	    trl.left(180);
            //rotate 
    	    trl.left(mouseX / 25);
    	    constrain(mouseX, 0, 480);
    	}
        pop();
    }
}

function mousePressed() {
	//this function runs trhough all of the screens
	trlSet += 1;
	//if you reach the last screen, it reseats to the first
	if (trlSet > 5) {
		trlSet = 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;}

Spirals have always given me a great deal of difficulty to figure out, so I wanted to take advantage of this project to get some practice in playing around with some turtle spirals.

There were a lot of different variations I went through, so I decided that instead of choosing and over-complicating one, I should just put them all into one program which can flip through the different iterations to explore the process and play around with each one (as I find it kinda mesmerizing to see what placing your mouse on different parts of the page will do).

first turtle screen
second turtle screen (mouse X to the left)
second turtle screen (mouseX to the right)
third turtle screen
fourth turtle screen (mouseX to the right)
fourth turtle screen (mouseX in the middle)
fifth and final turtle screen

 

Julie Choi – Project 11 – Composition

Julie Choi Composition

/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-11
*/

var shapeSize = 50;

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

}

function mousePressed(){

    //randomize angle to create different compositions
    var angle = random(30, 90);
    //create turtle variable
    var turtle = makeTurtle(mouseX, mouseY);
    // set like color to light turquoise
    turtle.setColor(color(162, 215, 207));

    //draw geometric composition
    for(var x = 0; x < 20; x++){
        turtle.penDown();
        turtle.forward(shapeSize);
        turtle.right(angle);
        turtle.forward(shapeSize);
        turtle.right(angle);
        turtle.forward(shapeSize);
        turtle.right(angle);
        turtle.forward(shapeSize);
        turtle.right(angle);
        //alter angle when ever new shape is drawn
        shapeSize -= 1;
        turtle.right(25);
    }
}




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 week’s composition project, I enjoyed the freedom that we had with the turtle graphics. My project was created after I had fun creating randomized circular geometric shapes. I used some techniques that I learned from the video lectures and the recitation.

 

After many clicks, my composition creates an abstract spider web.

Justin Yook – Project 11

freeTurtle

// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Project 11

var blueTurtle;
var rCol = [];
var rFor;

function setup() {
    createCanvas(360, 240);
    background(0);

    for (var i = 0; i < 50; i++) {
    	rCol[i] = color(random(0, 255), random(0, 255), random(0, 255));
    }

   	blueTurtle = makeTurtle(0, height / 2);
    blueTurtle.setWeight(3);
    blueTurtle.setColor(color(255, 255, 255));

	frameRate(60);
}

function draw() {
	// CREATE THE ZIG ZAG PATTERN
	blueTurtle.forward(1);

	if (blueTurtle.x >= 45 & blueTurtle.x < 90) {
		blueTurtle.face(300);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 90 & blueTurtle.x < 135) {
		blueTurtle.face(70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 135 & blueTurtle.x < 180) {
		blueTurtle.face(-70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 180 & blueTurtle.x < 225) {
		blueTurtle.face(70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 225 & blueTurtle.x < 270) {
		blueTurtle.face(-70);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 270 & blueTurtle.x < 315) {
		blueTurtle.face(-300);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= 315 & blueTurtle.x < width) {
		blueTurtle.face(0);
		blueTurtle.forward(1);
	}

	if (blueTurtle.x >= width) {
		blueTurtle.x = 0;
		blueTurtle.y = random(0, 240);
		blueTurtle.setColor(random(rCol));
	}
}

// Implement Turtle 
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 was inspired by how heartbeats and sound were represented on monitors, and created a zig-zag pattern similar to them. To add something interesting, I made an array with length 50, where each element is a random color. In addition, the y-coordinate of each pattern drawn after the first is random.

One variation of random colors and y-coordinates

Mimi Jiao – Project 11 – Section E

click to toggle between drawings

/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E 
Project 11
*/

var toggle = 0; //toggle between images drawn
var increment = 0; //increment for moving turtle and drawing turtle

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

function draw() {

    //first drawing image
    if (toggle === 0) {
        for (var i = 0; i < 260; i ++) {
            var play = makeTurtle(cos(i) * 100 + 200, 200 + sin(i) * 100);
            play.penDown();
            play.setColor(color(0, 255, 0));
            play.right(increment);
            play.forward(increment);
        }
    increment += 1;
    if (increment > 850) {
        fill(0)
        rect(0, 0, width, height);
        increment = 0;
    }
    }

    //second drawing image
    if (toggle === 1) {
        for (var i = 0; i < 360; i ++) {
            var play = makeTurtle(width / 2, 200 + sin(i));
            play.penDown();
            play.setColor(color(255, 0, 0)); 
            play.left(increment);
            play.forward(increment);

        }
    increment ++;
    }

    //third drawing image
    if (toggle === 2) {
        for (var i = 1; i <= 800; i ++) {
            var play = makeTurtle(random(.1,.65) * 2**2 * cos(PI/i)/sin(PI/i),
                                    2**cos(PI/i)/sin(PI/i)
                );
            play.penDown();
            play.setColor(color(0, 0, 255));
            play.right(i);
            play.forward(i);
        }
    }

    //fourth drawing image
    if (toggle === 3) {
        for (var i = 0; i < 360; i ++) {
            //increment = map(mouseX, 0, windowWidth, 0, width);
            var play = makeTurtle(random(400), random(400) + sin(i));
            play.penDown();
            play.setColor(color(255, 0, 255)); 
            play.left(increment);
            play.forward(increment);
        }
    increment += 1;
    }

    //fifth drawing image
    if (toggle === 4) {
        for (var i = 1; i <= 800; i ++) {
            var play = makeTurtle(.45 * 2**2 * cos(PI/i)/sin(PI/i),
                                    2**cos(PI/i)/sin(PI/i)
                );
            play.penDown();
            play.setColor(color(0, 255, 255));
            play.right(increment);
            play.forward(increment);
        }
    increment += 1;
    if (increment > 950) {
        fill(0)
        rect(0, 0, width, height);
        increment = 0;
    }
    }

    //image reset back to black
    if (toggle === 5) {
        fill(0);
        rect(0, 0, width, height);
    }

}

//if mouse is pressed, toggle between the drawn images
function mousePressed() {
    toggle ++;
    if (toggle > 5) {
        toggle = 0;
    }

}

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: .005,
                  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 create something where you could toggle between states to see different drawings. I wanted to play with curves and spirals so I went back to mathworld.com to find some math equations.
Some process shots:

Rachel Lee Project 11 Section E

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 11: Freestyle Turtles
*/

function setup() {
    createCanvas(480, 480);
    background(10, 50, 100);
}

function draw() {
    var m = 300; // variable to be mapped
	// maps mouseX position and controls scale/ how far turtle turns right
	var scale = map(m, 0, mouseX, 100, 300);

	// drawing first turtle (violet)
    var turtle1 = makeTurtle(mouseX, mouseY);
    turtle1.setColor(color(240, 185, 240, 60));
    turtle1.setWeight(0.25);

    for (i = 0; i < 360; i++) {
    	turtle1.penDown();
    	turtle1.right(60);
    	turtle1.forward(30);
    	turtle1.right(scale); 
    	turtle1.forward(15);
    }
    
    // drawing second turtle (orange)
    var turtle2 = makeTurtle(mouseX, mouseX);
    scale = map(m, 0, mouseX, 20, 250); 
    turtle2.setColor(color(240, 165, 140, 150));
    turtle2.setWeight(0.1);

    for (i = 0; i < 100; i++) {
    	turtle2.penDown();
    	turtle2.right(60);
    	turtle2.forward(40);
    	turtle2.right(scale);
    	turtle2.forward(5);
    }

    frameRate(5); // slows down frame rate
}

// turtle graphics implementation for p5.js
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 week’s assignment, I wanted to create a turtle graphics composition that was reminiscent of a spirograph. I really enjoyed playing with these when I was younger, and was constantly excited by what kinds of mandalas would yield from the different tracing tools. This assignment was really fun, especially experimenting with the intricacies of each mark made, playing with transparencies and investigating scale.

Example composition created via changing mouseX positions

Kai Zhang-Project-11-Composition

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-11


var ttl = []; //turtle array
var strW = 3; //stroke weight of turtles
var num = 20;
var col = 0;



function setup() {
    createCanvas(400, 400);
    background(0);
    strokeJoin(MITER);
    strokeCap(PROJECT);


    for (var i = 0; i < num; i++) {
        ttl.push(makeTurtle(200, 200));
        ttl[i].penDown();
        ttl[i].right(360 / num * i);
    }   
}

function draw() {
        var dire = random(-45, 45);
        var dist = random(0, 2.5);
        if (col < 200) {
            col += random(0, 0.5);
        }
        var rest = random(0, 5);

    for (var i = 0; i < num; i++) {
        ttl[i].setColor(col);
        ttl[i].setWeight(strW);
        ttl[i].forward(dist);
        ttl[i].right(dire);

    }

}


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’ve got inspiration from the Kaleidoscopes feature of the game Monument Valley 2 when you customize all your path and it shows up in a rotational symmetry manner. So in my code, I set the turtle to go from the center of the canvas and to several different directions. All the initial directions are evenly distributed along the 360 degrees. Also, the paths of all turtles are completely identical. As they start walking, I’m assigning random directions and random stepping lengths for the turtles so they’re walking in a crooked style. But because they’re all going for the same paths, the result can be really interesting. I used different numbers of turtles, and the path started off being really dark and slowly turn white, which is an aesthetic choice that adds to the “vibrance“ of the imagery.

3 turtles

4 turtles

6 turtles

8 turtles

20 turtles

Jenny Hu — Project 11: Composition

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 11

var myTurtle;
var startFrame;
var newWeight;
var newColor;
var randWeight;

function setup() {
    createCanvas(400, 400);
    background(250);
    myTurtle = makeTurtle(width / 2, height / 2);
    myTurtle.setColor(color(20));
    myTurtle.penDown();

    resetCanvas();
    frameRate(10);
}

function draw() {
    var step = (frameCount - startFrame)/30.0;
    // timePassed();
    //change the grayness of the turtle
    newColor = random(0 , 70);
    myTurtle.setColor(color(newColor));

    //change the weight of the turtle
    newWeight = random(0,1);
    ink(myTurtle);

    //move my turtle
    myTurtle.forward(step);
    myTurtle.left(16.0);
  
    //stops, so you can admire the cute fingerprint composition
    if (myTurtle.y < 100) {
      myTurtle.penUp();
  }
}

//reset the turtle when you click
function mousePressed(){
     resetCanvas();
}

//reset the turtle
function resetCanvas() {
    background(250);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width / 2, height / 2);
    myTurtle.penDown();
}

//changes the weight of the turtle to resemble ink
function ink(myTurtle){
  randWeight = random(0 , 2);
  newWeight = newWeight + randWeight;
  myTurtle.setWeight(newWeight);
}

///API Below///


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 do something akin to a ‘computer’s fingerprint’. I was interested to give it the feeling of ink, which makes each print feel unique. Unlike humans where each print is different, a computer is capable of making ‘perfect’ geometries— which makes the spiral feel fitting. Each generation of this spiral is unique though, due to the random generation of both width of each stroke and tone of gray.

Click the mouse anywhere to reset.

fingerprint image

 

 

Jenna Kim (Jeeyoon Kim) – Project 11 – Composition

jeeyoonk-11

var turtle
var a = 5;

function setup(){
    createCanvas(400,400);
    background(94,69,255);
    frameRate(10);
    turtle = makeTurtle(random(0,width), random(0,height));
    //create geometric shape
}

function draw(){
    //circular geometric shape 
    for (var i = 0; i < 50; i++){
        turtle.setColor(color(243, 231, 177));
        turtle.penDown();
        turtle.setWeight(.2);
        turtle.right(20); //turns 100 degrees every times it loops
        turtle.forward(a);

}
    turtle.left(20);
    a += 0.1; //the length increases
    turtle.penUp();

    if (mouseIsPressed){ //BIRD creating a NEST
    fill(240, 77, 37) //BODY
    ellipse(mouseX + 30, mouseY + 10, 50, 30);
    fill(254, 225, 115); //beak
    triangle(mouseX, mouseY, mouseX-5, mouseY-5, mouseX-20, mouseY+20);
    fill(240, 77, 37) //HEAD
    ellipse(mouseX, mouseY, 20, 20);
    fill(146, 211, 203) //eye
    ellipse(mouseX - 1, mouseY, 5, 5);
    }

}


function mousePressed(){
    turtle = makeTurtle(mouseX, mouseY);
}


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project, I used turtle to create a nest for each bird. Every time you click on the screen, a nest and a bird will appear. The nest’s size will eventually keep increasing to create a chaos. It was really enjoyable to experimenting with different angles and sizes.

Below are the screenshots of the results: