Category: Project-11-Composition

rgroves – Composition – Section B

sketch

var cabin;
var turtle;
var spacing = 5;

function preload() {
	cabin = loadImage("https://i.imgur.com/vd2MDbC.jpg");
}

function setup() {
    createCanvas(437, 480);
    background(140, 90, 100);
    cabin.loadPixels();
    turtle = makeTurtle(0, 0);
    turtle.setColor(255);
    for (j = 0; j <= height; j += spacing) {
		for (i = 0; i <= width; i++) {
			var b = brightness(color(cabin.get(i, j)));
			var lineweight = map(b, 0, 255, 0, 5);
			turtle.setWeight(lineweight);
			turtle.forward(1);
		}
		turtle.goto(0, j);
	}
	noLoop();
}

function draw() {

}

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 made an image filter using a turtle that goes horizontally across the screen, its width varying based on the brightness of the pixel underneath. The result is a stripy monochrome picture. It takes a really long time to load because the turtle goes forward only one pixel at a time. Here’s a screenshot of what it looks like once it’s loaded:

BrandonHyun-Project11

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    var turtle = makeTurtle(130, 80);
    turtle.penDown();
    turtle.setColor(255);
    for (var i = 0; i < 300; i++) {
        turtle.forward(150);
        turtle.right(141.5);
        turtle.forward(60);

        if (i % 20 === 0) {
            turtle.forward(70);
        }
    }
    noLoop();
}


function draw() {
}


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 wanted to create this composition because it was interesting to see how these turtles change when I repeat the number of repetition of turtle movement.

Nayeon-Project11-Composition

composition

var offset = 20;
var px;
var py;
var dy;
var bottom = 200;
var snowFlakes = [];
var started = false;

function preload() {
    img = loadImage("https://i.imgur.com/f0V63aF.jpg")
}
function setup() {
    createCanvas(480, 480);
    image(img, 0, 0, img.width / 2.5, img.height / 2.5)

    for (i = 0; i < 10; i++) {
      var flakes = makeTurtle(30 + i * offset, 0);
      flakes.penUp();
      snowFlakes.push(flakes);
    }

}

function draw() {
    var snowX = random(width);
    var snowY = random(height);
    var snowS = random(1, 5);
    for (i = 0; i < 5; i ++) {
      fill(255)
      noStroke();
      ellipse(snowX, snowY, snowS, snowS)
    }
  }

function mousePressed() {
  var px = mouseX;
  var py = mouseY;

  var flakes = makeTurtle(px, py);
  var edgeL = random(10);

  flakes.penDown();
  flakes.setColor(random(200, 255));

  for (var i = 0; i < 20; i ++) {
    for (var j = 0; j < 8; j ++) {
      flakes.forward(edgeL);
      flakes.right(45);
    }
   flakes.penUp();
   flakes.forward(2);
   flakes.right(30);
   flakes.penDown();
  }
}
//======= CONDENSED TURTLE CODE =======//
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;}

Suddenly winter has came! I was quiet shocked looking at snow because I could feel that this year also almost finished..

mmirho – Project 11 – Color Clocks

I definitely learned the usefulness of turtles when it comes to both dashes and curves.

After fiddling around with turtle movement, I accidentally created rotating clock hands and decided to base my experiment on it.

sketch

var t1;
var t2;
//Two turtles used for clock hands

var tC1;
var tC2;
var tC3;
var tC4;
//Four turtles used for the circles

var t = 6;
//Simple incremental distance for convenience

function setup() {
    createCanvas(480, 480);
    
    t1 = makeTurtle(0, 0);
    t2 = makeTurtle(0, 0);
    //initialize both clock hand turtles

    tC1 = makeTurtle(0, 0);
    tC2 = makeTurtle(0, 0);
    tC3 = makeTurtle(0, 0);
    tC4 = makeTurtle(0, 0);
    //initialize the four circle turtles
}

function draw() {

    background(255);

    strokeJoin(MITER);
    strokeCap(PROJECT);

    makeCirclesAndHands(1, 1, "red", tC1);
    makeCirclesAndHands(3, 1, "green", tC2);
    makeCirclesAndHands(1, 3, "blue", tC3);
    makeCirclesAndHands(3, 3, "yellow", tC4);
    //Makes all four circles and the conditional clock hand situations

}


function hand(turtle, length, speed, x, y, color, thick) {

    turtle.penUp();
    turtle.goto(x, y);
    turtle.penDown();
    turtle.forward(length);
    turtle.right(speed);
    turtle.setColor(color);
    turtle.setWeight(thick);

    //Makes a clock hand that rotates around x,y and has 
    //a bunch of other variables tha control the appearance and movement

}

function circley(turtle, x, y, color) {

    //Makes a dashed circle at x,y with a 
    // color, using a specific turtle by
    // moving a given distance on the curve with
    // the pen down, then again with the pen up
    // then repeating that penUp penDown process
    // until the full circle is completed

    turtle.setColor(color);
    turtle.face(0);
    turtle.setWeight(6);
    turtle.goto(x,y);
    for (var p = 0; p < 18; p++) {
        for (var l = 0; l < 10; l++) {
            turtle.penDown();
            turtle.forward(1);
            turtle.right(1);
        }
        for (var i = 0; i < 10; i++) {
            turtle.penUp();
            turtle.forward(1);
            turtle.right(1);
        }
    }

}

function distance(x1,y1,x2,y2) {
    return sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}
//Simple distance formula for use in calculation


function makeCirclesAndHands(widthMultiplier, heightMultiplier, colorChange, circleTurtle) {

    //Creates four dashed line circles that, if you put the mouse 
    //inside them, change color depending on the circle and place 
    //spinning clock hands within the circle

    if (distance(mouseX, mouseY, widthMultiplier*width/4+7, heightMultiplier*height/4+7) < 50) {
        circley(circleTurtle, widthMultiplier*width/4, heightMultiplier*height/4 - 50, colorChange);
        hand(t1, 50, 1, widthMultiplier*width/4,heightMultiplier*height/4+7, 0, t);
        hand(t2, 30, 0.5, widthMultiplier*width/4,heightMultiplier*height/4+7, 100, t-1);
    } else {
        circley(circleTurtle, widthMultiplier*width/4, heightMultiplier*height/4 - 50, 0);
    }
}



//Compressed 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};
return turtle;}

adev_Project_11_Composition

adev_project_11

// Aisha Dev
// adev@andrew.cmu.edu
// Project - 11
// Section E


//TURTLE API
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;
}

// global variables for the turtles
var turtleOne;
var turtleTwo;
var turtleThree;
var turtleFour;
var turtleFive;
var turtleSix;
var turtleSeven;
var turtleEight;



function setup() {
    createCanvas(420, 420);
    background(40, 60, 40);

// turtleOne details
    turtleOne = makeTurtle(10, 0);
    turtleOne.penDown();
    turtleOne.setColor(255,0,0);
    turtleOne.setWeight(0.3);

//turtleTwo details
    turtleTwo = makeTurtle(60, 0);
    turtleTwo.penDown();
     turtleTwo.setColor(255,0,0);
    turtleTwo.setWeight(0.3);

//turtleThree details
    turtleThree = makeTurtle(110, 0);
    turtleThree.penDown();
     turtleThree.setColor(255,0,0);
    turtleThree.setWeight(0.3);

//turtleFour details
    turtleFour = makeTurtle(160, 0);
    turtleFour.penDown();
     turtleFour.setColor(255,0,0);
    turtleFour.setWeight(0.3);

//turtleFive details
     turtleFive = makeTurtle(210, 420);
    turtleFive.penDown();
     turtleFive.setColor(255,0,0);
    turtleFive.setWeight(0.3);

//turtleSix details
     turtleSix = makeTurtle(260, 420);
    turtleSix.penDown();
     turtleSix.setColor(255,0,0);
    turtleSix.setWeight(0.3);

//turtleSeven details
     turtleSeven = makeTurtle(310, 420);
    turtleSeven.penDown();
     turtleSeven.setColor(255,0,0);
    turtleSeven.setWeight(0.3);

//turtleEight details
     turtleEight = makeTurtle(360, 420);
    turtleEight.penDown();
     turtleEight.setColor(255,0,0);
    turtleEight.setWeight(0.3);
}



function draw() {

  // the movement for each turtle


	turtleOne.right(100);
    turtleOne.forward(80);
    turtleOne.turnToward(90, mouseX, mouseY);

    turtleTwo.right(110);
    turtleTwo.forward(80);
    turtleTwo.turnToward(90, mouseX, mouseY);
  
  	turtleThree.right(170);
    turtleThree.forward(70);
    turtleThree.turnToward(90, mouseX, mouseY);
  
  	turtleFour.right(100);
    turtleFour.forward(100);
    turtleFour.turnToward(90, mouseX, mouseY);

    turtleFive.right(100);
    turtleFive.forward(100);
    turtleFive.turnToward(90, mouseX, mouseY);

    turtleSix.right(100);
    turtleSix.forward(100);
    turtleSix.turnToward(90, mouseX, mouseY);

    turtleSeven.right(100);
    turtleSeven.forward(100);
    turtleSeven.turnToward(90, mouseX, mouseY);

    turtleEight.right(100);
    turtleEight.forward(100);
    turtleEight.turnToward(90, mouseX, mouseY);
}

This project was good for experimenting with turtle graphics and just being free to learn it. I liked how this one iteration meanders across the canvas. It initially reminds me of a map with the elevation lines when it starts out but then becomes this sci-fi—dystopian—future—esque Arrival-ish language/code.

atraylor – Project 11 – Section B

sketch

//atraylor@andrew.cmu.edu
//Section B
//Project 11
var frames = [];
var current = 0;
var numFrames = 7;
var x = 0;
var y = 0;
var t1;
var t2;
var t3;
var t4;
var t5;
var t6;
var t8;
function preload(){
    var filenames = [];
    filenames[0] = "https://i.imgur.com/1wsGt0D.png";
    filenames[1] = "https://i.imgur.com/NGkxNhE.png";
    filenames[2] = "https://i.imgur.com/E5rk1gn.png";
    filenames[3] = "https://i.imgur.com/dQtQDok.png";
    filenames[4] = "https://i.imgur.com/UIXXokF.png";
    filenames[5] = "https://i.imgur.com/pbZI4oD.png";
    filenames[6] = "https://i.imgur.com/eDwmWBE.png";
    filenames[7] = "https://i.imgur.com/bXLQ8DK.png";

    for(var i = 0; i < filenames.length; i++){
        frames.push(loadImage(filenames[i]));
    }
}
function setup() {
    createCanvas(274, 274);
    frameRate(10);
    background(255,100,100);
         t1 = makeTurtle(width/2, height/2);
         t2 = makeTurtle(width/3, height/2);
         t3 = makeTurtle(50, 50);
         t4 = makeTurtle(100, 60);
         t5 = makeTurtle(50, 50);
         t6 = makeTurtle(150, 50);
         t7 = makeTurtle(50, 50);
         t8 = makeTurtle(50, 50);
     frames[current].loadPixels();
     current = (current + 1) % numFrames;
     image(frames[current], 0, 0); //background image
}

function draw() {
    frames[current].loadPixels();
    current = (current + 1) % numFrames;
  // image(frames[current], 0, 0);
    //getting color from frames
    var framepixcolor = frames[current].get(t1.x, t1.y);
    var valueAtPix = brightness(framepixcolor);
    //turtles drawing lines color of the moving gif
    t1.setColor(color(valueAtPix));
    t1.setWeight(2);
    t1.forward(5);
    var a = mouseX;
    var b = mouseY;
    t1.turnToward(a, b, 10);
    framepixcolor = frames[current].get(t2.x, t2.y);
    valueAtPix = brightness(framepixcolor);
    t2.setColor(color(valueAtPix));
    t2.setWeight(1);
    t2.forward(1);
    t2.turnToward(a, b, 3);
    framepixcolor = frames[current].get(t3.x, t3.y);
    valueAtPix = brightness(framepixcolor);
    t3.setColor(color(valueAtPix));
    t3.setWeight(5);
    t3.forward(4);
    t3.turnToward(a, b, random(8,10));
    framepixcolor = frames[current].get(t4.x, t4.y);
    valueAtPix = brightness(framepixcolor);
    t4.setColor(color(valueAtPix));
    t4.setWeight(6);
    t4.forward(2);
    t4.turnToward(a, b, random(1, 10));
    framepixcolor = frames[current].get(t5.x, t5.y);
    valueAtPix = brightness(framepixcolor);
    t5.setColor(color(valueAtPix));
    t5.setWeight(1.5);
    t5.forward(5);
    t5.turnToward(a, b, random(7, 10));
    framepixcolor = frames[current].get(t6.x, t6.y);
    valueAtPix = brightness(framepixcolor);
    t6.setColor(color(valueAtPix));
    t6.setWeight(1);
    t6.forward(4);
    t6.turnToward(a, b, random(4, 10));
    framepixcolor = frames[current].get(t7.x, t7.y);
    valueAtPix = brightness(framepixcolor);
    t7.setColor(color(valueAtPix));
    t7.setWeight(3);
    t7.forward(1);
    t7.turnToward(a, b, random(2, 10));
    framepixcolor = frames[current].get(t8.x, t8.y);
    valueAtPix = brightness(framepixcolor);
    t8.setColor(color(valueAtPix));
    t8.setWeight(.5);
    t8.forward(2);
    t8.turnToward(a, b, random(2, 10));

}

/////////

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 assignment I wanted to use the turtles to reveal a gif, but I realized that that wasn’t the best method. I ended up having them draw values based on the brightness of the gif frames on a still from the gif. The result is a coffee cup infested with worms.

gyueunp – Project-11: Playing with your Turtles

Turtles

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-11

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

function draw() {
    background(random(50,70));
    var turtle = makeTurtle(width-35, height-365);
    turtle.penDown();
    turtle.setColor(0);
    for (var i = 0; i < 9800; i++) {
        turtle.forward(50);
        turtle.right(141.5);
        turtle.forward(420);
        if (i % 20 === 0) {
            turtle.forward(70);
        }
    }
}


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

In all honesty, learning how to use turtle graphics was one of the coolest things I learned in this course; I just love the intricate designs that I am able to create with them. I experimented with various turtle object API (application programmer’s interface) to reach this final design. I like the sense of dimension it has as a result of the overlapping lines. As with many of my works, visual complexity and simplicity coexist in this piece. Here is a screenshot of the final version.

Since it is difficult to illustrate them in hand-drawn sketches, I have decided to include multiple screenshots of from the experimentation process.

 

   

 

svitoora-Project-11- Petri Dish

Petri Dish

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// Petri Dish

// Create Node
function makeTurtle(tx, ty) {
	var turtle = {
		x: tx,
		y: ty,
		life_index: random(-.5, .5) //random seem for bug bheavior
	};
	return turtle;
}

var time = 1; // Time variable
var w = 480;
var h = 480;
var turtles = []

function setup() {
	createCanvas(w, h);
	background(255);
	num_node = 15;
	for (i = 0; i < num_node; i++) {
		t = makeTurtle(random(0, w), random(0, h));
		turtles.push(t);
	}
}

// Ease turtles towards mouse
function turtle_move() {
	speed = .045;
	for (i in turtles) {
		if (turtles[i].x < mouseX) {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x += dx * speed
		} else {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x -= dx * speed
		}
		if (turtles[i].y < mouseY) {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y += dy * speed
		} else {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y -= dy * speed
		}
	}
}

// Add Perlin noise to movement of turtle
function add_life() {
	if (mouseIsPressed == false) {
		SIZE = 10; //magnitude of noise movement add
	} else {
		SIZE = 30;
	}
	for (i in turtles) {
		life = turtles[i].life_index
		turtles[i].x += (noise(time * life) - .5) * SIZE;
		turtles[i].y += (noise(time * life / 2) - .5) * SIZE;
	}
}

// Draws membrane of turtles
function membrane() {
	strokeWeight(1);
	fill(0, 0, 0, 255 * .1);
	beginShape(TRIANGLE_STRIP);
	for (i in turtles) {
		x = turtles[i].x
		y = turtles[i].y
		curveVertex(x, y);
	}
	endShape(CLOSE);
}

// Connect lines
function connect_lines() {
	stroke(0, 0, 0, 255 * .25)
	for (i in turtles) {
		x_0 = turtles[i].x
		y_0 = turtles[i].y
		for (i in turtles) {
			x_1 = turtles[i].x
			y_1 = turtles[i].y
			line(x_0, y_0, x_1, y_1);
		}
	}
}

function draw() {
	time += .1;
	background(255, 255, 255, 255 * .75);
	turtle_move();
	add_life()
	for (i in turtles) {
		fill(0, 0, 0, 255 * .75);
		ellipse(turtles[i].x, turtles[i].y, 10, 10)
	}
	membrane();
	connect_lines();
}

This is my first time playing with the noise() function and I absolutely love it! Try clicking and moving your mouse around the canvas. I wanted to create a digital petri dish inspired by seeing Euglena protist under the microscope:

Image result for euglena

 

SaveSave

SaveSave

jiaxinw-Project-11-Composition

sketch

function preload(){
    img = loadImage("https://i.imgur.com/TKrbX1X.jpg")
}

function setup(){
    createCanvas(480,480);
    background(40);
    img.loadPixels();
}

var d = 20;
var c;
var w = 5;
function draw(){
    frameRate(10);
    var x = width/2;
    var y = height;
    //let the tree grow from the center of the bottom
    myTurtle=makeTurtle(x,y)
    //get random color for each branch
    c = img.get(random(x*2),random(y));
    if (d>=600){
        d =10
        w = 5
    }
    //when the tree is too big, grow black branches to erase the tree
    if (d>400 & d<600){
        c=40
        w=50;
    }
    myTurtle.setColor(c);
    myTurtle.setWeight(w);
    //draw a randomly growing tree
    myTurtle.left(90);
    myTurtle.forward(50);
    myTurtle.turnToward(random(200,280),100,20);
    myTurtle.forward(random(d));
    d += 2;
    myTurtle.turnToward(random(100,380),height,30);
    myTurtle.forward(random(d));
    myTurtle.turnToward(random(width),10,50);
    myTurtle.forward(random(d));
    
};

function mousePressed(){
    //press mouse to draw white fruits 
    var x1 = mouseX;
    var y1 = mouseY; 
    var t1 = makeTurtle(x1,y1);
    t1.setColor(color(255));
    t1.setWeight(1);
    for (var i = 0; i < 50; i++) {
        t1.forward(random(5,7));
        t1.right(random(10,30));
        
    }
    
}


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

My original thought was to draw a growing tree with Turtles. I wanted the branches to grow on the canvas. So I began to use the turtle to draw a branch.  And then I think about because I needed a trunk, so I made the first “forward” longer to make a trunk. I needed the branches going spreadly on the canvas, so I made them randomly go around the center line of the canvas. And then I figured out if I let the tree just growing forever, the canvas would be a mess. That’s why I added when the tree is big enough, black branches will grow and “erase” the previous ones. Also, for making the work more interesting, I added when the mouse is pressed, an abstract white “fruit” will be drawn on the tree.

The tree grows from small to big, and fruits can be added to the tree when the mouse is clicked.

thlai-Project11-Composition

I still have trouble creating compositions using turtle graphics, but this project certainly helped me learn a lot. I created a hexagonal grid (inspired by a past assignment) and a spiral web that responds to the mouse position. The web and hive are both natural phenomena created by small creatures and have unique and distinctive shapes.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 11 - Turtle

var ox = 80; // offset of x position
var oy = 90; // offset of y position
var tw = 15; // spacing between hexagons (width)
var th = 18; // spacing between hexagons (height)

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

function draw() {
	background(35, 36, 49, 50);
	// draw hexagons
  for (var x = 0; x < 6; x++) {
		for (var y = 0; y < 20; y++) {
			var t1 = makeTurtle(ox + x * tw, oy + y * th);
			hexagon(t1);
		}
		if (x%2 == 0) { // offset every other column
			oy = 80;
		} else {
			oy = 90;
		}
	}

	// draw spiral of circles
	var t2 = makeTurtle(0, 0);
	var translateX = map(mouseX, 0, width, 100, 200);
	var translateY = map(mouseY, 0, height, 100, 200);
	var radius = map(mouseX, 0, width, 160, 170);

	translate(translateX, translateY); // translate based on mouse position
	for (var i = 0; i < 100; i++) {
		t2.setColor(color(97, 121, 120, 20)); // yellow-y color
		t2.forward(i * 5); // creating spiral
		t2.left(radius);
		circle(t2);
	}
	pop();

function hexagon(t1) {
	for (var i = 0; i < 6; i++) {
		t1.setColor(color(175, 35, 45));
		t1.forward(10);
		t1.left(60);
	}
}

function circle(t2) {
	for (var i = 0; i < 20; i++) {
		t2.setColor(color(213, 215, 181, 60));
		t2.forward(0.5);
		t2.left(360/20);
	}
}

//======= CONDENSED TURTLE CODE =======//
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;}}