Category: SectionE

sketch

// Jina Lee
// jinal2@andrew.cmu.edu
// Project 11
// Section E

var sushi = [];
var count = 0;
var riceSize = 70;

function setup() {
    createCanvas(480, 280);
    // for loop to create the sushi
    for (var i = 0; i < 5; i += 20){
        sushi[i] = makeSushi(width);
    }
    frameRate(120);
}


function draw() {
    count += 1;
    // beige
    background(207, 185, 151);
    sushiText();
    sushiConveyorBelt();
    updateAndDisplaySushi();
    removeSushiThatHaveSlippedOutOfView();
    addNewSushiConstantly();
}

function sushiText(){
    // frame for sign
    fill(150, 0, 0);
    rect(340, 22, 120, 48, 5);
    // white sign
    fill(255);
    rect(350, 28, 100, 35, 5);
    // turned on open sign
    fill(150, 0, 0);
    textSize(18);
    text("OPEN", 370, 52);
    // menu
    fill(255);
    rect(50, 22, 250, 150);
    fill(0);
    textSize(30);
    text("menu", 70, 60);
    stroke(0);
    strokeWeight(3);
    line(75, 100, 240, 100);
    line(75, 80, 280, 80);
    line(75, 90, 280, 90);
    line(75, 110, 280, 110);
    line(75, 120, 100, 120);
    line(75, 130, 240, 130);
    line(75, 140, 240, 140);
    line(75, 150, 280, 150);
}

function updateAndDisplaySushi(){
    for (var i = 0; i < sushi.length; i++){
        sushi[i].move();
        sushi[i].display();
    }
}


function removeSushiThatHaveSlippedOutOfView(){
    var sushiToKeep = [];
    for (var i = 0; i < sushi.length; i++){
        if (sushi[i].x + sushi[i].breadth > -200) {
            sushiToKeep.push(sushi[i]);
        }
    }
    sushi = sushiToKeep;
}

// keeps adding sushi to the end
function addNewSushiConstantly() {
    if (count > 270) {
        sushi.push(makeSushi(width));
        count = 0;
    }
}

// update sushi position every frame
function sushiMove() {
    this.x += this.speed;
}

// draw the sushi
function sushiDisplay() {
    var Height = 30;
    fill(255);
    noStroke();
    push();
    translate(this.x, height - 40);
    // plate
    fill(161, 206, 94);
    ellipse(35, -Height/7, 110, 30)
    rect(5, 5, 60, 10);
    // rice
    fill(255);
    rect(0, -Height, riceSize, 30);
    // eel
    fill(139,69,19);
    rect(0, -Height - 20, riceSize, 20);
    // seaweed
    fill(0);
    rect(25, -Height - 20, riceSize/4, 20);
    // plate
    fill(16, 52, 166);
    ellipse(175, -Height/7, 110, 30);
    rect(145, 5, 60, 10);
    // rice
    fill(255);
    rect(140, -Height, riceSize, 30);
    // tuna
    fill(234, 60, 83);
    rect(140, -Height - 20, riceSize, 20);
    pop();
}

function makeSushi(birthLocationX) {
    var sushi = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                move: sushiMove,
                display: sushiDisplay}
    return sushi;
}

function sushiConveyorBelt() {
    // grey
    stroke(200);
    strokeWeight(30);
    line (0, height - 10, width, height - 10);
}

For this project, I am creating a sushi conveyor belt. I was inspired because back home, there is an all you can eat sushi restaurant that has sushi on a conveyor belt. The sushi is what moves. I made the signs static so it seems as if you are sitting at the table watching the sushi pass through. I created eel and tuna sushi.

sketch

   //initialize variables
    var terrainSpeed = 0.0005;
    var terrainDetail = 0.005;
    var groundDetail= 0.005;
    var groundSpeed = 0.0005;
    var cactus = [];
    var col1, col2;

function setup() {
    createCanvas(480,480);
    frameRate(10);
    //start landscape out with 3 cacti
    for(i = 0; i < 3; i++){
      var rx = random(0,width);
      cactus[i] = makeCactus(rx);
}
}
 function draw (){
    //create gradient colors
    c1= color(255, 149, 0);
    c2= color(235, 75, 147);
    setGradient(c1, c2);
    
    //call functions 
    drawDesertMtn();
    updateCactus();
    removeCactus();
    addCactus();
}

function setGradient(c1, c2){
    //create the gradient background
  noFill();
  
  for(i = 0; i < height; i++){
    var grad = map(i, 0, height, 0, 1);
    var col = lerpColor(c1, c2, grad);
    stroke(col);
    line(0, i, width, i);
  }
}

function drawDesertMtn(){
    //back mtn 
    fill(255, 155, 84);
    noStroke();
    beginShape(); 
    //make the terrain randomize and go off screen
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,2, 50, height);
        vertex(x, y); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //middle mtn
    fill(245, 105, 98);
    noStroke();
    beginShape(); 
    //make the terrain randomize and go off screen
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 100, height);
        vertex(x, y); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //closest mtn
    fill(224, 54, 139);
    noStroke();
    beginShape(); 
    //make the terrain randomize and go off screen
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1,200,height);
        vertex(x, y); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //groud
    fill(165, 196, 106);
    noStroke();
    beginShape();
    //make the ground randomize and go off screen
     for (var x = 0; x < width; x++) {
        var t = (x * groundDetail) + (millis() * groundSpeed);
        var y = map(noise(t), 0, 1,400,480);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
}


//change x value of cactus as cactus moves
function moveCactus(){
    this.x += this.speed;
}

function makeCactus(cactusX){
    //create the cactus as an object w some random parts
    var cactus={
        x:cactusX,
        speed: -6,
        breadth:311,
        color: random(0,100),
        length: random(50,100),
        move: moveCactus,
        display: displayCactus,
    }
    return cactus;
}

function updateCactus(){
    //loop through an array of cactus to update as adding and moving
  for(i = 0; i < cactus.length; i++){
    cactus[i].move();
    cactus[i].display();
  }
}

function displayCactus(){
    //create the cactus visuals with object parts
    noStroke();
    fill(this.color, 107, 9);
    //translate to x value of new cactus
    push();
    translate(this.x+157, height-40);
    ellipse(0,0,94,137);
    fill(this.color, 107,9);
    ellipse(61, -52, this.length,48);
    fill(this.color, 115, 28);
    ellipse(47,-83,19,27);
    fill(90, 115, 22);
    ellipse(81, -74, 24,24);
    fill(90, 115, 22);
    ellipse(-34, -86, this.length, 74);
    fill(this.color, 115, 22);
    ellipse(-18, -131, 41,41);
    fill(252, 197, 247);
    //create flower on cactus
    beginShape();
    curveVertex(-1, -150);
    curveVertex(-7,-152);
    curveVertex(-7, -147);
    curveVertex(-10, -157);
    curveVertex(-5, -141);
    curveVertex(-4, -135);
    curveVertex(1, -140);
    curveVertex(8, -135);
    curveVertex(8, -142);
    curveVertex(8, -147);
    curveVertex(3, -148);
    curveVertex(3, -153);
    curveVertex(-1, -150);
    endShape();
    pop();
}

function addCactus(){
//add a new cactus to the array
  var newCactus = 0.01;
  if(random(0,1)< newCactus){
    cactus.push(makeCactus(width));
  }
    
}
function removeCactus(){
    //remove cactus from array as it goes off the screen
  var keepCactus = [];
  for(i = 0; i < cactus.length; i++){
    if(cactus[i].x + cactus[i].breadth > 0){
      keepCactus.push(cactus[i]);
    }
  }
  cactus = keepCactus;
}

I was inspired by desert landscapes in which the sun is setting and there are cacti as well as communicate the vastness of a place like joshua tree.ca.

sketch

//Margot Gersing - Project 11 - mgersing@andrew.cmu.edu - section E

var stars = [];
var terrainSpeedOne = 0.0002; //dark green moutain speed
var terrainSpeedTwo = 0.0004; // water speed
var terrainSpeedThree = 0.0006; // ligth green ground speed
var terrainDetailOne = 0.008; //green moutian
var terrainDetailTwo = 0.001; //water
var terrainDetailThree = 0.005; //light green moutain


function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //fills stars array
    for (var i = 0; i < 75; i ++){
        var strX = random(width);
        var strY = random(0, height / 2);
        stars[i] = makeStars(strX, strY);
    }
    
}

function draw() {
    background(214, 197, 204);
    //moon
    fill(169, 47, 35);
    ellipse(375, 100, 150, 150);
    displayStars(); //stars
    moutainTwo(); //background moutians
    water(); //water
    moutainThree(); //foreground
}

function moutainTwo() {
    noStroke();
    fill(22, 56, 32); //darkgreen
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailOne) + (millis() * terrainSpeedOne);
        var y = map(noise(t), 0, 1, 300, 250);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);

}

function water() {
    noStroke();
    fill(72, 90, 103); //blue
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailTwo) + (millis() * terrainSpeedTwo);
        var y = map(noise(t), 0, 2, 400, 300);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

function moutainThree() {
    noStroke();
    fill(110, 135, 84); //light green
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailThree) + (millis() * terrainSpeedThree);
        var y = map(noise(t), 0, 2, 500, 300);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

function drawStars(){ //what stars will look like
    noStroke();
    fill(201, 165, 180, 150);
    push();
    translate(this.x, this.y);
    ellipse (1, 10, 5, 5);
    pop();
}

function makeStars(strX, strY){ //stars object
    var star = {x: strX, 
                y: strY, 
                speed: -1, 
                move: moveStars, 
                draw: drawStars}
    return star;
}

function moveStars(){ //how stars move
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }

}

function displayStars(){ //display stars
    for(i = 0; i < stars.length; i++){
        stars[i].move();
        stars[i].draw();
    }
}

For this project I decided to go with mountain landscapes. I had a good time messing with colors to create something a little different. I also generated stars in the sky. I decided to make the stars transparent so they were more subtle and you could see them pass over the moon. I also made the objects further back move slower so it would imitate what you see when you look out the window.