Category: Section B

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-10

var people = [];


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of people
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        people[i] = makePeople(rx);
    }
}


function draw() {
    background(240); 

    updateAndDisplaypeople();
    removepeopleThatHaveSlippedOutOfView();
    addNewpeopleWithSomeRandomProbability(); 

    //belt
    fill(180);
    rect(-5, 190, 500, 110);
    push();
    translate(-100, 0);
    for (var i = 0; i < 20; i++) {
        stroke(100);
        line((i + 3) * 50, 190, i * 50, 300);
    };
    pop();
    stroke("pink");
    line(0, 190, 480, 190);
    line(0, 297, 480, 297);

    //draw sushi bottom
    noStroke();
    fill(255);
    beginShape();
    curveVertex(180, 250);
    curveVertex(250, 240);
    curveVertex(300, 260);
    curveVertex(250, 270);
    endShape(CLOSE);

    //draw sushi top
    fill(255, 160, 160);
    beginShape();
    curveVertex(150, 240);
    curveVertex(170, 235);
    curveVertex(240, 220);
    curveVertex(300, 230);
    curveVertex(330, 260);
    curveVertex(240, 250);
    curveVertex(150, 260);
    endShape(CLOSE);

    //draw lines above sushi
    stroke(255, 201, 201);
    strokeWeight(7);
    line(200, 230, 220, 246);
    line(160, 240, 175, 252);
    line(240, 222, 265, 245);
    line(280, 225, 315, 256);

}


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


function removepeopleThatHaveSlippedOutOfView(){
    // If a people has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find people
    // to remove. The tricky 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 people
    // we want to keep into a new array.
    var peopleToKeep = [];
    for (var i = 0; i < people.length; i++){
        if (people[i].x + people[i].breadth > 0) {
            peopleToKeep.push(people[i]);
        }
    }
    people = peopleToKeep; // remember the surviving people
}


function addNewpeopleWithSomeRandomProbability() {
    // With a very tiny probability, add a new people to the end.
    var newPeopleLikelihood = 0.007; 
    if (random(0,1) < newPeopleLikelihood) {
        people.push(makePeople(width));
    }
}


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

// draw the people and some windows
function peopleDisplay() {
    fill(255); 
    stroke(0); 
    strokeWeight(5);
    push();
    translate(this.x, height - 100);
    //people outline
    fill(255, 235, 222);
    ellipse(0, 0, this.breadth, this.breadth);
    //eyes
    fill(255);
    strokeWeight(3);
    ellipse(-30, -50, 30, 30);
    ellipse(30, -50, 30, 30);
    fill(0);
    ellipse(-30, -40, 5, 5);
    ellipse(30, -40, 5, 5);
    pop();
}


function makePeople(birthLocationX) {
    var ppl = {x: birthLocationX,
                breadth: random(150, 300),
                speed: -1.0,
                move: peopleMove,
                display: peopleDisplay}
    return ppl;
}

When I first saw this assignment, it reminded me of the conveyor belt sushi right away. However, instead of letting the sushi move in front of a static human, I decided to let the sushi stay. For the generative background, I wanted to learn it since the abstract clock project. It took me some time to figure out how the generative code works, but it is definitely easier than I expected. As a result, it turns out pretty well. If I have more time to work on it, maybe I would do another layer of a background behind the “people”. Overall, it’s a super fun project to do.

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-10
//global variables
var thethings = [];
var boomSpeed = 0.005;
var boomDetail = 0.05;

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

    // create an initial collection of thethings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        thethings[i] = makeThethings(rx);
    }
    frameRate(10);
   
}
 
function draw() {
    //background(70,223,191);
    background(0);
    makeBooms(); 

    //display the things (ellipses)
    updateAndDisplayThethings();
    removeThethingsThatHaveSlippedOutOfView();
    addNewThethingsWithSomeRandomProbability(); 
    //display speaker
    makeSpeaker();

}

function makeBooms(){
    noStroke();
   /* 
    //1st boom
    //fill(51,194,248);
    //fill(0);
    noFill();
    strokeWeight(1);
    //stroke(160,240,19);
    stroke(247,223,90);
    beginShape(); 
    vertex(-10,height);
    for (var x = 0; x < width; x++) {
        var t = (x * boomDetail*3) + (millis() * boomSpeed*20);
        var y = map(noise(t), 0, 1 , 200, height); 
        //4th num ++=more straight, --= more abrubt
        //last num ++=lower, --= higher 
        vertex(x ,y/6); // y++ = lower, y -- = higher  
    }
    vertex(width+10,height);
    endShape();

   //2nd boom
    fill(0);
    //noFill();
    strokeWeight(1.2);
    //stroke(160,240,19);
    stroke(70,223,191);
    beginShape(); 
    vertex(-10,height);
    for (var x = 0; x < width; x++) {
        var t = (x * boomDetail) + (millis() * boomSpeed*20);
        var y = map(noise(t), 0, 1 , 200, height); 
        //4th num ++=more straight, --= more abrubt
        //last num ++=lower, --= higher 
        vertex(x ,y/4); // y++ = lower, y -- = higher  
    }
    vertex(width+10,height+10);
    endShape();
*/
    // 3rd boom
    fill(160,240,19);
    
    //noFill();
    strokeWeight(5);
    //stroke(160,240,19); // green 
    stroke(70,223,191);
    beginShape(); 
    vertex(-10,height);
    for (var x = 0; x < width; x++) {
        var t = (x * boomDetail) + (millis() * boomSpeed*20);
        var y = map(noise(t), 0, 1 , 100 , height); 
        //4th num ++=more straight, --= more abrubt
        //last num ++=lower, --= higher 
        vertex(x ,y/2); // y++ = lower, y -- = higher  
    }
    vertex(width+10,height);
    endShape();

    // 4th boom 
    //fill(70,223,191); turqoise
    fill(0);
    //noFill();
    strokeWeight(3);
    stroke(160,240,19); green
    //stroke(254,112,99); // orange 
    //stroke(255);
    beginShape(); 
    vertex(-10,height);
    for (var x = 0; x < width; x++) {
        var t = (x * boomDetail+10) + (millis() * boomSpeed*20);
        var y = map(noise(t), 0, 1 , 0 , height-90); 
        //4th num ++=more straight, --= more abrubt
        //last num ++=lower, --= higher 
        vertex(x ,y); // y++ = lower, y -- = higher  
    }
    vertex(width+10,height*2);
    endShape();
}


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


function removeThethingsThatHaveSlippedOutOfView(){
    var thethingsToKeep = [];
    for (var i = 0; i < thethings.length; i++){
        if (thethings[i].x + thethings[i].breadth > 0) {
            thethingsToKeep.push(thethings[i]);
        }
    }
    thethings = thethingsToKeep; // remember the surviving things
}


function addNewThethingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new thing to the end.
    var newThethingsLikelihood = 0.007; 
    if (random(0,1) < newThethingsLikelihood) {
        thethings.push(makeThethings(width));
    }
}


// update position of thethings every frame
function thethingsMove() {
    this.x += this.speed;
}
    
// draw the thethings
function thethingsDisplay() {
    var floorHeight = 10;
    var thethingsX = random(0,300);
    var size1 = random(5,25);
    var size2 = random(2,20);
    var size3 = random(15,30);
    var bHeight = this.nFloors * floorHeight;  
    var transheight = random(20,height)

// making the things 
    push();
    translate(this.x, height - 50);
    noFill();
    stroke(160,240,19);
    strokeWeight(1.5);
    ellipse(thethingsX, -bHeight/4, size1 , size1);
    stroke(70,223,191);
    ellipse(thethingsX, -bHeight/4, size2 , size2);
    //stroke(80,93,255);
    //ellipse(thethingsX, -bHeight+95, size3 , size3);
    //line(thethingsX, -bHeight+90,thethingsX+20, -bHeight+90,)
    pop();
}


function makeThethings(birthLocationX) {
    var tt = {x: birthLocationX,
                breadth: .8,
                speed: -1,
                nFloors: round(random(10,12)),
                move: thethingsMove,
                display: thethingsDisplay}
    return tt;
}



function makeSpeaker (){

// the ellipses 
       /* strokeWeight(0.5);
        stroke(160,240,19);
        noFill();
        ellipse(width/2, height-50,250,40);
        ellipse(width/2, height-50,270,47);
        ellipse(width/2, height-50,290,55);
        ellipse(width/2, height-50,310,62);
        ellipse(width/2, height-50,330,68);
        ellipse(width/2, height-50,350,73);
        ellipse(width/2, height-50,370,77);
*/


    
    noStroke();
    fill(244,93,255);   // pink pill shape 
    rectMode(CENTER); 
    rect(width/2,height-80,235,60,30);
    fill(80,93,255);    // blue 
    rect(width/2,height-80, 40, 60 ); // blue middle part 
    noFill();
    strokeWeight(6);
    stroke(244,93,255);   // pink 'b'
    ellipse(width/2,height-75,15,15);
    line(232,height-95,232,height-75);
    stroke(80,93,255);  // the O s 
    ellipse(150,height-80,25,25);
    ellipse(190,height-80,25,25);
    ellipse(285,height-80,25,25);
    ellipse(325,height-80,25,25);
    strokeWeight(5);
    line(160,220,180,220);  // -
    line(290,220,310,220); //+
    line(300,210,300,230);  //+
    
}

This project was very fun but also challenging for me since the concept was open-ended.  The terrain reminded me of the waves of sound so I decided to create a ‘landscape of sound’. The result did not come out like my initial idea, but I enjoyed the process of choosing vibrant colors. I didn’t delete some of the codes I previously wrote so that I (or anyone) can try different variations of the landscape in the future.

These are some of the different styles I tried.

My initial sketch in Adobe Illustrator.