var birds = []
var trees = []
var deadTrees = []
var timberJacks = []
var angle = 70
var angle2 = 50
var x = 30
var y = 50
function setup() {
    createCanvas(600, 500)
    frameRate(10)
}
function draw() {
    //draw backgrounds
    push()
    drawDesertAndSky()
    drawNightWorld()
    drawSun()
    pop()
    //rotating lines for the sun
    push()
    translate(150,0)
    for (y = 50; y <= 300; y += 2){
        rotate (radians(angle))
        stroke (255, 215, 0)
        line (30, y, x+2, y)
    }
    pop()
    push()
    for (x = 30; x <= 400; x += 5){
        rotate (radians(angle2))
        stroke (255, 255, 100)
        line (x-25, x-40, x-40, 0.8*40)
    }
    pop()
    //draw trees and deadtrees 
    push()
    for (var i = 0; i < trees.length; i++){
        trees[i].displays()
    }
    pop()
    push()
    for (var i = 0; i < deadTrees.length; i++){
        deadTrees[i].showss()
    }
    pop()
    //draw timberjacks
    push()
    updateAndDisplayTimberJacks()
    addNewTimberJackWithSomeRandomProbability()
    pop()
    //draw birds    
    push()
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
    pop()
    //texts
    push()
    fill(0,100,0)
    textSize(18);
    strokeWeight(3)
    stroke(0,100,0)
    text("CURRENT WORLD",100,70)
    textSize(16);
    text("WE DON'T WANT OUR WORLD DESTROYED!",10,100)
    strokeWeight(2)
    text("Click to Plant Trees Here! :)",40,150)
    fill(0)
    textSize(20)
    strokeWeight(3)
    stroke(0)
    text("FALLEN WORLD",430,50)
    textSize(16);
    strokeWeight(2)
    text("Klik to pLanT dEAd TrEEs:(",400,80)
    pop()
}

//functions that draw the background
function drawDesertAndSky(){
    noStroke()
    fill(237, 201, 155)//desert
    rect(0,170,400,330)
    fill(135,206,235)//sky
    rect(0,0,400,170)
}
function drawNightWorld(){
    noStroke()
    fill(48,25,52)
    rect(400,170,200,330)
    fill(216,191,216)
    rect(400,0,200,170)
}
function drawSun(){
    translate(150,0)
    fill(255,200,0)//sun
    ellipse(0,0,100,100)
    line(50,50,85,85)
    line(75,20, 125, 30)
    line(20,75, 25 ,125)
}

//interactive mousePressed function to draw trees
function mousePressed(){
    if (mouseX <= 400){
        var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)//plant live trees on the ground
        trees.push(tree_instance)
    }else{
        var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))
        deadTrees.push(deadTree_instance)
    }
}

//the tree & dead tree functions
function makeTree(tx, ty, th){
    var tree = {x: tx, y: ty, height: th, 
            displays: treeDraw}
    return tree
}
function treeDraw(){ 
    fill(0,255,0)
    triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)
    fill(50,30,0)
    rect(this.x-2,this.y+15-this.height,4,10+this.height)
    //trees grow
    if(this.height <= 10){
        this.height+=0.1
    }
}
function makeDeadTree(tx, ty){
    var deadTree = {x: tx, y: ty,
            showss: deadTreeDraw}
    return deadTree
}
function deadTreeDraw(){
    push()
    fill(129)
    triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)
    rect(this.x,this.y,10,4)
    pop()
}

//timberjacks
function makeTimberjack(jx, jy){
    var timberJack = {x: jx, y: jy, 
            display: timberJackDraw,
            speedX: random(3,6),
            speedY: random(-1,1),
            move: timberJackMove}
    return timberJack
}
function timberJackDraw(){
    push()
    strokeWeight(1)
    ellipse(this.x,this.y,9,12)
    //body
    line(this.x,this.y+6,this.x,this.y+20)//body
    line(this.x,this.y+15,this.x+5,this.y+15)//left hand
    line(this.x,this.y+15,this.x+5,this.y+12)//right hand
    line(this.x,this.y+20,this.x+5,this.y+27.5)//right leg
    line(this.x,this.y+20,this.x-5,this.y+27.5)//left leg
    //eyes
    ellipse(this.x-1.5,this.y-1,0.5,0.5)
    ellipse(this.x+1.5,this.y-1,0.5,0.5)
    arc(this.x, this.y+5, 6, 7.5, PI+1,-1)
    //hair
    line(this.x,this.y-6,this.x,this.y-11)
    line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)
    line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)
    pop() 
    //electric saw
    push()
    noStroke()
    fill(0)
    rect(this.x+5,this.y+10,5,8)
    rect(this.x+7,this.y+12,11,4)
    triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)
    pop()
}
function timberJackMove() {
    this.x += this.speedX;
    this.y += this.speedY
}
function addNewTimberJackWithSomeRandomProbability() {
    // With a probability, add a new timberjack to the end.
    var newTimberJackLikelihood = 0.05; 
    if (random(0,1) < newTimberJackLikelihood) {
        timberJacks.push(makeTimberjack(0,random(200,470)));
    }
}
function updateAndDisplayTimberJacks(){
    // Update the timberjacks' positions, and display them.
    for (var i = 0; i < timberJacks.length; i++){
        timberJacks[i].move();
        timberJacks[i].display();
    }
}
function removeTimberJacksThatHaveSlippedOutOfView(){
    var timberJacksToKeep = [];
    for (var i = 0; i < timberJacks.length; i++){
        if (timberJacks[i].x > 0) {
            timberJacksToKeep.push(timberJacks[i]);
        }
    }
    timberJacks = timberJacksToKeep;
}

//birds
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds
}
function updateAndDisplayBirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),0));
    }
}
// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

//code for screen changes
var currentScreen = "start";

//for the icebergs
var icebergs1 = [];
var icebergs2 = [];
var icebergs3 = [];
var icebergs4 = [];
var icebergs5 = [];
var x;

//for the movement of the game
var py = 0;
var count = 0;
var safe = true;

//for the melting icebergs
var beginIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;
var endingIceberg = [];
var noiseParam = 0;
var noiseStep= 0.05;

//for the baby polar bear location
var positionX = 250;
var positionY = 450;


function setup() {
    createCanvas(500, 500);
    text("p5.js vers 0.9.0 test.", 10, 15);
    start();
    //the initial icebergs
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = -50;
       icebergs1[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 50;
       icebergs2[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 150;
       icebergs3[i]=makeIceberg(x,y); 
      }
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 250;
       icebergs4[i]=makeIceberg(x,y); 
      }
       
      for (var i = 0; i < 5; i++){
        x = 100*i;
        y = 350;
       icebergs5[i]=makeIceberg(x,y); 
      }
    //for the starting iceberg
      for (var i=0; i < width/5; i++){
        n=noise(noiseParam);
        value = map(n,0,1,400,450);
        beginIceberg.push(value);
        noiseParam += noiseStep;
    }

    //for the ending iceberg
     for (var i=0; i < width/5; i++){
      n=noise(noiseParam);
      value = map(n,0,1,-150,-100);
      endingIceberg.push(value);
      noiseParam += noiseStep;
    }
    
    frameRate(10);
}

function draw() {
  translate(0,py);
  //the blue ocean
  background(0,0,200);

  //the start screen
  if (currentScreen == "start"){
    start();
    if (keyIsPressed){
      currentScreen = "game";
    }
  }
  
  //plays the game screen
  else if (currentScreen == "game"){
    gameScreen();
  }
  
  //plays the lose screen
  else if (currentScreen == "lose"){
    elimination();
  }
  
  //playes the win screen
  else if (currentScreen == "win"){
    win();
  }
  

}

//Game Scene 

function gameScreen(){
  //the starting scene of the melting large iceberg
  meltingIceberg();
  
  //the icebergs
  updateAndDisplayIceberg();
  addNewIcebergs(); 
  
  //the movement of the game - to continuosly check if its on an iceberg
  if (count == 1){
      for (var i = 0; i < icebergs1.length; i++){
        if (positionX >= icebergs1[i].x & positionX + 20 <= icebergs1[i].x + icebergs1[i].width){
          positionX += 3;
          safe = true;
          break;;
        }
      }
    }
  if (count == 2){
      for (var i = 0; i < icebergs2.length; i++){
        if (positionX >= icebergs2[i].x & positionX + 20 <= icebergs2[i].x + icebergs2[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 3){
      for (var i = 0; i < icebergs3.length; i++){
        if (positionX >= icebergs3[i].x & positionX + 20 <= icebergs3[i].x + icebergs3[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 4){
      for (var i = 0; i < icebergs4.length; i++){
        if (positionX >= icebergs4[i].x & positionX + 20 <= icebergs4[i].x + icebergs4[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
  if (count == 5){
      for (var i = 0; i < icebergs5.length; i++){
        if (positionX >= icebergs5[i].x & positionX + 20 <= icebergs5[i].x + icebergs5[i].width){
          positionX += 3;
          safe = true;
          break;
        }
      }
    }
    
  if (positionX+20 > width){
    safe = false;
  }
    
  
    //if safe = false - game over
    if (safe == false){
      currentScreen = "lose";
      //noLoop()
    }
   
  //endgame
  if (count == 6){
    //display winning scene
    currentScreen = "win";
  }
 meltingIceberg2();
 
  //the baby polar bear 
  babyPolarBear();
}

//The large icebergs

function meltingIceberg(){
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,height);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,beginIceberg[i]);
  }
  
  vertex(width+50,height);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,400,450);
  beginIceberg.shift();
  beginIceberg.push(value);
  noiseParam += noiseStep;
}

function meltingIceberg2(){
 //The ending scene is a melting iceberg with the mother polar bear
  fill("white");
  stroke("white");
  beginShape();
  vertex(0,-600);
  
  for(i=0; i<width/5;i++){
    vertex(i*5,endingIceberg[i]);
  }
  
  vertex(width+50,-600);
  endShape(CLOSE); 
  n=noise(noiseParam);
  value = map(n,0,1,-150,-100);
  endingIceberg.shift();
  endingIceberg.push(value);
  noiseParam += noiseStep;
}


//code to do the jumps

//to draw baby polar bear and its respective movements (initally just a square, will later create details) 

function babyPolarBear(){
  fill("red");
  rect(positionX, positionY, 20,20); //might need to fix size later 
}

function keyPressed(){
  if (keyCode == UP_ARROW & currentScreen == "game"){
      py+=100;
      positionY -= 100;
      count++;
      safe = false;
      gameScreen();
    }
}

//object creation of the icebergs

function makeIceberg(x,y){
  var ice = {
    x,
    y,
    height: 25,
    width: floor(random(40,60)),
    speed: 3, 
    display: displayIceberg,
    move:moveIceberg
  }
  return ice;  
  }
 
 function displayIceberg(x,y){
   fill("white");
   rect(this.x,this.y,this.width,this.height);
 }   
 
 function moveIceberg(x){
   this.x+=this.speed;
 } 
 
 function updateAndDisplayIceberg(){
   for(var i = 0; i < icebergs1.length; i++){
     icebergs1[i].move();
     icebergs1[i].display();
   }
   for(var i = 0; i < icebergs2.length; i++){
     icebergs2[i].move();
     icebergs2[i].display();
   }
   for(var i = 0; i < icebergs3.length; i++){
     icebergs3[i].move();
     icebergs3[i].display();
   }
   for(var i = 0; i < icebergs4.length; i++){
     icebergs4[i].move();
     icebergs4[i].display();
   }
   for(var i = 0; i < icebergs5.length; i++){
     icebergs5[i].move();
     icebergs5[i].display();
   }
 }
   
 function addNewIcebergs(){ //should I change this to different logic?
   var newIcebergLikelihood = 0.05;
   var x = -40;
   if (random(0,1) < newIcebergLikelihood){
     icebergs1.push(makeIceberg(x,350));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs2.push(makeIceberg(x,250));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs3.push(makeIceberg(x,150));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs4.push(makeIceberg(x,50));
   }
   if (random(0,1) < newIcebergLikelihood){
     icebergs5.push(makeIceberg(x,-50));
   }
 }
 

//Code to implement width

function icebergWidth(){
  return this.x + this.width;
}



//starting scene - instructions stuff - press space to continue
function start(){
  fill("green");
  rect(0,0,width,height);
  textSize(15);
  fill("white");
  text("Welcome to Save the POLAR BEAR from Global Warming", 50 ,200);
  textSize(15);
  fill("white");
  text("Press Space to Continue", 50,260);
  textSize(15);
  fill("white");
  let word = 'Instructions: Press the up key to move the polar bear (the red square) forward. Land on the iceberg and you will be safe, if you land in the ocean, you will die. Make sure to move up before you drift off into the ocean. Also note that there are some icebergs that are hidden if you are lucky and some weak icebergs that will break if you are unlucky. Can you reach the safe iceberg?'
  text(word,50,280, 400,200);
}

//The winning scene
function win(){
  fill("yellow");
  rect(0,0 - 100* count,width,height);
  textSize(50);
  fill("black");
  text("You have Won", 50 ,250 - 100* count);
  textSize(20);
  fill("black");
  text("Reload page to play again", 250,290 - 100* count);
}

// elimination scene 

function elimination(){
  fill("black");
  rect(0 ,0 - 100* count,width,height);
  textSize(50);
  fill("white");
  text("You have LOST", 50 ,250 - 100* count);
  textSize(20);
  fill("white");
  text("Reload page to play again", 250,290 - 100* count);
  
}

ptx = [];
pty = [];
ptx2 = []; 
pty2 = [];
numberx = [];
numbery = [];
var d;
var angle;
var pieceNum;
var trapAngle = 360/17;
var r1 = 280;
var r2 = 180;
var bool = false;
var table;
var numRows;
var pages = {   
                title1: [], 
                minititle1: [],
                goal1: [],
                goal2: [],
                goal3: [],
                goal4: [],
                goal5: [],
                r: [0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],
                g: [72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],
                b: [108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],
            };
var logo;

function preload() {
    table = loadTable("17goalsdata.csv", "header");
    logo = loadImage("logo.png");
}

function setup() {
    createCanvas(1000,600);
    numRows = table.getRowCount();
    angleMode(DEGREES);
    imageMode(CENTER);

    for (var i = 0; i < 19; i++) {
        ptx[i] = r1*cos(7*trapAngle+((i+1)*trapAngle));
        pty[i] = r1*sin(7*trapAngle+((i+1)*trapAngle));
    }
    for (var i = 0; i < 19; i++) {
        ptx2[i] = r2*cos(7*trapAngle+((i+1)*trapAngle));
        pty2[i] = r2*sin(7*trapAngle+((i+1)*trapAngle));
    } 
    for (var i = 0; i < 19; i++) {
        numberx[i] = ((r1+r2)/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
        numbery[i] = ((r1+r2)/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
    }   

    for (var i = 0; i < numRows; i++) {
        pages.title1[i] = table.getString(i,"Title");
        pages.goal1[i] = table.getString(i,"Goal1")
        pages.goal2[i] = table.getString(i,"Goal2")
        pages.goal3[i] = table.getString(i,"Goal3")
        pages.goal4[i] = table.getString(i,"Goal4")
        pages.goal5[i] = table.getString(i,"Goal5")
        pages.minititle1[i] = table.getString(i,"MiniTitle");
    }
}

function draw() {
    push();
    translate(width/2,height/2);
    strokeWeight(10);
    noFill();
    background(220);
    image(logo,0,-20,1024*r1/879,r1);
    
    if (!bool) {
        for (var i = 0; i < 19; i++) {
            drawTrapezoid(i);
        }
        angle = atan2(mouseY - height/2,mouseX - width/2);
        pieceNum = 8+ceil(angle/(trapAngle));
        d = dist(width/2,height/2,mouseX,mouseY);
        menuSelector(d);
    }
    else {
        pop();

        if (d<r1 & d>r2) {
            if (pieceNum==0) {
                pieceNum=17;
            }
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);
            drawTitle(pages.title1[pieceNum-1],col);
            drawGoals(pages,60);
        }
        drawExitButton();
    }
}

function drawExitButton() {
    stroke(0);
    fill(200,0,0);
    rect(width-105,height-105,100,100,20);
    fill(0);
    strokeWeight(1);
    text("Back",width-75,height-50)
    noStroke();
}

function drawTitle(title1,col) {
    background(col);
    strokeWeight(10);
    stroke(0);
    line(5,5,width-5,5);
    line(5,5,5,height-5);
    line(5,height-5,width-5,height-5);
    line(width-5,height-5,width-5,5)
    strokeWeight(2);
    fill(255);
    rect(5,5,100,100,20);
    fill(0);
    strokeWeight(2);
    textSize(50);
    textAlign(CENTER)
    rectMode(CORNER);
    text(pieceNum, 50,65);
    textSize(40)
    noStroke();
    text(title1,120,25,840,300);
}

function drawGoals(pages,spacing) {
    fill(0);
    textAlign(LEFT)
    strokeWeight(2);
    textSize(30);
    text("By 2030:", 100,200-spacing,800);
    textSize(20);
    for (var i = 0; i < 5; i++) {
        text("Goal " + (i+1) + ":", 50, (i*spacing)+215);
    }
    text(pages.goal1[pieceNum-1],120,200,800);
    text(pages.goal2[pieceNum-1],120,200+spacing,800);
    text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);
    text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);
    text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);
}

function drawTrapezoid(i) {
    stroke(0);
    beginShape();    
    vertex(ptx2[i],pty2[i]);
    vertex(ptx2[i+1],pty2[i+1]);
    vertex(ptx[i+1],pty[i+1]);
    vertex(ptx[i],pty[i]);
    endShape(CLOSE);
    rectMode(CENTER);
    noStroke();
    if (i<18 & i>0) {
        fill(0);
        textSize(17);
        textAlign(CENTER);
        rectMode(CENTER);
        text(i,numberx[i],numbery[i])
        noFill();   
    }
    
    //rect(numberx[i],numbery[i],10,10);
    rectMode(CORNER);
}

function mousePressed() {
    if (d<r1 & d>r2) {
        bool = true;
    }
    if (mouseX>895 & mouseY>485) {
        bool = false;
    }
}

function menuSelector(d) {
    if (d<r1 & d>r2) {
        for (var i = 0; i <= 18; i++) {
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])
            fill(col);
            ellipse(0,0,(2*r2)-5);
            noStroke();
            fill(0);
            //rectMode(CENTER);
            textSize(30)
            text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);
            fill(col);
            drawTrapezoid(pieceNum); 
        }
    }
}

function setup() {
    createCanvas(400,400);
    // create an initial collection of buildings
    for (var i = 0; i < 4; i++){
        var cx = random(width);
        var cy = random(320,350)
        cars[i] = makeCar(cx,cy,color(random(255),random(255),random(255)),random(25,45));
    }
    for (var i = 0; i < 3; i++){
        var bx = random(width);
        var by = random(20,150)
        birds[i] = makeBird(bx,by,color(random(255),random(255),random(255)));
    }
    frameRate(10);
}
var cars = [];
var birds = [];
function draw() {
    push()
    fill(170,170,255)
    rect(0,0,400,270)
    fill(0,170,0)
    rect(0,270,400,130)
    drawRoad()
    drawSun()
    for (i=0; i<=50; i++){
        drawTree(i*50+20,260)  
    }
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
}
function drawSun(){
    fill(255,200,0)
    ellipse(0,0,100,100)
}
function drawTree(x,y){
    fill(0,255,0)
    triangle(x,y,x-7,y+15,x+7,y+15)
    fill(50,30,0)
    rect(x-2,y+15,4,10)
}
function drawRoad(){
    fill(0)
    rect(0,300,400,60)
    fill(255,255,0)
    for (i = 0; i <= 10; i++){
        rect(50*i+15,325,20,5)
    }
}
function removeCarsThatHaveSlippedOutOfView(){
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x > 0) {
            carsToKeep.push(cars[i]);
        }
        print(cars[i])
    }
    cars = carsToKeep; // remember the surviving cars

}
function updateAndDisplayCars(){
    // Update the cars's positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}
function addNewCarsWithSomeRandomProbability() {
    // With a probability, add a new car to the end.
    var newCarLikelihood = 0.05; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(0,random(305,345),color(random(255),random(255),random(255)),random(25,45)));
    }
}

// method to update position of cars every frame
function carMove() {
    this.x += this.speed;
}
// draw the cars
function carDisplay() {
    push()
    fill(this.c)
    rect(this.x,this.y,this.l,10)
    rect(this.x+8,this.y-10,14,10)
    ellipse(this.x+11,this.y+8,10,10)
    ellipse(this.x+26,this.y+8,10,10)
    pop()
}
//make new car with different XY location, color, length, and speed
function makeCar(birthLocationX,birthLocationY,color,carLength) {
    var car = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                l: carLength,
                speed: random(2,10),
                move: carMove,
                display: carDisplay}
    return car;
}
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
        print(birds[i])
    }
    birds = birdsToKeep; // remember the surviving cars
}
function updateAndDisplayBirds(){
    // Update the cars's positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.05; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),color(random(255),random(255),random(255))));
    }
}

// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

//This is a original ball game where two players play against each other
//by trying their best to get the ball to the other side
//Crowds are cheering whenever a player gets the ball to the other side
//as time past, players become tired.Play suffering sound instead of 'haha'
//the game ends with a player not able to get the ball to the other side
//canvas turns black and the last sound is the man suffering.

var manSuffering;
var ballBouncing;
var crowdCheering;
var womanHaha;
var womanSuffering;
var manHaha;
var x = 50
var y = 170
var vx = 100
var vy = 1
//loading the sounds
function preload() {
    manSuffering = loadSound("http://localhost:8000/man suffering.wav");
    ballBouncing = loadSound("http://localhost:8000/ball bouncing.wav");
    crowdCheering = loadSound("http://localhost:8000/crowd cheering.wav");
    womanHaha = loadSound("http://localhost:8000/woman haha.wav");
    manHaha = loadSound("http://localhost:8000/man haha.wav");
    womanSuffering = loadSound("http://localhost:8000/woman suffering.wav");
}
function setup() {
    createCanvas(400, 400);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    frameRate(10)
}
function soundSetup() { // setup for audio generation
    manSuffering.setVolume(0.5);
    ballBouncing.setVolume(0.5)
    crowdCheering.setVolume(0.5)
    womanHaha.setVolume(0.5)
    womanSuffering.setVolume(0.5)
    manHaha.setVolume(0.5)
}
function draw() {
    background(192,100,150)
    //draws the court
    court()
    //draws a moving male player
    playerMale(20,random(100,220))
    //draws a moving female player
    playerFemale(380,random(100,220))
    //draws a moving ball
    ball()
    //draws 7 spectators
    for (var i = 0; i < 4; i++){
        push()
        fill(random(170,255))
        spectator(50+100*i,300)
        pop()    
    }
    for (var i = 0; i < 3; i++){
        push()
        fill(random(170,255))
        spectator(100+100*i,320)   
        pop() 
    }
    //when the ball hits the edge and time is a 15 seconds, one player screams and game ends
    if (frameCount > 150 & x+25 >= width){
        manSuffering.play()
        background(0)
        noLoop();
    }
}
function playerMale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x+10,y+15)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x,y-22)
    line(x-3,y-11,x-10,y-18)
    line(x+3,y-13,x+10,y-18)
    pop()  
}
function playerFemale(x,y){
    push()
    strokeWeight(3)
    ellipse(x,y,18,25)
    //body
    line(x,y+12,x,y+50)
    line(x,y+30,x-10,y+15)
    line(x,y+30,x-20,y+30)
    line(x,y+50,x+10,y+65)
    line(x,y+50,x-10,y+65)
    //eyes
    ellipse(x-3,y-2,1,1)
    ellipse(x+3,y-2,1,1)
    arc(x, y, 12, 15, 1, PI-1)
    //hair
    line(x,y-12,x-10,y)
    line(x-2,y-12,x-12,y+2)
    line(x+2,y-12,x+12,y+2)
    pop()
}
function court(){
    push()
    fill(0,130,0)
    beginShape();
    vertex(70, 50);
    vertex(330, 50);
    vertex(380, 320);
    vertex(20, 320);
    endShape(CLOSE);
    pop()
}
function spectator(x,y){
    push()
    noStroke()
    ellipse(x,y+120,100,200)
    ellipse(x,y,50,70)
    pop()

}
function ball(){
    push()
    ellipse(x,y,10,10) //draws the ball
    x = x + vx //x-coordinate of ball moves according to x-velocity
    y = y + vy //y-coordinate of ball moves according to y-velocity
    if (x+25 >= width){ //when ball touches right side, bounces back
        vx = random(-80,-30)
        vy = random(-5,5)
        //crowd cheers when a player gets the ball to the other side
        //as time past, players become tired.Play suffering sound instead of 'haha'
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            womanHaha.play() 
        }else{
            womanSuffering.play()
        }
    }
    if (x-25 <= 0){ //when ball touches left side, bounces back
        vx = random(30,80)
        vy = random(-5,5)
        ballBouncing.play()
        if (frameCount < 125){
            crowdCheering.play()
        }
        if (frameCount < 75){
            manHaha.play() 
        }else{
            manSuffering.play()
        }
    }
    //ball doesn't go off the court
    y = constrain(y,50,320)
    pop()
}

/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 10
 */

//tried to depict Baymax from Big Hero 6
//interacting with a spider
//and going from being confused to happy :)

var baymax;
var spider;
var question;

function preload() {
    baymax = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ding.wav");
    spider = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fall.wav");
    question = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/questionmark.wav");
}

function soundSetup() {
    baymax.setVolume();
    spider.setVolume();
    question.setVolume();
}

function setup() {
    createCanvas(400, 400);
    background(225);
    frameRate(1);
    useSound();
}

function baymax() {
    stroke(0);
    strokeWeight(3);
    ellipseMode(CENTER);
    //drop shadow
    fill("grey");
    noStroke();
    ellipse(width / 2, 350, 218, 54);
    //legs
    stroke(0);
    fill("white");
    ellipse(170, 300, 54, 90);
    ellipse(230, 300, 54, 90);
    //arms
    ellipse(145, 212, 68, 162);
    ellipse(255, 212, 68, 162);
    //body
    ellipse(200, 200, 145, 218);
    //face
    ellipse(width / 2, 109, 145, 90);
    //mouth
    line(163, 112, 236, 112);
    //eyes
    fill(0);
    ellipse(163, 112, 9, 18);
    ellipse(236, 112, 9, 18);
}

function smile() {
    arc(width / 2, 112, 73, 20, 0, PI, OPEN);
}

function spider() {
    //spider
    push();
    line(width / 2, 0, width / 2, 180);
    fill(0);
    ellipse(width / 2, 182, 10, 14);
    ellipse(width / 2, 176, 8, 10);
    strokeWeight(1);
    for (i = 0; i <= 3; i++) {
        line(width / 2 + 4, 4 * i + 176, width / 2 + 8, 4 * i + 170);
        line(width / 2 + 8, 4 * i + 170, width / 2 + 12, 4 * i + 176);
        line(width / 2 - 4, 4 * i + 176, width / 2 - 8, 4 * i + 170);
        line(width / 2 - 8, 4 * i + 170, width / 2 - 12, 4 * i + 176);
        }
    pop();
}

function question() {
    text("?", 100, 100);
}

function draw() {
    if (frameCount > 0) {
    baymax();
    }
    if (frameCount >= 7) {
        spider();
        spider.play();
      }
    if (frameCount >= 10) {
        question();
        question.play();
      }
    if (frameCount >= 9) {
        smile();
        baymax.play();
      }
    if (frameCount > 18) {
      frameCount === 1;
      }
}