Judy Li-Final Project

judyli: Final Project

//Judy Li
//Section A
//judyli@andrew.cmu.edu
//Final Project

var yA = 1; //y-Axis
var c1; //color 1
var c2; //color 2
var x = [];
var gravity = 0.3; //downward acceleration
var springy = 1; //how much velocity is retained after bounce
var drag = 0.0001; //drag causes particles to slow down
var np = 25; //how many particles
var paperbirds = [];

function soot() {
    background(204, 174, 98);
    noStroke();
    fill("pink");
    ellipse(30, 30, 10, 10);
    fill(186, 220, 88);
    ellipse(25, 25, 10, 10);
    fill(126, 214, 223);
    ellipse(25, 40, 10, 10);
    fill("coral");
    ellipse(30, 35, 10, 10);
    fill(224, 86, 253);
    ellipse(40, 30, 10, 10);
    fill("white");
    ellipse(40, 40, 10, 10);
    fill(0);
    for (var i = 0; i < np; i++) {
        //make a particle
        var p = makeParticle(200, 200, random(-50, 50), random(-50, 50));
    }
    frameRate(10);
    sootDraw();
}

function sootDraw() {
    if (mouseIsPressed) {
        var newp = makeParticle(mouseX, mouseY, random(-10, 10), random(-10, 0), random(0, 50));
        particles.push(newp);
    }
    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
        if (p.age < 200) {
            newParticles.push(p);
        }
    }
    particles = newParticles;
}

function birds() {
    setGradient(0, 0, width, height, c1, c2, yA); 
    drawClouds();
    nBird();
    nPosition();
    nArray();
    for (var i = 0; i < paperbirds.length; i++) {
        paperbirds[i].display();
    }
    frameRate(10);
    paperbirds.push(drawBirds());
}

function nBird() {
    if (random(50, 50) < 50) {
        paperbirds.push(drawBirds());
    }
}

function nPosition() {
    for (var i = 0; i < paperbirds.length; i++) {
        paperbirds[i].move();
    }
}

function nArray() {
    var ogBird = [];
    for (var i = 0; i < paperbirds.length; i++) {
        if (paperbirds[i].x > 0) {
            ogBird.push(paperbirds[i]);
        }
    }
    paperbirds = ogBird;
}

function moveBird() {
    this.x -= this.speed;
}

function seeBird() {
    stroke(225, 255, 255, 200);
    strokeWeight(random(1, 5));
    point(this.x, this.y);
    point(this.x + 2.5, this.y);
}

function drawBirds() {
    var paperbirds = {x: width,
        pdist: 100,
        speed: 5,
        birdsize: round(random(0, 5)),
        y: round(random(0, height)),
        move: moveBird,
        display: seeBird
        }
    return paperbirds;
}

function drawClouds() {
    noStroke();
    //cloud1
    fill(255, 255, 255, 200);
    ellipse(75, 75, 80, 50);
    ellipse(185, 75, 100, 60);
    ellipse(135, 75, 115, 75);
    //cloud2
    ellipse(240, 200, 70, 50);
    ellipse(380, 200, 100, 55);
    ellipse(420, 200, 75, 30);
    ellipse(300, 200, 120, 75);
    //cloud3
    ellipse(120, 360, 100, 40);
    ellipse(240, 360, 80, 50);
    ellipse(300, 360, 75, 30);
    ellipse(180, 360, 120, 75);
}

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    }
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dy and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);
    var rpx = width;
    var rpy = height;
    var f;
    var d;
    var rpc = 10;
    var x = this.x;
    var y = this.y;
    var dirx = (x - rpx) / d;
    var diry = (y - rpy) / d;
    d = dist(x, y, rpx, rpy);
    f = rpc / (Math.pow(d, 2));
    this.dx += dirx * f;
    this.dy += diry * f;
    point(rpx, rpy);
}

function particleDraw() {
    noStroke();
    fill(0);
    ellipse(this.x, this.y, this.size, this.size);
}

function setSize() {
    return random(5, 25);
}

function makeParticle(px, py, pdx, pdy, size) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         size: setSize(),
         age: 0,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

var particles = [];

function setup() {
    createCanvas(480, 480);
    //colors
    c1 = color(129, 236, 236);
    c2 = color(255, 234, 167);
}

function draw() {
    setGradient(0, 0, width, height, c1, c2, yA);
    placeForeground();
    if (mouseX < (width / 2) & mouseY < height) {
        soot();
    }
    if (mouseX > (width / 2) & mouseY < height) {
        birds();
    }
}

function placeForeground() {
    noStroke();
    //chim
    fill(150);
    quad(20, height, 30, 100, 50, 100, 60, height);
    fill(0);
    rect(30, 90, 20, 10);
    //big red
    fill(255, 82, 82);
    rect(90, 145, 300, 250);
    //grey
    fill(175);
    rect(80, 160, 80, 45);
    rect(100, 250, 60, 45);
    rect(315, 200, 90, 50);
    //top red
    fill(225, 82, 82);
    rect(110, 60, 260, 40);
    //mini rooms
    fill(205);
    rect(85, 170, 70, 30);
    rect(105, 260, 50, 30);
    rect(320, 210, 80, 35);
    rect(95, 105, 290, 40);
    //green
    fill(120, 180, 143);
    quad(75, 165, 85, 155, 155, 155, 165, 165);
    quad(95, 255, 105, 245, 155, 245, 165, 255);
    quad(310, 205, 320, 195, 400, 195, 410, 205);
    quad(80, 110, 100, 100, 380, 100, 400, 110);
    quad(90, 65, 200, 15, 280, 15, 390, 65);
    //bottom brown
    fill(139, 69, 19);
    rect(190, 280, 100, 12.5);
    rect(75, 205, 90, 7.5);
    rect(95, 295, 70, 7.5);
    rect(310, 250, 100, 7.5);
    //top brown
    fill(250, 211, 144);
    rect(200, 200, 80, 80);
    //outer red
    fill(200, 57, 57);
    rect(60, 330, 130, 100);
    rect(290, 330, 130, 100);
    //main entrance
    fill(250, 211, 144);
    rect(190, 325, 100, 50);
    //teal
    fill(120, 200, 143);
    quad(180, 325, 200, 315, 280, 315, 300, 325);
    quad(180, 210, 210, 180, 270, 180, 300, 210);
    //sign
    fill(255, 240, 195);
    ellipse(240, 180, 40, 20);
    ellipse(240, 15, 50, 25);
    ellipse(240, 315, 60, 10);
    //noStroke();
    fill(204, 174, 98);
    stroke(204, 174, 98);
    quad(0, width, width / 3, 360, 2 * (width / 3), 360, width, height);
    stroke(204, 142, 25);
    line(width / 3, 450, (2 * (width / 3)) + 140, 450);
    line((width / 3) - 140, 465, 2 * (width / 3), 465);
    stroke(179, 57, 57);
    strokeWeight(1);
    fill(179, 57, 57);
    triangle(0, height, 0, height - 45, 120, 369);
    triangle(width, height, width, height - 45, 360, 369);
    beginShape();
    curveVertex(0, height);
    curveVertex(0, height);
    curveVertex(35, 430);
    curveVertex(72.5, 395);
    curveVertex(115, 370);
    curveVertex(width / 3, 360);
    curveVertex(width / 3, 360);
    endShape();
    beginShape();
    curveVertex(2 * (width / 3), 360);
    curveVertex(2 * (width / 3), 360);
    curveVertex(365, 370);
    curveVertex(407.5, 395);
    curveVertex(445, 430);
    curveVertex(width, height);
    curveVertex(width, height);
    endShape();
}

function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yA) {//top > bottom gradient
        for (var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0, 1);
            var c = lerpColor(c1, c2, inter);
            stroke(c);
            line(x, i, x + w, i);
        }
    }
}

For the final project, I wanted to recreate three of my favorite scenes in the movie, Spirited Away. The first scene shows bridge and the exterior of the bath house. Since this building is famous in the movie, I wanted to start my project out with this first background image. When you move you mouse in the left hand side within the bounding box, it moves onto a new background/scene. This scene is the part when Chihiro is interacting with the soot creatures. She throws candy onto a corner of the floor so that the soot would get away from her. To go back to the original/first scene, you would just move your mouse down and out of the bounding box. And for the third scene, I remade the part that shows the flying paper birds through a simple animation. I really enjoyed that scene because it was really aesthetically filmed/made in the movie and I wanted to incorporate that.