nahyunk1 – project 11 Composition

sketch

//Na Hyun Kim
//section B
//nahyunk1@andrew.cmu.edu
//Project-11

var r = 255;
var g = 255;
var b = 255;
var turtle =[];
var counter = 30;
function setup() {
    createCanvas(400, 400);
    background(0);
    ellipseMode(CENTER);
    //position of the turtle.
    for (var t = 0; t < counter; t ++) {
      turtle[t] = makeTurtle(0, 0);
      turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //set color
      turtle[t].setWeight(random(0.5,4)); // set weight
      turtle[t].penDown;
      }
      strokeJoin(MITER);
      strokeCap(PROJECT);
      frameRate(30);
}

function draw() {
  for (var t = 0; t < counter; t ++) {
    turtle[t].setColor(color(random(0,r), random(0,g), random(0,b))); //stroke random colors
    turtle[t].setWeight(random(0.5,4));
    turtle[t].turnToward(t,mouseY, turtle[0].angleTo(pmouseX+5, pmouseY-10)); //turn along mouse movement.
    turtle[t].forward(turtle[t].distanceTo(mouseX, mouseY));//move along mouse movement.
  }
}

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 is a semi-free drawing turtle that reacts to the movement of the mouse and creates an image that resembles to a ball of rubber. The lines build up as the person interacting moves her mouse across the screen.

amui1-Project-11-Composition

amui1-p11

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-11
//

//variables for rain
var x = 30;
var y = 30;
var xSpeed = 0.5;
var ySpeed = 3;
var treex = 10;

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

function draw() {
    background(51,79,102);

    noStroke();
    fill(178,198,204);

    //make rows of rain
    for (row = 0; row < 10; row++) {
      ellipse(x + row*50,y,5,10);
      //make columns of rain
      for (col = 0; col < 5; col++) {
        ellipse(x+row*50,y-80*col,5,10);
      }
    }
    //move rain a different way based on location
    if (y < height/4){
      x -= xSpeed;
    }
    //move rain a different way based on location
    if (y > height/4){
      x += xSpeed;
    }
    //move rain down canvas
    y += ySpeed;
    //if rain off the page, go back to top
    if (y > height/2+10) {
      y = 0;
    }
    //if mouse is pressed, then show lightning
    if (mouseIsPressed) {
      lightning();
    }



    //move tree based on wind based on wind position
    //reposition trunk and tree based on how wind is moving the tree
    if (mouseX > width/2 - 10 & mouseX < width/2+10) {
      wind = 118;
      treew = 68;
      trunkw = 90;
      trunkDist = 50;

    }
    if (mouseX < width/2-10) {
      wind = 110;
      treew = 70;
      trunkw = 80;
      trunkDist = 50;
    }
    if (mouseX > width/2+10) {
      wind = 135;
      treew = 60;
      trunkw = 100;
      trunkDist = 38;
    }

    //make 5 trees
    for (t = 0; t < 5; t++) {
      turtleTree(treex+t*100,wind,treew,trunkw,trunkDist);
    }
}


//make turtle for lightning
function lightning() {
    light = makeTurtle(mouseX,mouseY);
    light.setColor(color(233,255,103));
    light.setWeight(5);
    light.penDown();
    light.forward(20);
    light.right(115);
    light.forward(30);
    light.left(135);
    light.forward(10);
    light.right(140);
    light.forward(30);
    light.left(125);
    light.forward(10);
    light.right(130);
    light.forward(40);
    light.right(150);
    light.forward(20);
    light.left(115);
    light.forward(10);
    light.right(130);
    light.forward(30);
    light.left(120);
    light.forward(10);
    light.right(123);
    light.forward(41);
    light.penUp();
}

//make turtle tree
function turtleTree(treex,wind,treew,trunkw,trunkDist) {

    trunk = makeTurtle(treex+25,height-trunkDist);
    trunk.setColor(color(95,81,48));
    trunk.setWeight(3);
    trunk.penDown();
    trunk.right(trunkw);
    trunk.forward(48);
    trunk.left(90);
    trunk.forward(10);
    trunk.left(90);
    trunk.forward(48);
    tree = makeTurtle(treex,height-50);
    tree.setColor(color(93,134,67));
    tree.setWeight(3);
    tree.penDown();
    tree.left(65);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(130);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(wind);
    tree.forward(80);
    tree.right(130);
    tree.forward(80);
    tree.left(230);
    tree.forward(8);
    tree.left(135);
    tree.forward(15);
    tree.left(240);
    tree.forward(8);
    tree.right(240);
    tree.forward(20);
    tree.right(122);
    tree.forward(treew);
    tree.penUp();
}


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 had trouble coming up with a concept for this project. It was so open ended, that I wasn’t sure exactly what I should do. I managed to come to the idea of depicting a storm. The user can interact with the program by pressing the mouse to show lightning or move the mouse left and right to portray how wind would behave.

Caption: The user moved to the left side, as the “wind”, which swayed the trees on the bottom left.

Caption: The user clicked the mouse and the lightning appeared.

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

 

elizabew – project – 11 – composition

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 11

var myTurtle = [];//array to store turtles
var movingTurtle = []; //array to store moving turtle
var d = 100; //degrees to keep movingTurtle moving
var dl = 50;//degrees to keep movingTurtle moving

function setup() {
  createCanvas(480, 480);
  background(32,50,103);
  frameRate(10);
}

function draw() {
  for(var i = 0; i < movingTurtle.length; i++) {
    //moving "bats"
    movingTurtle[i].setColor(color(25,61,mouseX));
    movingTurtle[i].setWeight(.5);
    movingTurtle[i].penDown();
    movingTurtle[i].forward(10);
    movingTurtle[i].right(d);
    movingTurtle[i].forward(2);
    movingTurtle[i].left(dl);
    movingTurtle[i].forward(15);
    d = d + 5; //makes the turtle move around the canvas continuously
    dl = dl + 2;
  }

  for(var i = 0; i < myTurtle.length; i++) {
    myTurtle[i].setColor(color(255,248,193));
    myTurtle[i].setWeight(2);
    myTurtle[i].penDown();
    myTurtle[i].forward(20); //flower/star shape
    myTurtle[i].right(90);
    myTurtle[i].forward(40);
    myTurtle[i].right(45);
    if (i % 10 == 0) { //every 10, large star
      myTurtle[i].setColor(color(255,224,9));
      myTurtle[i].forward(50);
      myTurtle[i].left(180);
  }
}

}

function mousePressed() {
  myTurtle.push(makeTurtle(mouseX, mouseY));//turtle appears when mouse is pressed
}

function mouseDragged(){
  movingTurtle.push(makeTurtle(mouseX, mouseY)); //turtle follows mouse dragging
}

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

Image using only mousePressed
Image using both mousePressed and mouseDragged

For this project, I wanted to create turtles that look like stars in the night sky, while also adding texture that could imitate fog. I made it so that the fog would change color as well in order to somewhat mirror the way fog changes tone depending on where the light source is.

At first I drew different star patterns on paper and then transferred my two favorite into the program. I made it so that smaller stars appear more often than the larger stars in an effort to imitate the “north star” with smaller stars surrounding it. I’m fairly happy with how it turned out, but if I could, it might have been fun to play with adding more visually different stars into the mix.

NatalieKS-Project-11

snow

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-11

//coordinates for the falling snowflakes
//adapted from code here:
//http://alpha.editor.p5js.org/projects/rkBAHA3h
var position = {
    x: 133,
    y: 68
};
//to help move the snowflakes
var gravity = 1;

//--------TURTLE FUNCTIONS-------
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(480, 480);
    frameRate(10);
    background(138, 172, 224);
}

function draw() {
    fill(255);
    noStroke();
    //create the snowflakes in the background
    var transparency = random(10, 255);
    fill(255, transparency);
    position.x = random(0, width);
    position.y = random(0, 400);
    ellipse(position.x, position.y, 5, 5);
    //left snow hill
    ellipse(0, height, 300, 300);
    //right snow hill
    ellipse(width, height, 300, 300);
    //left middle snow hill
    ellipse(175, height, 200, 200);
    //right middle snow hill
    ellipse(300, height, 250, 250);

}

function mousePressed() {
  var posY = mouseY;
  //set the snowflake
  var snowflake1 = makeTurtle(mouseX, posY);
  posY += 1;
  snowflake1.penDown();
  snowflake1.setColor(255);

//draw snowflakes; used the turtle graphics template from the
//Turtle Graphics page on the website
      for (var i = 0; i < 200; i++) {
          snowflake1.forward(40);
          snowflake1.left(190);
          snowflake1.forward(10);

          if (i % 30 == 0) {
              snowflake1.forward(20);
          }
      }
}

For this project, I was inspired by something that happened today: it snowed! Well, barely, but I was still really excited. I started playing around with the turtle, moving it forward and right and such to see what kind of shape it would give me, and I ended up with a snowflake-like shape. I really like the outcome of this project, I think the background with the snowflake-turtle looks really pretty! As time goes on, the background will be (almost) completely filled by the background “snowflakes,” so it looks like a snowstorm.

Here is what it looks like after some time:

daphnel-Project 11-Composition

Composition

var turtle;
var turtles=[];
var nTurtles=10;
var s;
var r;
var g;
var b;

function setup(){
    createCanvas(480,480);
    background(0);
    frameRate(10);
    //background before the black and white turtles appear
    var turtle=makeTurtle(width/2,height/2);
    turtle.setColor(color(255,255,0,100));
    turtle.setWeight(1);
    turtle.penDown();
    var goldenRatio=1+sqrt(5)/2;
    for(var i=0; i<150; i++){
    var s=5;
    turtle.right(60*goldenRatio);
    turtle.forward(s*i);
    }
}

function draw(){
    for(var i=0; i<turtles.length; i++){
        var step=random(-3,3);
        turtles[i].setWeight(i*3);
        var r=random(100,255);
        var g=random(150,255)
        var b=random(150,255)
        turtles[i].setColor(r,g,b);
        turtles[i].penDown();
        turtles[i].forward(step*i);
        turtles[i].left(25);
        turtles[i].penUp();
    }
}
function mousePressed(){
    //click to make turtles appear
    turtles.push(makeTurtle(mouseX,mouseY));

}
function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

While I was experimenting with the golden ratio assignment previously, I was able to make some interesting designs as I played around with the code. I decided to use one of them as a basis for my background. This code starts off with a canvas with a patterned background. When you click on the canvas, turtles are made. I tend to like it when the entire canvas is covered by something and is constantly flickering like lights.

amui1-LookingOutwards-11

For this week’s Looking Outwards, I researched the Japanese artist, Notuv.

Caption: Above, he is pictured playing at one of his live sets.

I specifically chose to do my Looking Outwards on his piece, Fucertc, released in 2013. It can be found in the video below:

I admire Notuv and this piece because he combines sound control with a unique visual design. He controls the sound with a program called MaxMSP and the visuals with OpenFrameworks. I particularly admire this piece, Fucertc because he uses such a minimalistic approach with only a 2 step “vibe” and percussional sounds. I also like how as each measure comes, there is a new sound introduced, but with the same consistent background beat. The full writeup for Fucertc can be found here.

merlebac Project-11

Turtle Composition

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-11

var turtle1;
var turtle2;
var turtle3;
var turtle4;

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(480, 480);
    background(125);

    var color1 = (255, 255, 0);
    // Creates yellow color
    turtle1 = makeTurtle(0, height / 2);
    // Creates the first turtle
    turtle1.penDown();
    turtle1.setColor(color1);
    turtle1.setWeight(4);
    // Prepares turtle for movement

    var color2 = (255, 0, 0);
    // Creates red color
    turtle2 = makeTurtle(width, height / 2);
    // Creates second turtle
    turtle2.penDown();
    turtle2.setColor(color2);
    turtle2.setWeight(4);
    // Prepares turtle for movement

    var color3 = (0, 255, 0);
    // Creates green color
    turtle3 = makeTurtle(width / 2, 0);
    // Creates third turtle
    turtle3.penDown();
    turtle3.setColor(color3);
    turtle3.setWeight(4);
    // Prepares turlte for movement

    var color4 = (0);
    // Creates black color
    turtle4 = makeTurtle(width / 2, height);
    // Creates fourth turtle
    turtle4.penDown();
    turtle4.setColor(color4);
    turtle4.setWeight(4);
    // Prepares turtle for movement
}

function draw() {
    turtle1.forward(1);
    // Moves turtle1 forward
    turtle1.turnToward(mouseX, mouseY, 1);
    // Turns turtle1 toward mouse

    turtle2.forward(1);
    // Moves turtle2 forward
    turtle2.turnToward(480 - mouseX, mouseY, 1);
    // Turns turtle2 away from mouseX toward mouseY

    turtle3.forward(1);
    // Moves turtle3 forward
    turtle3.turnToward(mouseX, 480 - mouseY, 1);
    // Turns turtle3 toward mouseX away from mouseY

    turtle4.forward(1);
    // Moves turtle4 forward
    turtle4.turnToward(480 - mouseX, 480 - mouseY, 1);
    // Turns turtle4 away from mouse
}

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

Overall this project wasn’t that difficult. I decided to have the turtles movements based on the location of the mouse. Each of them have different interactions with the mouse.

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/