/* Jiayi Chen
   jiayiche    Section A */
//arrays for display
var birds=[];
var clouds=[];
var flyObject =[];

//array for image storage
var birdsImg=[];
var cloudsImg=[];
var flyObjectImg =[];
//array for links
var cloudLinks = [
    "https://i.imgur.com/suIXMup.png",
    "https://i.imgur.com/7ZHCI63.png",
    "https://i.imgur.com/EFb0w3u.png",
    "https://i.imgur.com/PxLKy41.png"];

var birdLinks = [
    "https://i.imgur.com/Gr1VTU5.png",
    "https://i.imgur.com/EmRp42l.png",
    "https://i.imgur.com/vLWSU4h.png",
    "https://i.imgur.com/Y9BecjA.png"];

var flyObjectLink = [
    "https://i.imgur.com/IXz53Lj.png",
    'https://i.imgur.com/UsKzDwg.png'];

//load the images
function preload(){
    airplane = loadImage("https://i.imgur.com/bEPeF8a.png");
    for (var i = 0; i < cloudLinks.length; i++){
        cloudsImg[i] = loadImage(cloudLinks[i]);
    }
    for (var i = 0; i < birdLinks.length; i++){
        birdsImg[i] = loadImage(birdLinks[i]);
    }
    for (var i = 0; i < flyObjectLink.length; i++){
        flyObjectImg[i] = loadImage(flyObjectLink[i]);
    }
}

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    //initial clouds 
    for (var i = 0; i < 3; i++){
        var rc = floor(random(cloudsImg.length));
        clouds[i] = makeCloud(random(width),random(100,300),random(height),cloudsImg[rc]);
    }
    frameRate(10);
}

function draw() {
    background(135,206,235);
    sun()
    updateAndDisplayClouds();
    addNewobjectsWithSomeRandomProbability();
    removeObjectsThatHaveSlippedOutOfView();
    image(airplane,200,constrain(250+random(-5,5),240,260),200,200);
}

function sun(){
    push();
    fill('orange');
    circle(60,60,50);
    fill('red');
    circle(60,60,40);

}
function updateAndDisplayClouds(){
    // Update the clouds's positions, and display them.
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
    // Update the birds's positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
    // Update the flyThings's positions, and display them.
    for (var i = 0; i < flyObject.length; i++){
        flyObject[i].move();
        flyObject[i].display();
    }
}

//remove out of sight things
function removeObjectsThatHaveSlippedOutOfView(){
    //remove out of sight clouds
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].size/2 > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds

    //remove out of sight birds
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x + birds[i].size/2 > 0){
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds

    //remove out of sight fly things
    var FlyesToKeep = [];
    for (var i = 0; i < flyObject.length; i++){
        if (flyObject[i].x + flyObject[i].size/2 > 0) {
             FlyesToKeep.push(flyObject[i]);
        }
    }
    flyObject = FlyesToKeep; // remember the surviving fly things
}


function addNewobjectsWithSomeRandomProbability() {
    // With a low probability, add a new clouds to the end.
    var newCloudLikelihood = 0.02; 
    if (random(0,1) < newCloudLikelihood) {
        var rc = floor(random(cloudsImg.length));
        clouds.push(makeCloud(width+75,random(100,150),random(height),cloudsImg[rc]));
    }
    // With a low probability, add a new birds to the end.
    var newbirdLikelihood = 0.03; 
    if (random(0,1) < newbirdLikelihood) {
        var rc = floor(random(birdsImg.length));
        clouds.push(makeBirds(width+30,random(30,60),random(height),floor(random(birdsImg.length))));
    }
    // With a low probability, add a new flying things to the end.
    var newObejctLikelihood = 0.01; 
    if (random(0,1) < newObejctLikelihood) {
        var rc = floor(random(flyObjectImg.length));
        clouds.push(makeFly(width+50,random(50,100),random(0,240),flyObjectImg[rc]));
    }
}

//make clouds as objects
function makeCloud(birthLocationX,cs,ch,cloudCartoon) {
    var cldg = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -1.0,
                cartoon:cloudCartoon,
                move: cloudMove,
                display: cloudDisplay}
    return cldg;
}

function cloudMove() {//move clouds
    this.x += this.speed;
}

function cloudDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}

//make birds as objects
function makeBirds(birthLocationX,cs,ch,birdCartoon) {
    var mb = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -3.0,
                cartoonNumber:birdCartoon,
                move: birdsMove,
                display: birdsDisplay}
    return mb;
}

function birdsMove() {
    if(this.cartoonNumber == 0 || this.cartoonNumber == 1){
        this.x += this.speed/2;    //birds facing to the left are flying slower
        this.y += random(-3,3);    //randomly fly
    }else{
        this.x += this.speed;
        this.y += random(-5,5);    //randomly fly
    }

}

function birdsDisplay(){
    image(birdsImg[this.cartoonNumber], this.x, this.y,this.size, this.size); 
}

//make other flying things as objects
function makeFly(birthLocationX,cs,ch,flyCartoon) {
    var mf = {x: birthLocationX,
                size: cs,
                y:ch,
                speed: -2.0,
                cartoon:flyCartoon,
                move: flyMove,
                display: flyDisplay}
    return mf;
}

function flyMove() {//move flying objects
    this.x += this.speed;
    //gravity for things without wings
    this.y -=this.speed/4;
}

function flyDisplay(){
    image(this.cartoon, this.x, this.y,this.size, this.size); 
}

/* Jiayi Chen
   jiayiche    Section A */
// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

/*Story:
One beautiful morning Steve heard there's birds singing outside,
so he went out to check for the birds that hides in the tree.
He didn't notice there is a creeper on top of his house, and 
the creeper follows Steve to the tree. The Steve realized creeper 
is behind him, but it's too late for him to stop creeper from exploding.  

Reflection:
Though I was asked to use 2-3 seconds sounds for this project, I 
mostly able to find 4-5 second sounds that I felt fits for my story. 
Somehow the Audacity also does not works for the sounds I selected, 
so I have to use these 4-5 seconds sounds files directly.I also don't 
know how to find the images that directly blends into the canvas. 
*/
//Stevemovements
var steve=[]; //array for stevemovement
var idle;
var walk;
var run;
var swordright;
var damaged;
//creeper
var creeperMovement =[]; //array for creeper movement
var creeper;
var glowing;
var exploasion;
//house and bird for tree
var house;
var bird;
//sounds
var walkingsound;
var exploadsound;
var hurt;
var dooropen;
var morningbirds;

// track the time
var frame=0;
var steveX=200;
var CreeperX=300;
var CreeperY=0;
function preload() {
    //images
    house=loadImage("https://i.imgur.com/hAeVVrM.jpeg");
    exploasion=loadImage('https://i.imgur.com/u0RA0C9.png');
    glowing=loadImage('https://i.imgur.com/wpqSTpR.png');
    creeper=loadImage('https://i.imgur.com/oXqwDBa.png');
    damaged=loadImage('https://i.imgur.com/27nSdZi.png');
    swordright=loadImage('https://i.imgur.com/UgtoVei.png');
    run=loadImage('https://i.imgur.com/3JwarD4.png');
    walk=loadImage('https://i.imgur.com/6adTjcs.png');
    idle=loadImage('https://i.imgur.com/bIFUPG3.png');
    bird=loadImage('https://i.imgur.com/Ttx4W2C.png');
    //sounds
    walkingsound = loadSound('http://localhost:8000/walkingsound.wav');
    exploadsound = loadSound('http://localhost:8000/exploadsound.wav');
    hurt = loadSound('http://localhost:8000/hurt.wav');
    dooropen = loadSound('http://localhost:8000/dooropen.wav');
    morningbirds = loadSound('http://localhost:8000/morningbirds.wav');
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(500, 400);
    //======== call the following to use sound =========
    useSound();
    frameRate(1);
    steve[0]=idle;
    steve[1]=walk;
    steve[2]=run;
    steve[3]=swordright;
    steve[4]=damaged;
    //attribute sounds
    creeperMovement[0]=creeper;
    creeperMovement[1]=glowing;
    creeperMovement[2]=exploasion;
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    morningbirds.setVolume(0.3);
    dooropen.setVolume(0.3);
    hurt.setVolume(0.3);
    exploadsound.setVolume(0.3);
    walkingsound.setVolume(0.3)
}


function draw() {
    background('Cyan');
    grassland();
    tree(0,50);
    frame += 1; //track of frames  
    //print("Seconds = " + frame);
    //end the canvas
    if(frame == 28){
        noLoop();
    }
    //house
    image(house, 250, 100, 200, 200);

    steveMoving();

    creeperMoving();

    birdsmoving();

    //start the audio
    if(frame == 4){
        morningbirds.play();//birds chats
    }if(frame==9){
        dooropen.play();//door opens 
    }if(frame==11){
        walkingsound.play();//steve walks
    }if(frame==20){
        exploadsound.play();//creeper exploads
    }if(frame==24){
        hurt.play();//steve cries
    }

}
//build background grassland
function grassland(){
    push();
    fill('lime');
    noStroke();
    rect(0,height/2,width,height/2);
    pop();
}
//build a tree
function tree(x,y){
    push();
    fill('lime');
    noStroke();
    rect(x,y,100,100);
    fill('brown')
    rect(x+25,y+50,50,125);
    pop();
}

function creeperMoving(){//movement of creeper depend on framecount
    var a=0;
    if (frame >= 0 & frame <=11){
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 11 & frame <13){
        CreeperX-=100;
        CreeperY+=25;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 13 & frame <=15){
        CreeperX-=25;
        CreeperY+=50;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 16 & frame <=20){
        a=1;
        CreeperX-=3;
        CreeperY+=3;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame > 20 & frame <=21){
        a=1;
        image(creeperMovement[a],CreeperX,CreeperY,75,125);
    }else if(frame >= 22 & frame <26){
        a=2;
        b=50;
        image(creeperMovement[a],CreeperX-b,CreeperY-b,75+b,125+b);//explosion
    }
}

function steveMoving(){
    var a=0;
    if(frame==9 ){
        image(steve[a],steveX,200,75,125);//movement of steve depend on framecount
    }else if(frame>9 & frame<=11){
        steveX -= 10;
        a=1;
        image(steve[a],steveX,200,75,125);
    }else if(frame>11 & frame<16){
        a = 2;
        steveX -=25;
        if(frame==13){
            steveX -=25;
        }else if(frame==15){
            steveX -=50;
        }
        image(steve[a],steveX,200,75,125);
    }else if((frame>=16 & frame<20)){
        a = 0;
        image(steve[a],steveX,200,75,125);
    }else if(frame>=20 & frame <=22){
        a = 3;
        image(steve[a],steveX,200,75,125);
    }else if(frame >=22 & frame<= 25){ //steve hurt by the explosion
        a=4;
        image(steve[a],steveX,200,75,125);
    }else if(frame == 26){
        a=4;
        image(steve[a],steveX,200+50,75,125);
    }else if(frame == 27){
        a=4;
        image(steve[a],steveX,200+100,75,125);
    }
}

function birdsmoving(){
    if(frame>=4 & frame <=11){//birds scared off by steve
        image(bird,0,50,50,50);
    }
}

/* Jiayi Chen
   jiayiche    Section A */
var head;
var fish = [] //array for fish
function preload(){//load the image
    head = loadImage('https://i.imgur.com/VAEIjHv.jpeg');
}

function setup() {
    createCanvas(480, 480); 
    imageMode(CENTER); //exist because I don't know if it's important
    head.loadPixels(); //load pixels
    background(220);
    head.resize(480,480); //resize head size to canvas size
}

function draw(){
    var x =floor(random(0,480));//a random x value
    var y =floor(random(0,480));//a random y value

    fish.push(makeFish(x,y)); //create more fishes

    for (var i = 0; i < fish.length; i++) { //draw all the fishes 
        fish[i].stepFunction();
        fish[i].drawFunction();
    }
    if(fish.length==1000){
        noLoop();
    }
}

function makeFish(fx,fy){
    var f = {x: fx, y: fy,
             stepFunction: stepFishes,
             drawFunction: drawFishes
         }
    return f;
}

//draw fishes according to pixel color
function drawFishes(){ 
    var o=this.x
    var p=this.y    
    push();
    noStroke();
    c= head.get(o,p)
    fill(c);
    ellipse(o,p,20,10);//body
    line(o-2,p-5,o-2,p+5);
    triangle(o+10,p,o+13,p+2,o+13,p-2)//tail
    eyeball(o,p);
    pop();

}


//fishes eye
 function eyeball(x,y){
    stroke('white')
    circle(x-5,y,1)
    ellipse(x-5,y,3,3)
 }

function stepFishes(){ //fishes moving
    this.x = this.x + random(-3,3)
    this.y = this.y + random(-3,3)
}

/* Jiayi Chen
   jiayiche    Section A */
var h  //hours
var s  //seconds
var m  //minutes
var dayColor
var nightColor
var boxColor=[]
var cloudAndStarX=[]
var cloudAndStarY=[]
var cloudAndStarL=[]
var cloudAndStarH=[]
function setup() {
    createCanvas(480, 480);
    h = hour();
    s = second();
    m = minute();
    dayColor= color(135,206,250);
    nightColor= color(112,128,144);
    for(var i=0; i<12;i++){
        if(h < 12){
            boxColor[i]=nightColor;   //color of the day
        }else if(h>11){
        boxColor[i]=dayColor; //color of the night
        }
    }

    for(var i=0; i<17;i++){
        cloudAndStarX[i]=random(0,width-240);
        cloudAndStarY[i]=random(0,140);
        cloudAndStarL[i]=random(30,120)
        cloudAndStarH[i]=random(30,100)
    }
}

function draw() {
    //The Sky that represent hours
    //change the number of box to represent hours in night tmie
    h = hour();
    s = second();
    m = minute();
    background('gray');
    push();
    if (h < 12){ 
        for (var i=0; i<h;i++){
            boxColor[i]=dayColor
        }  
    //change the number of box to represent hours in night tmie
    }else if(h >= 12){
        for (var i=0; i<(h-12);i++){
            boxColor[i]=nightColor;
        }

    }

    for (var i=0; i<12;i++){  //Background sky colors changing base on day or night
        fill(boxColor[i])
        rect(i*width/12,0,width/12,height/2);
    }
    pop();

    //grass
    push();
    fill(0,255,127);
    rect(0,240,width,70)
    rect(0,height-65,width,65)
    pop();
    //road
    for (var i=0; i<5;i++){ 
        rect(i*100,350,50,25);
    }

    //The Car represent seconds
    car(s/60*width,360);


    //The Tree Represent minutes
    tree(m/60*width,200);


    //clouds and sun
    push();
    if(h<12){
        fill(255,69,0)   // the colors and shape for sun
        circle(60,60,50)
        for (var i=0; i<5;i++){
            fill(255,255,255,100) //clouds in day
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    //Clouds and a full moon 
    }else if(h>11){
        fill(246, 241, 213)   // the colors and shape for moon
        circle(width-50,60,50)
        for (var i=0; i<5;i++){
            fill(0,0,0,150) // clouds in night
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    }
    pop();

}


function car(cx,cy){
    //car body
    push();
    fill('red')
    rect(cx,cy,100,40);//main body
    rect(cx+25,cy-30,40,30);//middle
    triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);//right
    triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);//left

    //Weels
    fill('gray') //outer weels
    circle(cx+25,cy+40,25);
    circle(cx+75,cy+40,25);
    fill('ivory')//inner weels
    circle(cx+25,cy+40,17);
    circle(cx+75,cy+40,17);

    //windows
    fill('azure');
    rect(cx+28,cy-27,34,24);
    triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);
    triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);

    //lights
    fill('gold');//back lights and sub lights
    rect(cx+80,cy+20,20,5);
    rect(cx,cy+3,10,15);
    fill('yellow');//front light
    rect(cx+90,cy+5,10,12);
    pop();
}


function tree(tx,ty){
    push();
    push();
    fill('green');//leaves
    rect(tx-30,ty,90,50);
    rect(tx-15,ty-30,60,30);
    pop();
    fill(139,69,19);//tree log
    rect(tx,ty+20,30,80);
    pop();
}

/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(600, 600);
    rectMode(CENTER);
}

function draw() {
    background('gold');

    for (var i=1;i<=6;i++){
        for (var j=1;j<=6;j++){
    repeatingPattern(i*200-150,j*200-50,100);
    repeatingPattern(i*200-50,j*200-150,100);
    repeatingPatternX(i*200-150,j*200-150,100);
    repeatingPatternX(i*200-50,j*200-50,100);
        }
    }
    repeatingPatternY(2*100-50,2*100-50,100);
    repeatingPatternY(2*100-50,6*100-50,100);
    repeatingPatternZ(5*100-50,4*100-50,100);
    repeatingPatternZ(4*100-50,1*100-50,100);
    noLoop();
}

function repeatingPattern(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCircles(x,y,r)
}

function repeatingPatternX(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('tomato')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('khaki')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCircles(x,y,r)
}


function repeatingPatternY(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green')
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flowerX(x,y,r);
    littleCirclesY(x,y,r)
}

function repeatingPatternZ(x,y,r){
//    rect(x,y,r,r);
    fourLines(x,y,r);
    push();
    fill('green');
    circle(x,y,r*0.7);
    pop();
    push();
    fill('cyan')
    circle(x,y,r*0.65);
    pop();
    push();
    fill('gold')
    circle(x,y,r*0.6);
    pop();
    flower(x,y,r);
    littleCirclesY(x,y,r)
}


function flower(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('crimson');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function flowerX(x,y,r){
    //leaves
    push();
    fill("lime");
    triangle(x-r*0.03,y+r*0.14,x-r*0.1,y+r*0.18,x-r*0.15,y+r*0.13);
    triangle(x+r*0.03,y+r*0.24,x+r*0.11,y+r*0.26,x+r*0.15,y+r*0.20);
    pop();
    //stems
    push();
    fill('gold');
    bezier(x,y,x-r*0.1,y+r*0.2,x+r*0.1,y+r*0.2,x,y+r*0.3)
    pop();
    //petals
    push();
    fill('white');
    ellipse(x-r*0.1,y-r*0.1,r*0.17,r*0.15);
    ellipse(x+r*0.1,y-r*0.1,r*0.14,r*0.15);
    ellipse(x,y-r*0.2,r*0.15,r*0.15);
    ellipse(x-r*0.05,y,r*0.15,r*0.15);
    ellipse(x+r*0.05,y,r*0.15,r*0.15);
    pop();
    //middle
    push();
    fill('orange');
    circle(x,y-r*0.1,r*0.15);
    pop();
}

function littleCircles(x,y,r){
    doubleCircle(x-42,y-30,r*0.1);
    doubleCircle(x-30,y-42,r*0.1);
    doubleCircle(x+42,y+30,r*0.1);
    doubleCircle(x+30,y+42,r*0.1);
    doubleCircle(x+42,y-30,r*0.1);
    doubleCircle(x+30,y-42,r*0.1);
    doubleCircle(x-42,y+30,r*0.1);
    doubleCircle(x-30,y+42,r*0.1);
}

function doubleCircle(x,y,r){
    push();
    fill('bisque');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function littleCirclesY(x,y,r){
    doubleCircleY(x-42,y-30,r*0.1);
    doubleCircleY(x-30,y-42,r*0.1);
    doubleCircleY(x+42,y+30,r*0.1);
    doubleCircleY(x+30,y+42,r*0.1);
    doubleCircleY(x+42,y-30,r*0.1);
    doubleCircleY(x+30,y-42,r*0.1);
    doubleCircleY(x-42,y+30,r*0.1);
    doubleCircleY(x-30,y+42,r*0.1);
}

function doubleCircleY(x,y,r){
    push();
    fill('purple');
    circle(x,y,r);
    circle(x,y,r/2);
    pop();
}

function fourLines(x,y,r){
    line(x-r/2,y-r/2,x-r*0.25,y-r*0.25);
    line(x+r/2,y+r/2,x+r*0.25,y+r*0.25);
    line(x+r/2,y-r/2,x+r*0.25,y-r*0.25);
    line(x-r/2,y+r/2,x-r*0.25,y+r*0.25);
}