Month: November 2016

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.

james-turtlegraphicscompostion

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-11

var timer = 0.01;
var inc = 0.001;
//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 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(200),
                  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;
}
//using turtle graphics to draw cloudy sin curve using perlin noise
function setup(){
    createCanvas(600, 400);
    background(250, 50);
}

function draw(){
    var amplitude = 50 + timer * noise(inc);
    var startVal = 50 + timer * noise(inc);
    var myTurtle = makeTurtle(0, startVal);
    for (var x = 0; x < width; x++){
        //restrict sin curve within the canvas edges
        var angle = map(x, 0, width, 0, TWO_PI);
        //sin curve
        var yLoc = startVal + sin(angle) * amplitude;
        myTurtle.goto(x, yLoc);
    }
    timer++;
    inc++;

    if (frameCount%400 == 0){
        background(250);
    }
}

I wanted to use the turtle to draw a sin curve that gently distorts over time leaving a soft mesh in its wake similar to the image below. I lost control of the turtle stroke and perlin noise, then ran out of time. Will explore more after.

For the composition project this week, I decided to attempt to create an abstract rendering of a rose. To start with, I looked at the properties of Turtle Graphics that we had learned and implemented last week and began my project.

Here is what it looked like throughout the process of creating my “rose petals.”

‘I found that when I was incrementing by numbers larger than one, I was getting the desired density in the center of my graphic, essentially the center of the flower. When I switched my incrementation to i++, I got the exact look I was going for – a heavily filled in center that spiraled outwards to create a beautiful abstract rose.

Here’s the final result:

ijhong-11

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project 11 

//angle to turn and reposition by in degrees 
var turnAngle = 110;
//the degree by which the turtle turns by 
var adegree = 120;   

function setup() {
    createCanvas(400, 400);
    //pale yellow background 
    background(250, 255, 200);
    strokeJoin(MITER); 
    strokeCap(PROJECT); 
    var turtle = makeTurtle(width / 2, 265);
    //pink color for rose 
    turtle.setColor(color(255, 174, 188));
     
//loops that will continue to draw the base figure to create the rose
    for (var i = 0; i < 100; i++) { 
      for (var length = 0; length < 200; length += 100) {
        //base figure for the rose 
          //set the line weight 
          turtle.setWeight(2); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length); 
          turtle.right(adegree); 
          turtle.forward(length);
          turtle.right(adegree);   
        //push the base figure by turnAngle each time it is drawn
          turtle.penUp(); 
          turtle.forward(i * 2);
          turtle.right(turnAngle); 
          turtle.penDown();   
        }
    }
    //save on computation
    noLoop();  
}

function draw() {   
}

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


	


	


	


	

I tried a bunch of different ideas for this project but in the end I wanted to keep it simple. I created two turtles that would draw and rotate themselves in two different positions and in the end I thought that it kind of looked like a tire on a car. As a result I drew a road and a sign that says how far carnegie mellon is from my home while the tiring is stitching itself together before it hits the road. I think it worked out well.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 10 Frestyle Playing With Turtles

//Global Variables
var turtle1Length = 20
var turtle2Length = 40
var turtle3Length = 50
var turtle4Length = 60

function setup() {
    createCanvas(400, 400);
    background('teal');
    myTurtle1 = makeTurtle(width/2,height/2) //make turtle 1
    myTurtle2 = makeTurtle(width/2,height/2) //make turtle 2
    myTurtle1.penDown();
    push();
    fill(50)
    rect(0,(height/2)-12,width,12) //road
    pop();
}

function draw() {
    
    push()
    rotate(frameCount) //rotation
    turtleLine1(turtle1Length)
    pop();
    push();
    rotate(-frameCount) //rotation in other direction
    turtleLine2(turtle2Length)
    pop();
    line(60,(height/2)-12,60,(height/2)-50) //sign 
    rectMode(CENTER)
    rect(60,(height/2)-50,50,30) //signrectangle
    textAlign(CENTER)
    textSize(5)
    text("CARNEGIE MELLON",60,(height/2)-50) //CMU Text
    text("238 Miles",60,(height/2)-45) //CMU Miles To my House
    push();
    for(i=0;i<width;i+=10){ //road yellow marks
        noStroke()
        fill('yellow')
        rect(i,(height/2)-6,3,1)
    }
    pop();
}

function turtleLine1 (length){ //turtle 1 Actions
    myTurtle1.setColor('blue')
    myTurtle1.setWeight(1)
    strokeJoin(MITER)
    myTurtle1.left(90)
    myTurtle1.forward(10)
    myTurtle1.left(90)
    myTurtle1.forward(20)
    myTurtle1.left(30)
    myTurtle1.forward(length)
   
    
    
}

function turtleLine2 (length){ //turtle 2 Actions
    myTurtle2.setColor('black')
    myTurtle2.setWeight(1)
    strokeJoin(MITER)
    myTurtle2.left(90)
    myTurtle2.forward(10)
    myTurtle2.right(90)
    myTurtle2.forward(20)
    myTurtle2.right(30)
    myTurtle2.forward(length)
    }




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

Playing with “Paint” : a childhood memory….

‘

Click and Dragg mouse to fill.

Click any key to send to back of drawing.

sketch

//Grace Cha
//section C
//heajinc
//Project 11 -Turtle Graphics



function setup() {
    createCanvas(600, 600);
    //background(255);

    var step = 7; //forward
    
    var goldenAngle = 137.507764;

    //hexagon has 6 sides
    var hexNumberofSide = 9; 

    //each side has a degree of 60 degrees
    var hexDegrees = 10;

    //Draw 400 little hexagons 
    var numHex = 500;

    //each side has a length of 5 pixels.
    var hexSideLength = 20;
    

   
    var turtle1 = makeTurtle(width/2  , height/2 );
    for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
        turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle)); 
        turtle1.setWeight(5);
        turtle1.penDown();

        

        for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
            step+=1;
            turtle1.forward(150 + step); //number of sides
            turtle1.left(40); //number of degrees
            
        }

        //lift the pen 
        turtle1.penUp();


        //These control the amount of spreading between each hexagon

        //turn each hexagon a golden angle 
        turtle1.left(goldenAngle);

        //the space between each hexagon 
        turtle1.forward(i + 30 );
        
        //the forward
        turtle1.right(200);


        turtle1.forward(10); //controls the amount of 
    }
    
    
    
    
}


function draw() {



    if(mouseIsPressed){
    noStroke();
    fill("#6C028A");
    ellipse(mouseX, mouseY, 80,80)
    }

    if(keyIsPressed){
    var step = 7; //forward
    
    var goldenAngle = 137.507764;

    //hexagon has 6 sides
    var hexNumberofSide = 9; 

    //each side has a degree of 60 degrees
    var hexDegrees = 10;

    //Draw 400 little hexagons 
    var numHex = 500;

    //each side has a length of 5 pixels.
    var hexSideLength = 20;
    

   
    var turtle1 = makeTurtle(width/2  , height/2 );
    for( i = 0; i < numHex; i ++){ //loop for 400 hexagons
        turtle1.setColor(color(i * 255/600, (i/goldenAngle), goldenAngle)); 
        turtle1.setWeight(5);
        turtle1.penDown();

        

        for(j = 0; j < hexNumberofSide; j ++){ //draw an individual hexagon
            step+=1;
            turtle1.forward(150 + step); //number of sides
            turtle1.left(40); //number of degrees
            
        }

        //lift the pen 
        turtle1.penUp();


        //These control the amount of spreading between each hexagon

        //turn each hexagon a golden angle 
        turtle1.left(goldenAngle);

        //the space between each hexagon 
        turtle1.forward(i + 30 );
        
        //the forward
        turtle1.right(200);


        turtle1.forward(10); //controls the amount of 
    }
    }
    
}




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

When I was little my first encounter with digital drawing was with “Paint” on a windows computer, I always tried to fill in the white spaces of my drawing based on an outline.  In this stimulation, I wanted to recreate this childhood memory with the added touch of being able to see the process by “sending back the painted section to see the “holes” that I missed.