Category: Uncategorized

Seaquence is a musical social experiment from Grey Area Labs, created by Gabriel Dunne, Ryan Alexander, and Daniel Massey. The core interface of Seaquence is appropriately a sequencer, which users can compose short compositional loops with. These compositions are assigned to “organisms” which physically reflect the audio qualities of the music they emit, such as pitch, frequency, and the sostenuto of notes. These organisms congregate in the radius of a central point in their canvas-like “environment”. The more organisms in proximity to another, the more dynamic the music arrangement becomes.

As stated, the algorithms in this project takes proximity, timing, and “drunken walk” progressions into consideration. The nature of organism movement is reminiscent of the responsive “worm” lab from several weeks ago.

I am incredibly drawn to this project, and this Looking Outwards post took me forever to complete because I spent so much time playing with Seaquence.  I think I gravitate towards this piece because of its ability to create such elaborate compositions through such a simple interface. Its ease of use is incredible and empowering.

From these observations, I find it reasonable to assume that the collaborators on this project shared similarly aligning design sensibilities. There is an emphasis on minimalism to achieve complexity. This consideration of both micro and macro levels of interaction make an understanding of intuitive human interaction evident.

the project

grey area labs

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-10: Generative Landscape
*/
var trees  = [];
var hillSpeed = 0.00005;
var hillDetail = 0.005;

function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of 30 trees
    for (var i = 0; i < 30; i++){
        //sets random birthplaceX for trees 
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
    frameRate(100);
}


function draw() {
    background(66, 131, 244); 
    //sun
    noStroke();
    fill(225, 145, 90);
    ellipse(width-55, 40, 45, 45);
    drawHill();
    updateAndDisplay();
    removeOutOfView();
    addTrees();

}

function drawHill(){
    noStroke();
    fill('green');
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++){
        var h = (x * hillDetail)+ (millis() * hillSpeed);
        var y = map(noise(h), 0, 1, 0, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape();
}

function updateAndDisplay(){
    // Update the trees's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function removeOutOfView(){
    // If a tree has dropped off the left edge,
    // remove it from the array.  Copy all the buildings
    // we want to keep into a new array.
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the surviving buildings
}

function addTrees() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.007; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

// method to update position of tree every frame
function treeMove() {
    this.x += this.speed;
}
    
// draw the tree
function treeDisplay() {
    var totalBushHeight = this.nBush * this.bushHeight
    noStroke(); 
    push();
    translate(this.x, height-100);
    for (var i = this.nBush; i > 1; i = i - 1) {
        fill(14, 100-(i*5), 39); 
        triangle(0, i * this.bushHeight, this.breadth, i * this.bushHeight, this.breadth/2, (i-1)*(this.bushHeight-5));
        }
    fill('brown');
    rect(this.breadth / 4 + 2.5,totalBushHeight,5,8)
    pop();
}

function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                breadth: 20,
                speed: -1.0,
                nBush: round(random(2,5)),
                move: treeMove,
                display: treeDisplay,
                bushHeight: 10}
    return tree;
}

This was a really challenging exercise. Sadly, there was a lot I wanted to do but just couldn’t seem to figure out. Ideally, the shape of the hills would’ve matched the position of the trees but because the X placement of the trees from the beginning was random, I couldn’t create a linkage by chronological order of birth (a for loop would’ve been great for that).
I think I definitely have a better understanding of objects and creating generative landscape images, a far cry from past projects generative art.

Original Sketch

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-10


var cake = [];


function setup() {
    createCanvas(480, 480); 
    
    // the initial collection of cake
    for (var i = 0; i < 10; i++){ //automatically counts up
        var rx = random(width);
        cake[i] = makeCake(rx);
    }
    frameRate(100);
}


function draw() {
    background(80,177,198); 
    
    
    displayHorizon();

    updateAndDisplayCake();
    removeCakeThatHaveSlippedOutOfView();
    addNewCakeRandomly(); 

    //bottom table
    fill(225,229,194);
    stroke(0);
    strokeWeight(3);
    rect(0,430,480,100);

    //bear eating cake
    //bear head
    fill(225,229,194);
    stroke(0);
    noStroke();
    ellipse(50,350,150,150);
    //bear ear
    fill(225,229,194);
    ellipse(30,260,50,80);
    //bear cheek
    fill(225,200,190);
    ellipse(30,350,50,50);
    //bear mouth
    fill(80,177,198);
    ellipse(100,380,60,50);
    //bear eye
    fill(0);
    ellipse(80,330,30,30);
    fill(255);
    ellipse(80,320,10,10);
    //bear nose
    fill('red');
    ellipse(120,340,20,20);
    //bear hand
    fill(225,229,194);
    
    ellipse(50,430,80,20);
    

}


function updateAndDisplayCake(){
    // Update the cake's positions, and display them.
    for (var i = 0; i < cake.length; i++){
        cake[i].move();
        cake[i].display();
    }
}


function removeCakeThatHaveSlippedOutOfView(){
    
    var cakeToKeep = [];
    for (var i = 0; i < cake.length; i++){
        if (cake[i].x + cake[i].breadth > 0) {
            cakeToKeep.push(cake[i]);
        }
    }
    cake = cakeToKeep; // remember the surviving buildings
}


function addNewCakeRandomly() {
    // With a small margin of probability, add another cake
    var newCakeLikelihood = 0.010; 
    if (random(0,1) < newCakeLikelihood) {
        cake.push(makeCake(width));
    }
}



function cakeMove() {
	// update cake position
    this.x += this.speed;
}
    

// draw cake
function cakeDisplay() {
    var cakeHeight = 40;
    fill(255); 
    noStroke(); 
    push();
    translate(this.x, height - 40);

    //cake bottom
    fill(197,174,135);
    rect(40,-cakeHeight,50,30);

    //cake middle
    fill(220,157,155);
    rect(40,-cakeHeight -50,50,60);
    //cake middle
    fill(220,157,155);
    rect(40,-cakeHeight -50,50,60);

    //cake top
    fill(197,174,135);
    rect(40,cakeHeight-150, 50,60);

    //cake frosting
    fill(250);
    rect(40,cakeHeight-150, 50,10);
    
 

  
    pop();
}


function makeCake(birthLocationX) {
    var cake = {x: birthLocationX,
                breadth: 10,
                speed: -0.5,
                move: cakeMove,
                display: cakeDisplay}
    return cake;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

For this assignment I just wanted to do a conveyor belt with a bear eating cake that came at different lengths.

As seen in the sketch below, I wasn’t able to add toppings to the cake or get the cake to disappear as it entered the bear’s mouth. If I were to go back and edit the script, I would make it so that the vanishing point is set at the bear’s mouth and not the edge of the canvas.

Who lives in a pineapple under the sea

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-10
}
*/
var Pineapples = [];
var col;
var frameB = 1;
var bubbles= [];


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

    // create an initial collection of Pineapples
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        Pineapples[i] = makePineapple(rx);
    }
    for (var i = 0; i < 20; i++) {
    	var newBub = makeBubbles(random(width));
    	bubbles.push(newBub);
    }
    frameRate(38);
}


function draw() {

    background(243,233,126);
    displayHorizon();
    waveOne();
    waveTwo();
    waveFour();
    waveThree();

    updateAndDisplayPineapples();
    removePineapplesThatHaveSlippedOutOfView();
    addNewPineapplesWithSomeRandomProbability();
    for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].draw();
		bubbles[i].move();

//adds the new bubbles
    if ((frameB % 5 == 0) & (random(1) < .2)) {
		newBub = makeBubbles(width);
		bubbles.push(newBub);

	}
	}
}

function waveOne(){
  var waterSpeed = 0.0002;
  var waterDetail = 0.004;
  stroke(100,200,254);
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * waterDetail/4) + (millis() * waterSpeed*2);
      var y = map(noise(t), 0, 1, 0, 100);
      line(x, y, x, height);
  }
  endShape();
}


function waveTwo(){
  var waterSpeed = 0.0002;
  var waterDetail = 0.004;
  stroke(20,100,254,70);
  push();

  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * waterDetail) + (millis() * waterSpeed*2);
      var y = map(noise(t), 0, 1, 100, 140);
      line(x, y, x, height);
  }
  endShape();
  pop();
}
function waveFour(){
  var waterSpeed = 0.0002;
  var waterDetail = 0.004;
  stroke(20,100,254,70);
  push();
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * waterDetail/6) + (millis() * waterSpeed*2);
      var y = map(noise(t), 0, 1, 100, 300);
      line(x, y, x, height+400);
  }
  endShape();
  pop();
}

function waveThree(){
  var waterSpeed = 0.0002;
  var waterDetail = 0.004;
  stroke(198,186,146);
  push();
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * waterDetail/6) + (millis() * waterSpeed/6);
      var y = map(noise(t), 0, 1, 200, 300);
      line(x, y+160, x, height+150);
  }
  endShape();
  pop();
}

function updateAndDisplayPineapples(){
    // Update the Pineapple's positions, and display them.
    for (var i = 0; i < Pineapples.length; i++){
        Pineapples[i].move();
        Pineapples[i].display();
    }
}

function makeBubbles(origin) {
	var bubble = {
		x: origin,
		y: random(height),
		velX: random(-2, 1.5),
		velY: random(-3, 1),
		sizeF: random(20),
		draw: drawBubble,
		move: moveBubble
	}
	return bubble;
}

function removePineapplesThatHaveSlippedOutOfView(){
    // If a Pineapple has dropped off the left edge,
    // remove it from the array.  This is quite Cutcky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find Pineapples
    // to remove. The Cutcky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the Pineapples
    // we want to keep into a new array.
    var PineapplesToKeep = [];
    for (var i = 0; i < Pineapples.length; i++){
        if (Pineapples[i].x + Pineapples[i].breadth > 0) {
            PineapplesToKeep.push(Pineapples[i]);
        }
    }
    Pineapples = PineapplesToKeep; // remember the surviving Pineapples
}


function addNewPineapplesWithSomeRandomProbability() {
    // With a very tiny probability, add a new Pineapple to the end.
    var newPineappleLikelihood = 0.01;
    if (random(0,1) < newPineappleLikelihood) {
        Pineapples.push(makePineapple(width));
    }
}
//draws the bubbles that appear at beginning
function drawBubble() {
  noFill();
  strokeWeight(2);
	stroke(255, 255, 255, 80);
	ellipse(this.x, this.y, this.sizeF * 1.5, this.sizeF * 1.5);
}

function moveBubble() {
	this.x -= 1.5;
	this.x += this.velX;
	this.y += this.velY;
}


// method to update position of Pineapple every frame
function PineappleMove() {
    this.x += this.speed;
}


// draw the Pineapple decorations door and leaves
function PineappleDisplay() {

    var CutHeight = 20;
    var bHeight = this.nCuts * 20;
    // var bWidth = this.nCuts * 30;

    push();

    noStroke();
    //draws leaves of Pineapple
    fill(155,182,59);
    translate(this.x, height - 40);
    rect(10,-bHeight-20,this.breadth/2,bHeight,30);
    rect(30,-bHeight-20,this.breadth/2,bHeight,30);

    fill(122,167,59);
    rect(40,-bHeight-30,this.breadth/4,bHeight);

    fill(122,167,59);
    rect(20,-bHeight-30,this.breadth/2,bHeight,30);

    fill(122,167,59);
    rect(40,-bHeight-50,this.breadth/4,bHeight,20);

    fill(88,150,59);
    rect(10,-bHeight-40,this.breadth/4,bHeight);

    fill(88,150,59);
    rect(15,-bHeight-50,this.breadth/4,bHeight,10);

    fill(61,150,59);
    rect(30,-bHeight-60,this.breadth/4,bHeight);

    //draws the actual pineapple
    fill(255,196,74);
    stroke(230,170,50);
    strokeWeight(2);
    rect(0,-bHeight, this.breadth+15,bHeight,40);

    //draw the decorations of the pineapple/grooves
    noStroke();
    fill(230,170,50);
      ellipse(18,-20,10,10);
      ellipse(33,-20,10,10);
      ellipse(48,-20,10,10);
      ellipse(33,-40,10,10);
      ellipse(18,-40,10,10);
      ellipse(48,-40,10,10);
      ellipse(33,-60,10,10);
      ellipse(18,-60,10,10);
      ellipse(48,-60,10,10);
    //draws the door of the pineapple
    fill(0)
      rect(20,-bHeight/2, 20,40,20)

    pop();

}


function makePineapple(LocationX) {
    var pin = {x: LocationX,
                breadth: 50,
                speed: -1.0,
                nCuts: round(random(4,7)),
                move: PineappleMove,
                display: PineappleDisplay}
    return pin;
}

function displayHorizon(){
  function setup() {
}

}

I had a lot of fun with this project! I really loved Spongebob as a child and I was really excited to have a reason to do this subject because of the wavelike forms the the terrain tool given to us creates. If I had more time I would make the pineapple details look more like pineapples and maybe include a random sponge bob around!