yushano_Final Project

yushano-12
sketch

//Isabella Ouyang
//Section A
//yushano@andrew.cmu.edu
//Assignment-12

var choice = [];
var trees = [];
var snowmen = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var thespeed = 1;
var songs=[];
var textX = 0;
var playMusic = false;

function preload() {
   var song1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/all-i-want-for-christmas-is-you.mp3");
   var song2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/ChristmasIsntChristmas.mp3");
   var song3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/jingle-bell.mp3");
   var song4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/silent-night.mp3");
   songs.push(song1);
   songs.push(song2);
   songs.push(song3);
   songs.push(song4);
   imgplus = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/plus.jpg");
   imgmusic = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/music.jpg");
   imgminus = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/minus.jpg");
}

function setup() {
    createCanvas(480, 240); 
    frameRate(5);
}

function draw() {
    background(205,233,233); 

    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();

    // draw objects
    // Ferris Wheel
    // update the rotation
    drawFerrisWheel();
    thespeed += 0.5;
    
    // Trees
    updateAndDisplayTrees();
    addNewTreesWithSomeRandomProbability();

    // Snowmen
    updateAndDisplaySM();
    addNewSMWithSomeRandomProbability();

    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,0,height);
    line(width,0,width,height);

    // load buttons
    image(imgplus,width-20,10);
    image(imgmusic,0,10);
    image(imgminus, width-20, 40);

}

function drawFerrisWheel(){
    strokeWeight(2);
    noFill();
    
    // draw the structure
    noStroke();
    fill(200);
    rect(width/2-2,height/2,4,85);
    fill(150);
    ellipse(width/2,height/2,10);
    rect(width/2-20,height/2+80,40,5);

    // draw the curve
    push();
    noFill();
    translate(width / 2, height / 2);
    rotate(thespeed);
    // the curve inside
    for (var i = 0; i < 8; i++) {
        // calculate the gradient of color
        var r = 207 - (207 - 152) / 6 * i;
        var g = 171 - (171 - 92) / 6 * i;
        var b = 177 - (177 - 103) / 6 * i;
        stroke(r, g, b);
        drawTetracuspidCurve();    
        rotate(PI / 14);
    }
    pop();   
    
}

function drawTetracuspidCurve(){
    var nPoints = 400;
    var x;
    var y;
    var a = 75;
    var ph = 0;
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a / 4 * (3*cos(t) -  cos(ph + 3 * t));
        y = a / 4 * (3*sin(t) +  sin(ph + 3 * t));
        vertex(x, y);
        push();
        // draw the cart at each peak
        if (x == 0 || y == 0) {
            for (var i = 0; i < 4; i++) {
                fill(204, 229, 255);
                rect(x + 35, y + 3, 10, 10);
                rotate(TWO_PI / 4);
            
            }    
        }
        pop();
    }
    endShape(CLOSE);    
}

function drawMountain() {
    fill(255); 
    noStroke();
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i = 0; i < 50; i++) {
        yS = 0;
        for (var j = 0; j < 25; j++){
            stroke(255);
            strokeWeight(0.5);
            //noStroke();
            ellipse(xS, yS, 2);
            line(xS - 3, yS - 3, xS + 3, yS + 3);
            line(xS + 3, yS - 3, xS - 3, yS + 3);
            line(xS, yS - 3, xS, yS + 3);
            yS += random(10, 20);
        }
        xS += random(8, 25);    
    }
}

    
// DRAW THE CHRISTMAS TREE
function updateAndDisplayTrees() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.1; 
    if (random(0,1) < newTreeLikelihood) {
        var theX = random(20, width-20);
        trees.push( makeTree(theX,0) );
    }
}


// method to update position of tree every frame
function treeMove() {
    this.y += this.speed;
}
    

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, this.y);
    // tree
    strokeWeight(0.5);
    fill(0, 102, 51);
    triangle(0, this.y + 30, this.breadth / 2, this.y, this.breadth, this.y + 30); 
    fill(108,22,22)
    rect(this.breadth / 2 - 5, this.y + 30, 10, this.treeH / 3);
    // ornaments
    var x0 = this.breadth / 6;
    for (var i = 0; i < 5; i++){
        fill(255, 0, 0);
        ellipse(x0, this.y + 25, 5);
        x0 += this.breadth / 6;
    }
    pop();
}


function makeTree(birthLocationX, birthLocationY) {
    var tree = {x: birthLocationX, 
                y: birthLocationY,
                breadth: 30,
                speed: 2.0,
                treeH: 10,
                move: treeMove,
                display: treeDisplay}

    return tree;
}

// DRAW THE SNOWMAN
function updateAndDisplaySM() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < snowmen.length; i++){
        snowmen[i].move();
        snowmen[i].display();
    }
}

function addNewSMWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newSMLikelihood = 0.1; 
    if (random(0, 1) < newSMLikelihood) {
        var theX = random(20, width - 20);
        snowmen.push(makeSnowman(theX,0));
    }
}


// method to update position of sm every frame
function smMove() {
    this.y += this.speed;
}
    

// draw the snowman 
function smDisplay() { 
    stroke(0); 
    push();
    translate(this.x, this.y);
    // tree
    fill(245);
    strokeWeight(0.8);
    ellipse(this.x, this.y + 8, 13);
    ellipse(this.x, this.y, 8);
    // ornaments
    fill(255, 0, 0); // the hat
    triangle(this.x - 2, this.y - 4, this.x, this.y - 7, this.x + 2, this.y - 4);
    fill(0); // eyes
    ellipse(this.x - 2, this.y, 1);
    ellipse(this.x + 2, this.y, 1);
    fill(255, 128, 0);
    triangle(this.x - 1, this.y + 2, this.x + 1, this.y + 2, this.x, this.y + 6);
    pop();
}


function makeSnowman(birthLocationX, birthLocationY) {
    var snowman = {x: birthLocationX, 
                y: birthLocationY,
                speed: 2.0,
                move: smMove, 
                display: smDisplay}

    return snowman;
}

// Draw the soil 
function displayHorizon(){
    stroke(0);
    fill(0, 51, 102);
    rect (0, height - 40, width, 40);
}

// Interaction with user
function mousePressed() {
    // button to play the music
    if (mouseX < 20 & mouseY < 30 && mouseY > 10) {
        playMusic = !playMusic;
    }
    if ( playMusic == false ) {
        for (var i = 0; i < songs.length; i++ ){
            if (songs[i].isPlaying()) {
                songs[i].stop();
            }
        }
    } else {
        songs[floor(random(1,5))].play();
    }
 

    // button to add more Christmas trees or snowmen
    if (mouseX > width-20 & mouseX < width && mouseY < 30 && mouseY > 10) {
        var choice = ceil(random(0,2));
        if (choice == 1) {
            trees.push(makeTree(random(20, width - 20),0));
        } else {
            snowmen.push(makeSnowman(random(20, width - 20),0));
        }
    }
    // button to get rid of some Christmas trees or snowmen
    if (mouseX > width-20 & mouseX < width && mouseY < 60 && mouseY > 40) {
        var choice = ceil(random(0,2));
        if (choice == 1) {
            trees.pop(makeTree(random(20,width-20),0));
        } else {
            snowmen.pop(makeSnowman(random(20,width-20),0));
        }

    }
}

My final project is an interactive animation which I try to mimic the Christmas scene. I integrate the use of curve (string art), music and images into this project. The center is a ferris wheel that is coded by curves. The Christmas trees, snowmen and snow are also coded instead of using images. The mountain behind are winter snow mountain.

Instruction:

If you press the music button on the left, it will play a random music. If you click it again, it stops. If you click it again then, it plays next random song. If you press the plus or minus button on the right, there will be more or less Christmas trees or snowmen that are falling from the sky.