Category: Section C

Project 11 Thomas Wrabetz

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-11

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

var turtle;


function setup()
{
    createCanvas( 480, 480 );
    background( 255 );
    turtle = makeTurtle( width / 2, height / 2 );
    turtle.penDown;
    turtle.setWeight( 3 );
    turtle.setColor(0,0,0);
}

var turtleDist = 100;
var turtleSpeed = 1;
var turtleAcceleration = 0.05;

function draw()
{
    turtle.forward( turtleSpeed );
    if( dist( turtle.x, turtle.y, mouseX, mouseY ) < turtleDist) turtleSpeed += turtleAcceleration;
    else turtleSpeed -= turtleAcceleration * 2;
    turtleDist = dist( turtle.x, turtle.y, mouseX, mouseY );
    if( turtleSpeed < 0 )
    {
        turtle.left( 180 );
        turtleSpeed = -turtleSpeed;
    }
    turtle.turnToward( mouseX, mouseY, 7 );
    
}

It’s a turtle that chases you down.

ikrsek-SectionC-Project-11

My original idea was to create a field of sunflowers using turtles that changed the way that they faced based on the the location of the sun (which is attached to the mouse), but unfortunately I had so much other work that I couldn’t spend as much time as I wanted on this and I had to simplify my idea and so I stuck with the sunflower aspect and just had the little buds and smaller petals around the center be modified by the mouse location (just circle the mouse around the center and it will draw more buds).

I hope that I get the chance to expand on this code and actually make sunflowers that change the way that they face based on the location of the mouse/sun, or even more time in the future to modify these

 

original sketch

screenshots

 

 

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Project 11: "Sunflower center"

var ang = (90);
var leng = (3);
var gold = (137.507764); //golden angle 
var space = (1);
var transX = (140);
var transY = (160);
var turtle;
var turtle2;
var r; 
var g; 
var b; 
var randG;
var randB;
 
function setup() {
    createCanvas(480, 480);
    background(219,240,253);
    
    petals();
    petals2();
    petals3();
    petals4();
    petals5();
}
 
 
function draw() {
    var a = atan2(mouseY-height/2, mouseX-width/2);
    var b = atan2(mouseY-height/2, mouseX-width/2);
  
    push();
    translate(233,230);
    rotate(b);
    scale(.15,.15);
    mousePetals();
    pop();
  
    
    push();
    translate(233,230)
    rotate(a);
    scale(.1,.1);
    sunflowerOuterBuds();
    pop();
    
    push();
    translate(transX,transY+2);
    sunflowerCenterBack();
    scale(.24,.24);
    translate(145,68);
    sunflowerCenter(); 
    pop();
    
    
        
    push();
    translate(transX+98,transY-25);
    scale(.25,.25);
    sunflowerOuterBuds2();
    rotate(90);
    translate(390,-540);
    sunflowerOuterBuds3();
    rotate(180);
    translate(-270,-630);
    sunflowerOuterBuds2();
    rotate(270);
    translate(-60,-20);
    sunflowerOuterBuds3();
    pop();
    
    
}
 
//sunflower center turtle 
  //draw that sunflower center
function sunflowerCenter(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    //colors for gradient 
    var brownColor  = color(226,145,7); // 226,145,7 //62, 42, 20
    var greenColor  = color(73,161,3);
    
    turtle.setWeight(10);
    //turtle square placement rendering 
    for( var i = 0; i< 300; i++){ 
      //color gradient for center 
      turtle.setColor(lerpColor(greenColor, brownColor, i/350));
      turtSquare(turtle, ang, leng); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        turtle.left(gold); 
        turtle.penDown();
  }
} 
  //shape of the turtle each time it loops
function turtSquare(turtle, ang, leng){ //hexagons because my octagon refused to cooperate
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
}

function sunflowerCenterBack(){
   var radius = (93);
   noStroke();
    fill(39, 20, 13);
    ellipse(93,72,radius,radius);
   
}


//little buds outside the sunflower center 
function sunflowerOuterBuds(){
    r = random(193,255);
    g = random(98,211);
    b = random(4,67);
    
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(r,g,b));
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,,4); &  //brighter yellow = (252,198,,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds2(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(237,183,4));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds3(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(255,229,142));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function budShape(turtle){
  var angle = 90;
  var lengg = 10;
        turtle.right(angle);
        turtle.right(angle+60);
        turtle.forward(lengg+1);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-65);
        turtle.forward(lengg);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-40);
        turtle.forward(lengg);  
        turtle.right(angle+25);
        turtle.forward(lengg);  
        turtle.left(angle-45);
        turtle.forward(lengg); 
        turtle.right(angle+25);
        turtle.forward(lengg); 
        turtle.left(angle-45);
        turtle.forward(lengg);
        turtle.right(angle+25);
        turtle.forward(lengg);
        
}

//petals
function petals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    
    turtle.setWeight(4);
    //turtle square placement rendering 
    for( var i = 0; i< 9; i++){ 
      //color gradient for center 
      turtle.setColor(color(254,209,40));
      petalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape(turtle){
  var angle = 90;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 2
function petals2(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape2(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape2(turtle){
  var angle = 60;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 3
function petals3(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(252,224,72));
      petalShape3(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape3(turtle){
  var angle = 70;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}


//petals set 4
function petals4(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape4(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape4(turtle){
  var angle = 40;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 5 
function petals5(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape5(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape5(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//mouse petals 
function mousePetals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 1; z++){ 
      //color gradient for center 
      //orangeCol = (242,139,0);
      //lightOranCol = (242,178,62);
      //var randR = random();
      randG = random(139,178);
      randB = random(0,62); 
      
      
      turtle.setColor(color(242,randG,randB));
      mousePetalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function mousePetalShape(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}





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

 

selinal-Project-11

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-11

var turt1;
var turt2;
var turt3;

function setup() {
    createCanvas(480, 480);
    frameRate(10); //best speed for change in turtle function

}

function draw() {
	background(40, 255, 215); //aqua backround
	turt1 = makeTurtle(mouseX, mouseY); //follows mouse from center
	turt1.setColor(color(255, 0, 255)); //magenta
	turt1.setWeight(.5); //thin lines

	turt2 = makeTurtle(mouseX, mouseY); 
	turt2.setColor(color(255, 200, 0)); //orange turtles
	turt2.setWeight(4); 

	turt3 = makeTurtle(mouseX, mouseY);
	turt3.setColor(color(180, 255, 30)); //yellow turtles
	turt3.setWeight(10); //largest stroke weight span

	turt4 = makeTurtle(mouseX, mouseY);
	turt4.setColor(color(255, 100, 50));

	for(var i = 0; i < 12; i++) { //there are about 12 visible iterations of the yellow turtles 
		turt3.penDown();
		turt3.forward(random(30,35)*i); //by multiplying by i, the side lengths increase with each iteration of the turtle shape
		turt3.left(60); //constant angle for visual flow
		turt3.forward(random(30,35)*i); //larger length sides
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.penUp();
	}

	for(var i = 0; i < 18; i++) { //iterations of the orange turtles
		turt2.penDown();
		turt2.forward(random(6,10)*i); //shorter sides
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.penUp();
		turt2.left(20);
		turt2.forward(5);
	}

	for(var i = 0; i < 20; i++) { //there are about 20 visible iterations of the magenta turtles
		turt1.setWeight(i*.1); //stroke weight increases with side length of the turtle
		turt1.penDown();
		turt1.back(20*i/3); //medium scale sides scale sides
		turt1.left(random(50,70)); 
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.penUp();
		turt1.right(noise(.001)*50); //natural movement away from the other circles with noise function
		turt1.back(40);	 //constant for visual appeal
	}

	for(var i = 0; i < 50; i++) {
		turt4.setWeight(i*.04);
		turt4.penDown();
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.penUp();
		turt1.right(noise(.001)*50);
		turt1.back(80);	
	}

	if(mouseIsPressed) {
		noLoop();
	}
}


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 process for this project started with playing around with the abstraction and composition of different polygons and their color. The mouse interaction and randomization were added after.

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-11

var turt1;
var turt2;
var turt3;

function setup() {
    createCanvas(480, 480);
    frameRate(10); //best speed for change in turtle function

}

function draw() {
	background(40, 255, 215); //aqua backround
	turt1 = makeTurtle(mouseX, mouseY); //follows mouse from center
	turt1.setColor(color(255, 0, 255)); //magenta
	turt1.setWeight(.5); //thin lines

	turt2 = makeTurtle(mouseX, mouseY); 
	turt2.setColor(color(255, 200, 0)); //orange turtles
	turt2.setWeight(4); 

	turt3 = makeTurtle(mouseX, mouseY);
	turt3.setColor(color(180, 255, 30)); //yellow turtles
	turt3.setWeight(10); //largest stroke weight span

	turt4 = makeTurtle(mouseX, mouseY);
	turt4.setColor(color(255, 100, 50));

	for(var i = 0; i < 12; i++) { //there are about 12 visible iterations of the yellow turtles 
		turt3.penDown();
		turt3.forward(random(30,35)*i); //by multiplying by i, the side lengths increase with each iteration of the turtle shape
		turt3.left(60); //constant angle for visual flow
		turt3.forward(random(30,35)*i); //larger length sides
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.left(60);
		turt3.forward(random(30,35)*i);
		turt3.penUp();
	}

	for(var i = 0; i < 18; i++) { //iterations of the orange turtles
		turt2.penDown();
		turt2.forward(random(6,10)*i); //shorter sides
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.right(72);
		turt2.forward(random(6,10)*i);
		turt2.penUp();
		turt2.left(20);
		turt2.forward(5);
	}

	for(var i = 0; i < 20; i++) { //there are about 20 visible iterations of the magenta turtles
		turt1.setWeight(i*.1); //stroke weight increases with side length of the turtle
		turt1.penDown();
		turt1.back(20*i/3); //medium scale sides scale sides
		turt1.left(random(50,70)); 
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.left(random(50,70));
		turt1.back(20*i/3);
		turt1.penUp();
		turt1.right(noise(.001)*50); //natural movement away from the other circles with noise function
		turt1.back(40);	 //constant for visual appeal
	}

	for(var i = 0; i < 50; i++) {
		turt4.setWeight(i*.04);
		turt4.penDown();
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt4.back(10*i/4);
		turt4.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.left(random(70,90));
		turt1.back(10*i/4);
		turt1.penUp();
		turt1.right(noise(.001)*50);
		turt1.back(80);	
	}

	if(mouseIsPressed) {
		noLoop();
	}
}


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

rfarn-lookingOutward-11

For this weeks looking outwards post, I decided to take a look at Bleep Space. Bleep Space is a project created by Andy Wallace and Dan Friel. It’s a toy that lets users to sequence various geometric animations along with sounds, allowing the user to create visual and auditory patterns.

people interacting with table top Bleep Space

The purpose of the interactive toy is not so much to create perfect tunes, but more to experiment with various sounds and their accompanying graphics. A tabletop installation was also created with many buttons surrounding a screen and is currently touring in different locations in New York. As users press buttons, different images and motion graphics appear on the screen. Originally, the program was written in openFrameWorks. However, the tabletop version had some edits and changes, taking away more complex features and making it more game-like with arcade features such as a timer to clear the screen.

http://www.creativeapplications.net/sound/bleep-space-ios-sequencer-toy-and-tabletop-arcade/

Jdbrown – Looking Outwards 11 – Sound Art

I’m a really big fan of sound art that deals with wearable technology and the body’s role in music-making. Using surface transducers (little machines which vibrate at a frequency depending on their input, i.e. little vibrating circles that turn surfaces into speakers), the Human Harp is an example of an instrument that incorporates gesture as well as space into its performative practice.

It’s a fairly simple set-up, but it’s one of the projects that has most inspired me.

Josh

 

selinal-Looking-Outwards-11

Surround Sounds by Christian Marclay

Surround Sounds is an art installation by Christian Marclay which entraps viewers in a room with projections that play “music” through their animation of visual onomatopoeias. The room is actually silent, but by using the animations to take over the space, sound can be envisioned, or felt in an alternative way. This piece shows an interesting connection between sound art and music, because the art under the category of sound art simply does not make sound. I admire this aspect of the piece. I am not sure if many algorithms were used directly in this piece, but Marclay worked with a team of animators in Adobe After Effects.

myoungsh-project11-“OFF-PROJECT”

“MOUSE.PRESS”

sketch

var S = 25;
var M = 50;
var L = 200;
var pickColor;
function setup() {
  createCanvas(800,800);
  background(0);
}
function mousePressed() {
  pickColor = floor(random(0, 2));
  drawThing(mouseX, mouseY);
}
function drawThing(x, y) {
  strokeCap(PROJECT);
  T = makeTurtle(x, y); 
  T.setWeight(5);
  T.setColor(color(256, 256, 0));
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L/2+2);
  T.right(90);
  T.forward(L/2+2);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.forward(2);
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2+2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
}
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;}

 

svitoora – Looking Outward 11

Break Free by Taryn Southern is a music track and video art that is created using artificial intelligence. I admire the merging of human and machine in this project. Although the music track is generated via artificial intelligence the vocal lyrics are still handwritten by the artist herself.  The raw footage is most likely shot by hand, by edited via artificial intelligence. The video art is also further manipulated in an algorithm similar to Google’s deep mind. Since the song is set to pop music tune, it begs the question of what does making music mean in an age of automation. Can one automate the art of music making? If so, what does it mean to humans who once thought that art and music were the highest echelons of human creativity? Could good music and art be deconstructed simply into just a pattern of stimuli that simply engages the human mind at an aesthetic level? These are the question of the age of automation.

aerubin-Project-11-Composition

For this project, I was inspired by the intricacies of different snowflakes. Each snowflake is made out of a pattern that repeats throughout the design of the snowflake. I first made an initial leg of a snowflake, and afterward I put them into a for loop to make them repeat in a circular pattern to replicate a snowflake.

One of the Snowflake Designs that inspired my project

Attached are two images that inspired two of my snowflake designs. I am very pleased with the final result and I think I made it just in time for Pittsburgh’s first snow!

Another Snowflake Design that inspired my project

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-11-Playing with Turtles

//initial x and y positions of snowflakes
var x1 = 40;
var y1 = 10;
var x2 = 200;
var y2 = 50;
var x3 = 330;
var y3 = 50;
var x4 = 250;
var y4 = 200;

//velocities for snowflakes
var yvel1 = 1;
var yvel2 = .75;
var yvel3 = 1.5;
var yvel4 = .5;

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

function draw() {
    background(148, 164, 183);
    strokeJoin(MITER);
    strokeCap(PROJECT);

    //first snowflake on left
    var turtle = makeTurtle(x1, y1); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 5;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(60);
    turtle.forward(ed2);
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(20);
        turtle.right(120);
    }

    //second snowflake in middle
    var turtle2 = makeTurtle(x2, y2); //initial position of snowflake
    turtle2.penDown();
    turtle2.setWeight(2);
    turtle2.setColor(255);
    var s1 = 6;
    var s2 = (s1 * 2)-2;
    var s3 = s1 * 5;

    for(a = 0; a < 4; a++) {
        turtle2.forward(s3);
        turtle2.back(s1);
        turtle2.left(50)
        turtle2.forward(s2)
        turtle2.back(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.right(120);
        turtle2.forward(s2+s1/3);
        turtle2.left(130);
        //start of inner diamond shape
        turtle2.forward(s2);
        turtle2.right(116);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s3-s2-s1);
        turtle2.back(s3-s2-s1);
        turtle2.back(s3);
        turtle2.forward(s1);
        turtle2.left(130);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(100);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(130);
        turtle2.forward(s1);
        turtle2.right(130);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(100);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(130);
        turtle2.forward(s2+s2/1.3);
        turtle2.left(120);
        turtle2.forward(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s2+s1/.8);
    }

    //third snowflake right
    var turtle3 = makeTurtle(x3, y3); //initial position of snowflake
    turtle3.setWeight(1);
    turtle3.setColor(255);

    var w1 = 5;
    var w2 = w1*2;
    var w3 = w1*7;
    var w4 = w1*3;
    var w5 = w1*4;
    var w6 = w1*8;
    var w7 = w1*6;

    for (m = 0; m < 6; m++) {
        turtle3.penUp();
        turtle3.left(180);
        turtle3.forward(w6);
        turtle3.right(45); //changes closeness of petals
        turtle3.penDown();
        turtle3.forward(w2);
        turtle3.right(90);
        turtle3.forward(w2);
        turtle3.left(110);
        turtle3.forward(w4);
        turtle3.right(65);
        //tip of snowflake
        turtle3.forward(w5);
        turtle3.right(90);
        turtle3.forward(w5);
        turtle3.right(60);
        turtle3.forward(w4);
        turtle3.penUp();
        turtle3.forward(w6);
    }
    //inner diamonds 
    turtle3.left(60);
    turtle3.forward(w1);
    turtle3.right(48);
    for(var q = 0; q < 6; q++) {
        turtle3.penDown();   
        turtle3.forward(w7);
        turtle3.left(50);
        turtle3.forward(w1);
        turtle3.left(90);
        turtle3.forward(w1);
        turtle3.left(53);
        turtle3.forward(w7);
        turtle3.penUp();
        turtle3.forward(w2+w1);
        turtle3.left(120);
        turtle3.forward(w2);
        turtle3.right(11);
    }

    //fourth turtle (smaller version of first snowflake)
    var turtle = makeTurtle(x4, y4); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 4;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(65);
    turtle.forward(ed2+2);

    //inner part of snowflake
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(15);
        turtle.right(120);
    }

    //make snowflake 1 fall at rate of yvel1
    y1+=yvel1;

    //if snowflake falls beyond canvas, start again at the top
    if (y1>height+40) {
        y1 = 0;
    }

    //make snowflake 2 fall at rate of yvel2
    y2+=yvel2;

    //if snowflake falls beyond canvas, start again at the top
    if (y2>height+40) {
        y2 = 0;
    }

    //make snowflake 3 fall at rate of yvel3
    y3+=yvel3;

    //if snowflake falls beyond canvas, start again at the top
    if (y3>height+40) {
        y3 = 0;
    }

    //make snowflake 4 fall at rate of yvel4
    y4+=yvel4;

    //if snowflake falls beyond canvas, start again at the top
    if (y4>height+40) {
        y4 = 0;
    }

    //make the snow covered ground
    fill(255);
    ellipse(width/2, 400, 500, 200);
}

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

eeryan-project-11-turtles

sketch

var t1;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(0);
    //initializes and sets the weight and color of 6 turtles
    t1 = makeTurtle(width / 2, height / 2);
    t1.setColor(color(255, 200, 200));
    t1.setWeight(2); 
    t1.penDown();
    t2 = makeTurtle(width/2, height/2);
    t2.setColor(color(0,0,255));
    t2.setWeight(2);
    t2.penDown();
    t3 = makeTurtle(width/2, height/2);
    t3.setColor(color(255,0,0));
    t3.setWeight(2);
    t3.penDown();
    t4 = makeTurtle(width/2, height/2);
    t4.setColor(color(0,255,0));
    t4.setWeight(1);
    t4.penDown();
    t5 = makeTurtle(width/2, height/2);
    t5.setColor(255);
    t5.setWeight(2);
    t5.penDown();
    t6 = makeTurtle(width/2, height/2);
    t6.setColor(color(255,255,0));
    t6.setWeight(1);
    t6.penDown();
    resetCanvas();
    frameRate(10);
}

function draw() {
    var s = second(); // makes a time based variable
    var step = (frameCount - startFrame)/30.0;//creates a varying amount to move forward
    var angle1 = -100/s;//creates different angles based on the second (time)
    var angle2 = 50/s;
    var angle3 = -100/(s * 2);
    var angle4 = 200/(s * 2);
    var angle5 = -180/(s * 3);
    var angle6 = 400/(s * 3);
    t1.forward(step);
    t1.left(angle1);
    t2.forward(step);
    t2.left(angle2);
    t3.forward(step);
    t3.left(angle3);
    t4.forward(step);
    t4.left(angle4);
    t5.forward(step);
    t5.left(angle5);
    t6.forward(step);
    t6.left(angle6);
}

function resetCanvas() {
    background(0);
    startFrame = frameCount;
}


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 originally started this by modifying my abstract clock project from week 6, because I had wanted to make an element like this but hadn’t known how to. Because the angle of the turtle is determined by a time based variable, as opposed to a for loop, the composition will generate differently based on what time you load it, which I found interesting. The screenshots below are the same code generated at different times.