Author: hmeng@andrew.cmu.edu

hmeng-project-11

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-11-Generative Landscape

var sushi = [];

function setup() {
    createCanvas(480, 480);
    frameRate(50);
    //set an initial group of sushi
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        sushi[i] = makeSushi(rx);
    }
}

function draw() {
    background(255, 200, 200);
    
    //the lattern
    fill(30);
    rect(60, 20, 40, 160);
    rect(78, 0, 5, 20)
    
    fill(235, 70, 70);
    stroke(235, 70, 70);
    strokeWeight(50);
    rect(60, 60, 40, 80)
    noStroke();
    
    //ribs on lattern
    for(i = 0; i < 8; i++){
        fill(120, 0, 0);
        rect(35, 57 + i * 12, 90, 1.5);
    }

    //the belt
    fill(50);
    rect(0, 320, width, 80);
    fill(180);
    rect(0, 400, width, 10);

    //the table
    fill(255, 237, 199);
    rect(0, 410, width, 190);

    //the plate
    fill(255);
    ellipse(170, 440, 300, 40);
    fill(220);
    ellipse(180, 435, 200, 20);
    fill(250);
    ellipse(186, 438, 180, 20);

    //thie chopsticks
    fill(250);
    rect(385, 435, 35, 10);
    fill(128, 55, 0);
    quad(400, 430, 405, 430, 455, 480, 443, 480);
    fill(128, 55, 0);
    quad(390, 430, 395, 430, 435, 480, 425, 480);

    updateSushi();
    removeSushiOutOfView();
    addSushi();
}


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

function removeSushiOutOfView() {
    //remove sushi from array if it's out of sight
    var sushiToKeep = [];
    for (var i = 0; i < sushi.length; i++) {
        if (sushi[i].x + sushi[i].breadth > 0) {
            sushiToKeep.push(sushi[i]);
        }
    }
    sushi = sushiToKeep; //remember the surviving sushi
}

function addSushi() {
    //with a very small probability, add a new sushi to the end
    var newSushiProb = 0.005; 
    if (random(0,1) < newSushiProb) {
        sushi.push(makeSushi(width));
    }
}

function sushiDisplay(){

    //rice
    stroke(this.c3);
    strokeWeight(10);
    strokeJoin(ROUND);
    fill(this.c3);
    rect(this.x, 350, this.breadth, this.height);

    //salmon on top of rice
    var top = 350 + this.height;
    var top2 = 350 + this.height - 5;
    stroke(255, this.c1, this.c2);
    fill(255, this.c1, this.c2);
    rect(this.x - 10, top, this.breadth + 20, 20);
    noStroke();
    fill(255, this.c1 + 50, this.c2 + 80);
    triangle(this.x, top2, this.x + 10, top2, this.x + 5, top + 15);
    triangle(this.x + 30, top2, this.x + 40, top2, this.x + 35, top + 15);
    triangle(this.x + 60, top2, this.x + 70, top2, this.x + 65, top + 15);
    
    //the kelp
    fill(0);
    rect(this.x + this.breadth / 2, top2, 30, -this.height + 5);
}

function sushiMove(){
    this.x += this.speed; 
}

function makeSushi(startX){
    var mySushi = {x: startX,
                speed: -1.0,        
                breadth: random(80, 120),
                height: -random(50, 70),
                c1: random(100, 150),
                c2: random(50, 90),
                c3: random(240, 255),
                move: sushiMove,
                display: sushiDisplay}
    return mySushi;
}

In this project, I intend to create this “rotation sushi” scene. Using generative drawing methods, sushi with different shapes, sizes and toppings come out and move along the belt.

hmeng-project-10

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-10-Interactive Sonic Sketches

var mySoundA;
var mySoundB;

function preload() {
    mySoundA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundA.wav");
    mySoundA.setVolume(2);

    mySoundB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundB.wav");
    mySoundB.setVolume(2);

    mySoundC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundC.wav");
    mySoundC.setVolume(2);

    mySoundD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundD.wav");
}

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

}
function draw() {
    var bSize = 16;

    background(255, 201, 54);

//draw the play station
    noStroke();
    fill(255);
//the body of the play station    
    rect(150, 100, 180, 270);
    
    rect(150, 90, 180, 10);
    rect(150, 370, 180, 10);
    rect(140, 100, 10, 270);
    rect(330, 100, 10, 270);
    
    ellipse(150, 100, 20, 20);
    ellipse(330, 100, 20, 20);
    ellipse(150, 370, 20, 20);
    ellipse(330, 370, 20, 20);

//the screen 
    fill(150);
    rect(160, 110, 160, 110);
    ellipse(160, 110, 16, 16);
    ellipse(320, 110, 16, 16);
    ellipse(160, 220, 16, 16);
    ellipse(320, 220, 16, 16);

    rect(160, 102, 160, 8);
    rect(160, 220, 160, 8);
    rect(152, 110, 8, 110);
    rect(320, 110, 8, 110);

    fill(30)
    rect(160, 110, 160, 110)

//Left button
    fill(0);
    rect(160, 280, 50, 10);
    rect(180, 260, 10, 50);

//Right button A
    fill(255, 0, 0);
    ellipse(290, 270, bSize);
//Right button B
    ellipse(290, 300, bSize);  
//Right button C
    ellipse(275, 285, bSize);
//Right button D
    ellipse(305, 285, bSize);    
}

function mousePressed() {
//fill the screen blue when button is clicked
    fill(138, 218, 255);
    rect(160, 110, 160, 110);

//play soundA when buttonA is clicked
    if(mouseX > 282 & mouseX < 298 && mouseY > 262 && mouseY < 278){
        mySoundA.play();
    }
//play soundB when buttonB is clicked    
    if(mouseX > 282 & mouseX < 298 && mouseY > 292 && mouseY < 308){
        mySoundB.play();
    }
//play soundC when buttonC is clicked
    if(mouseX > 267 & mouseX < 283 && mouseY > 277 && mouseY < 293){
        mySoundC.play();
    }
//play soundD when buttonD is clicked
    if(mouseX > 297 & mouseX < 313 && mouseY > 277 && mouseY < 293){
        mySoundD.play();
    }    
}

In this project, I explored the sound upload in p5js and mimicked the Nintendo Family Computer with corresponded game sound effects.