Category: Project-11-Composition

sketch-sihan

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 11: Project turtle

var gravity = 0.3;   // downward acceleration
var springy = 0.7; // how much velocity is retained after bounce
var drag = 0.0001;    // drag causes particles to slow down
var np = 50;      // how many particles
var turtleColor = [];

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    stroke(this.dr, this.dg, this.db);
    strokeWeight(this.dw);
  
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 80) { // bounce off top
        this.y = 80 - (this.y - 80);//-this.y;
        this.dy = -this.dy * springy;
    }
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dy and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);

}

function particleDraw() {
    point(this.x, this.y);
}


// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy, pr, pg, pb, pw) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy, 
         dr: pr, dg: pg, db: pb,
         dw: pw,
         age: 0,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

var particles = [];


function setup() {
    createCanvas(500, 500);
    frameRate(8);
    turtleSlope = new makeTurtle(0, 0);

}


function draw() {
  background(184, 197, 245);

  //draw the chains
	for (i = 0; i < 25; i++) {
    turtleSlope.penUp();
    turtleSlope.right(30);
    turtleSlope.setColor(255);
    tSlope(20*i, 70); //1
    turtleSlope.setColor(0);
    tSlope(width/2, height/2-20); //2
    turtleColor[i] = color(random(100, 255), random(100, 255), random(100, 255));
    turtleSlope.setColor(turtleColor[i]);
    tSlope(100*i, 370); //3
    fill(0); 
	}

    if (mouseIsPressed) {
        var newp = makeParticle(mouseX, mouseY,
                                random(-10, 10), random(-10, 0), 
                                255, 255, 255,
                                random(10, 30));
        particles.push(newp);
    }

    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
        if (p.age < 200) {
            newParticles.push(p);
        }
    }
    
    particles = newParticles;

}

function tSlope(lx, ly){
	turtleSlope.goto(lx, ly);
  turtleSlope.setWeight(4);
  turtleSlope.right(90);
  turtleSlope.forward(random(7));//the amount of fluctuation
  
  turtleSlope.penDown();
  turtleSlope.left(60);
  turtleSlope.forward(10);
  turtleSlope.right(60);
  turtleSlope.forward(10);
  turtleSlope.right(30);
  turtleSlope.forward(17.3);
  turtleSlope.right(120);
  turtleSlope.forward(17.3);
  turtleSlope.right(30);
  turtleSlope.forward(10);
  turtleSlope.right(60);
  turtleSlope.forward(10);
  turtleSlope.right(30);
	turtleSlope.penUp();

}

//========== TURTLE GRAPHICS ===============//
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 turtleSetColor(c) {
    this.color = c;
}
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
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, 
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  };
    return turtle;
}

I’ve wanted to experiment with how turtle moves so I did so with this project. The turnout is not exactly ideal and I will continue practicing with turtles.

I also experimented with the particles because I think their movements are fascinating.

For this project I’m interested in the dynamic shapes that the turtle graphic is able to produced. I selected a spiral base shape and users can click on the canvas to generate the geometry in different sizes.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//11-Project



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

}

function mousePressed(){
    alpha += 50;
    //randomly select the number of rotates the basic geometry will go
    var numRotate = random(30,60);
    //randomly choose the initial strokeWeight for turtle
    var strokeWei = random(0.2,1);
    //base the size of the graph on the number of rotation
    var size = map(numRotate,30,60,80,200);
    //base the initial gradient of stroke on the position of x
    var color = round(map(mouseX, 0, width, 150,200));

    //create a turtle at the position where the mouse is pressed
    var turtle1 = makeTurtle(mouseX,mouseY,color,strokeWei);

    //set the decrement unit for color and stroke weight
    var intervStro = turtle1.weight/numRotate;
    var intervCol = turtle1.color/numRotate;

    //generate the spiral
    for (var counts = 0; counts < numRotate; counts++){
        turtle1.penDown();
        turtle1.color -= intervCol;
        turtle1.weight -= intervStro;
        //draw square
        for (var j = 0; j<4; j++){
            turtle1.forward(size-counts*2);
            turtle1.right(90);
        }
        turtle1.left(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, tColor,tStroke) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: tColor,
                  weight: tStroke,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

This is one of the image I created.

sketch

//Lydia Jin
//Section D
//jialuj@andrew.cmu.edu
//Project 11
var myTurtle1;
var flag=false;
function setup(){
    createCanvas(600,600);
    background('black');
    //create 5 turtles that does different things
    myTurtle1=new makeTurtle();
    noLoop();
    }
function draw(){

    strokeJoin(MITER);

    myTurtle1.setColor('silver');
    myTurtle1.setWeight(2);
    //draw stars
    for (i=0;i<50;i++){
      ellipse(random(width),random(height),3,5);
    }
}
//draws constellation when mouse pressed
function mousePressed(){
  noStroke();
  fill('silver');
  var x=mouseX;
  var y=mouseY;
  ellipse(x,y,8,8);
  stroke(0);
  if (flag==false){
      myTurtle1.penDown();
      myTurtle1.goto(x,y);  
  } else{
    //resets the pen
    flag=false;
    myTurtle1.penUp();
    myTurtle1.goto(x,y);
  }
  
        
}
//resets the status when key is pressed
function keyPressed(){
    if (flag==false){
      flag = true;
    } 
}

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

This canvas represents a night sky in the universe. The user can create constellations using the turtle by clicking the mouse and connecting the dots. Once you finish one drawing, you can press any key and start on a new constellation. Below are two finished drawings:

sketch

/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-10-A*/
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;
}


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

function draw() {
     background(0);

    var turtle5 = makeTurtle(mouseX, 200);
    turtle5.penDown();
    turtle5.setColor(255);
    turtle5.setWeight(6);
    turtle5.penDown();
    
        turtle5.face(-90);
        turtle5.forward(200-mouseY);
        turtle5.face(0);
        turtle5.forward(35);
        turtle5.face(90);
        turtle5.forward(25);
        turtle5.face(180);
        turtle5.forward(15);
        turtle5.face(-90);
        turtle5.forward(10);
        turtle5.face(0);
        turtle5.forward(7);
        turtle5.face(-90);
        turtle5.forward(7);
        turtle5.face(180);
        turtle5.forward(18);
        turtle5.face(90);
        turtle5.forward(200-mouseY-8);
        turtle5.face(0);
        turtle5.forward(40);
        
    
}

sketch

var hiddenImage;
var turtle1;
var turtle2;

function preload() {
	var imageLink = "http://i.imgur.com/Q1e8Pxg.jpg";
	hiddenImage = loadImage(imageLink);
}


function setup() {
    createCanvas(500, 500);
    background(0);
    hiddenImage.loadPixels();
    turtle1 = makeTurtle(width/2, height/2);
    turtle2 = makeTurtle(width/2, height/2);
    frameRate(100);

}

function draw() {
	//image(hiddenImage, 0, 0);
	var pixcolor = hiddenImage.get(turtle1.x, turtle1.y);
	print(pixcolor);

	turtle1.setColor(pixcolor);
	turtle1.setWeight(3);
	turtle1.penDown();
	if (turtle1.x < width-20 & turtle1.x > 0) {
		turtle1.forward(1);
		turtle1.left(random(-5,5));
	}
	if (turtle1.x > width-20 || turtle1.x < 20 || turtle1.y < 20 || turtle1.y > height-20 ) {
		turtle1.forward(-5);
	    turtle1.left(random(5,10));	
	}

	var pixcolor2 = hiddenImage.get(turtle2.x, turtle2.y);
	turtle2.setColor(pixcolor2);
	turtle2.setWeight(3);
	turtle2.left(random(-5,5));
	turtle2.left(random(-5,5));
	turtle2.penDown();
	if (turtle2.x < width-20 & turtle2.x > 0) {
		turtle2.forward(1);
		turtle2.right(random(-5,5));
	}
	if (turtle2.x > width-20 || turtle2.x < 20 || turtle2.y < 20 || turtle2.y > height-20 ) {
		turtle2.forward(-5);
	    turtle2.right(random(5,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 project, I used two turtles to draw the pixels of a hidden image. The turtles turn in random directions within a certain range of degrees, and they also turn once they hit the edge of the screen. Below are some possible turtle paths as they move across the screen.

mluria-11

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-11-Project
*/

var originalImage;
var px = 0;
var py = 0;
var currentColor;
var pBrightness;

function preload() {
    var myImageURL = "http://i.imgur.com/cU9Kpic.jpg"; //image link
    originalImage = loadImage(myImageURL); //load image
}

function setup() {
    createCanvas(500, 667); 
    background(255);
    originalImage.loadPixels(); //load pixels

}

function draw() {


    //create new turtle
    var turtle = makeTurtle(px, py);

    //settings for turtle
    turtle.setColor(0);
    turtle.setWeight(4);


    while (px < width) { //check first line

        currentColor = originalImage.get(px,py); //fetch color of photo

        if (isColor(currentColor)) { //check that it is a color
            pBrightness = brightness(currentColor); //what is the brightness
        }

        if (pBrightness < 50) { //if the brightness is less than 50 

            //draw a short black line
            turtle.goto(px,py); 
            turtle.penDown();
            turtle.forward(6);
            turtle.penUp();

        }

        px +=6; //adjust px location

    }

    py += 4; //move to next line
    px = 0; //start over on the x axis

}

//check the get function fetched the color
function isColor(c) {
    return (c instanceof Array);
}

//---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, drawPent: turtle};
return turtle;}

This week for my project I wanted to use a turtle to create a graphics project that would look different using a turtle than other methods. I decided to compute a “cartoon” version, a solid black and white picture, from a regular photo. Using this method, the photo can be recreated by computing it in slightly different ways – each small variation would create a very different and new composition from the same source. Furthermore, I liked how any photo can be uploaded into the code and by only changing the photo link – instantly create a new image. The one presented is the version that appealed most to me.