Month: November 2018

Christine Chen-Project-10-Landscape

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-10-a
*/

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

function setup() {
    createCanvas(480, 180); 
    
    //initial collection of sushi
    for (var i = 0; i < 5; i += 20){
        sushi[i] = makeSushi(width);
    }

    frameRate(140);
}


function draw() {
    count += 1;
    background(247, 191, 201); //pink

    sushiText();
  
    sushiConveyorBelt();

    updateAndDisplaySushi();
    removeSushiThatHaveSlippedOutOfView();
    addNewSushiConstantly(); 
}

function sushiText(){
    //dark red banner
    fill(150, 0, 0);
    rect(33, 22, 155, 48)

    //bright red banner
    fill(239, 33, 33);
    rect(41, 28, 140, 35);

    //text
    fill(255); 
    textSize(18);
    text("おいしい寿司", 57, 52); 
}

function updateAndDisplaySushi(){
    // Update the sushi's positions, and display them.
    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; //remember surviving sushi
}

//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 for tofu sushi
    fill(255, 118, 96);
    ellipse(35, -Height/7, 110, 30)
    rect(5, 5, 60, 10);

    //tofu sushi
    fill(255, 118, 96); //plate for tofu sushi
    ellipse(35, -Height/7, 110, 30)
    rect(5, 5, 60, 10);

    fill(255); //white rice
    rect(0, -Height, riceSize, 30);

    fill(255, 244, 0); //yellow tofu
    rect(0, -Height - 20, riceSize, 20);

    fill(0); //black seaweed
    rect(25, -Height - 20, riceSize/4, 20);
    
    //sashimi sushi
    fill(111, 200, 221); //plate for sashimi sushi
    ellipse(175, -Height/7, 110, 30);
    rect(145, 5, 60, 10); 

    fill(255); //white rice
    rect(140, -Height, riceSize, 30);

    fill(255, 91, 0); //red meat
    rect(140, -Height - 20, riceSize, 20);

    fill(249, 221, 205); //meat texture
    var meatLineWidth = riceSize/12;
    rect(150, -Height - 20, meatLineWidth, 20);
    rect(170, -Height - 20, meatLineWidth, 20);
    rect(190, -Height - 20, meatLineWidth, 20);
    
    pop();
}

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

function sushiConveyorBelt(){
    stroke(221, 133, 152); //dark pink
    strokeWeight(30);
    line (0, height - 10, width, height - 10); 
}

I was inspired by the conveyor belts in Japanese restaurants that are used to serve sushis. Sushis are one of my favorite food in the world and so I was super excited to create the project. I made two sushis- salmon sashimi sushis and tamale sushis. I also created a sign that says in Japanese “yummy sushi” to give the image more of a Japanese sushi restaurant vibe. Even though I spent a lot of time adjusting the little details, seeing the sushis run on the page in the end makes me very, very, very  happy!

sketch

var tS1 = 0.0002;
var tD1 = 0.009;
var tS2 = 0.0005;
var tD2 = 0.0008;
var tS3 = 0.0006;
var tD3 = 0.001;

var balloons = [];
var frame  = 1;

function setup() {
    createCanvas(480, 340);
    // draw the balloons
    for (var b = 0; b < 20; b++) {
        var bx = random(width);
        var by = random(0, height / 2 + 30);
        balloons[b] = makeBalloons(bx, by);
    }
    frameRate(10);
}
 
function draw() {
    background(255, 220, 200);
    drawSand();
    drawWater();
    water2(); 
    foam();

    
    updateBalloons();
    addNewBalloonsWithSomeRandomProbability();
    
}

function drawSand() {
    beginShape(); 
    stroke(235, 200, 180);
    for (var x = 0; x < width; x++) {
        var t = (x * tD1) + (millis() * tS1);
        var y = map(noise(t), 0, 1, height / 6, height / 3);
        line(x, y, x, width); 
    }
    endShape();
}

function drawWater() {
    beginShape();
    stroke(153, 221, 255, 99);
    for(var i = 0; i < width; i++) {
        var t = (i * tD2) + (millis() * tS2);
        var y = map(noise(t), 0, 1, 20, height);
        line(i, y, i, width); 
    }
    endShape();
}

function water2() {
    beginShape();
    stroke(90, 194, 255, 50);
    for(var j = 0; j < width; j++) {
        var t = (j * tD3) + (millis() * tS3);
        var y = map(noise(t), 0, 1, 40, height);
        line(j, y, j, width); 
    }
    endShape();
}

function makeBalloons(originX) {
    var balloon = {
             xP: originX,
             yP: random((height / 2 + 50), height),
             speedX: random(-1.5, 0.25),
             speedY: random(-0.5, 0.5),
             sizes: random(15, 30),
             draw: drawballoons,
             move: balloonsMove
        }
    return balloon;
}

function updateBalloons() {
    for (var o = 0; o < balloons.length; o++){
        balloons[o].draw();
        balloons[o].move();   
    }
}

function drawballoons(x, y){
    fill(255, 255, 255, 90);  
    noStroke();
    ellipse(this.xP, this.yP, this.sizes, this.sizes);
}

function balloonsMove() {
    this.xP += this.speedX;
    this.yP += this.speedY;
    if (this.xP < 0 || this.yP > height) {
        xPos = width;
        this.speedX = random(-2.5, -0.5);
        this.speedY = random(-0.25, 1.5);
    }
}


function addNewBalloonsWithSomeRandomProbability() {
    var newBalloonLikelihood = 0.01; 
    if (random(0,1) < newBalloonLikelihood) {
        balloons.push(makeBalloons(width));
    }
}

function foam() {
    beginShape();
    stroke(255, 255, 255, 90);
    for (var f = 0; f < width; f++) {
        var t = (f * tD3) + (millis() * tS3);
        var Y = map(noise(t), 0, 1, 40, height);
        vertex(f, Y - 5);
        vertex(f, Y + 5);
    }
    endShape();
}

This project was fun for me, but also proved to be challenging as I tried to make everything move the way I wanted to (this is primarily because I find it hard to “control” a fairly randomized generative piece).

After making a few quick sketches as to what I wanted the landscape to look like, I ultimately chose this layout. I wanted to make a landscape reminiscent of watching the waves crash on the beach but can be seen in two different ways: if you view it with the blue facing down, it looks like waves with wet sand in the back, but if you view it with the tan facing down, it looks like a mountain range and a sky.

I would like to revisit this idea of a generative landscape, as I didn’t quite get this piece where I wanted it to be and want to explore it more.