let fishcandy = [];

let bigfish = []; //bigfish eat goldfish

let fishpattern =[]; 

let lotusleave = []; //fish avoid lotusleave

let lotus = [];

let leavenum;

let lotusnum;

​

let candySound;

let goldfishSound;

let bigfishSound;

​

var weatherdata;

var timedata;

var cityname;

var api1 = 'https://api.openweathermap.org/data/2.5/weather?q='

var apikey1 = '&appid=77815a0478f113f43b7f22b73a6b743e'

var api2 = 'https://timezone.abstractapi.com/v1/current_time/?api_key=d8ab3fc723b74885943d7e2a25ee5899&location='

var url1,url2;

var col=200;

let input, button, prompt; //DOM

​

function preload(){

  candySound = loadSound('assets/throwcandy.mp3');

  goldfishSound = loadSound('assets/goldfish.mp3')

  bigfishSound = loadSound('assets/bigfish.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //html input and button

  prompt = createElement('h4','Enter a city name...')

  prompt.position(50,15);

  prompt.style('color','#DB7093');

  input = createInput();

  input.position(50,60);

  input.size(100);

  button = createButton('submit');

  button.position(input.x+input.width,60);  

  button.mousePressed(hellocity);

  //get data every 2 second

  setInterval(askData,2000);

  fishpattern = [pattern(PTN.triangle(15,15)),pattern(PTN.dot(15,7)),pattern(PTN.wave(40,35)),pattern(PTN.wave(60,30))];

  leavenum = random(5,10);

  lotusnum = random(4,8);

  for (var m=0; m<leavenum; m++){

     lotusleave.push(new Leave());

   }

  for(var n=0; n<lotusnum; n++){

    lotus.push(new Flower());

  }

}

​

function hellocity() {

  cityname = input.value();

  prompt.html('Hello ' + cityname + '!');

  input.value('');

  url1 = api1+cityname+apikey1;

  url2 = api2+cityname;

}

​

function askData(){

  loadJSON(url1,gotWeather);

  loadJSON(url2,gotTime);

}

​

function gotWeather(data1){

 //print(data1);

 weatherdata = data1;

}

​

function gotTime(data2){

 //print(data2);

 timedata = data2;

}

​

function mouseClicked(){

  var num = [0,1,2];

  if(mouseY>0.15*height){

    goldfish.push(new Fish(mouseX,mouseY,random(0.7,1),random(num),fishcandy))

    goldfishSound.play();

  }

}

​

function keyPressed(){

  if(key == 'c'){

    candySound.play();

    var candynum = random(3,10);

    for(var c=0;c<candynum;c++){

      fishcandy.push(new Candy(0, 0, 11, 15, 11));

    }

  }

  if(key == 'v'){

    bigfishSound.play();

    bigfish.push(new Fish(width*0.5,height*0.1,random(1.2,1.5),3,goldfish));

    setTimeout(disappear,8000);

  }

} 

​

​

function disappear(){

  bigfish.splice(0,1);

}

​

​

function draw() {

  noStroke();

  background(color(col));

​

  //draw goldfish

  for (var i=0;i<goldfish.length;i++){

    goldfish[i].show();

    goldfish[i].move();

  }

  //draw bigfish

  for (var r=0;r<bigfish.length;r++){

    bigfish[r].move();

    bigfish[r].show();

  }

  //draw lotusleave

   for (var m=0; m<leavenum; m++){

     lotusleave[m].show();

   }

   //draw lotus

  for(var n=0; n<lotusnum; n++){

    lotus[n].show();

  }

  //draw fishcandy

   for (var j=0;j<fishcandy.length;j++){

    fishcandy[j].show();

    fishcandy[j].move();

  }

  //city time and weather data

  if(timedata){

    fill('#DB7093');

    text(timedata.requested_location,50,100);

    text(timedata.datetime,50,120)

    var timehour = timedata.datetime.substr(11,2);

    if(timehour>4 && timehour<=14){

      col = map(timehour,4,14,20,220);

    }

    if(timehour>=0 && timehour<=4){

      col = 20;

    }

    if(timehour>14 && timehour<=24){

      col = map(timehour,14,24,220,20);

    }

  }

  if(weatherdata){

    fill('#DB7093');

    text('Weather:'+ weatherdata.weather[0].main,50,140);

  }

}

​

///flower class///

function Flower(){

  this.pos = createVector(random(width),random(height));

  this.petalnum1 = round(random(6,10));

  this.petalnum2 = round(random(6,8));

  this.col1 = color(224, 162, 175);

  this.col2 = color(224, 99, 151);

  this.size = random(0.7,1.3);

  this.show = function(){

    push();

    translate(this.pos);

    fill(this.col1);

    scale(this.size);

    let angle1 = 360/this.petalnum1;

    for(p=0;p<this.petalnum1;p++){

      rotate(radians(angle1));

      ellipse(0,0,height*0.1,height*0.028);

    }

    fill(this.col2);

    scale(this.size*0.75);

    let angle2 = 360/this.petalnum2;

    for(p=0;p<this.petalnum2;p++){

      rotate(radians(angle2));

      ellipse(0,0,height*0.1,height*0.022);

    }

    pop();

  }

}

​

///leave class///

function Leave(){

  this.pos = createVector(random(width),random(height));

  this.size = random(height*0.1,height*0.3);

  this.col = color(0,random(90,150),70);

  this.show = function(){

    push();

    translate(this.pos);

    fill(this.col);

    ellipse(0,0,this.size);

    pop();

  }

}

​

////fish class///

function Fish(x,y,size,pnum,target){

  this.pos = createVector(x,y);

  this.wander = true; 

  this.target = false; 

  this.vel = createVector(0,0);

  this.angle = random(-PI,PI);

  this.size = size;

  this.pattern = fishpattern[pnum];

  this.wanderSpeed = random(2,5);

  this.targetSpeed = random(5,10);

  this.targetIndex = 0;

  //set colors for different patterns

  if(this.pattern == fishpattern[0]){

    this.col1 = color(50, 70, 50); 

    this.col2 = color(150,160,150); 

  }

  if(this.pattern == fishpattern[1]){

    this.col1 = color(250); 

    this.col2 = color(240, 230, 120); 

  }

  if(this.pattern == fishpattern[2]){

    this.col1 = color(220,240,250); 

    this.col2 = color(57, 205, 250); 

  }

  if(this.pattern == fishpattern[3]){

    this.col1 = color(50, 70, 50); 

    this.col2 = color(150,160,150); 

  }

  this.move = function(){ 

    if(target.length>=1){

      this.wander= false;

      this.target = true;

    }else{

      this.wander= true;

      this.target = false;

    }

    if(this.wander == true){

      this.angle += random(-0.1,0.1);

      this.vel = p5.Vector.fromAngle(this.angle).mult(this.wanderSpeed);

      if(this.pos.x <= 0){

       if(this.vel.x<0){

         this.angle = PI-this.angle;

       }else{

         this.angle = this.angle;

       }

      }

      if(this.pos.x >= width){

       if(this.vel.x>0){

         this.angle = PI-this.angle;

       }else{

         this.angle = this.angle;

       }

      }

      if(this.pos.y >= height){

       if(this.vel.y>0){

         this.angle = -this.angle;

       }else{

         this.angle = this.angle;

       }

      }

      if(this.pos.y <= 0){

       if(this.vel.y<0){

         this.angle = -this.angle;

       }else{

         this.angle = this.angle;

       }

      }

    }

    if(this.target == true){

     var targetDist = [];

     for(var j=0;j<target.length;j++){

      targetDist.push(p5.Vector.dist(this.pos,target[j].pos));

    }

      for(var k=0; k<target.length;k++){

       if(p5.Vector.dist(this.pos,target[k].pos)==min(targetDist)){

         this.targetIndex = k;

       }

     }

      var targetForce = p5.Vector.sub(target[this.targetIndex].pos, this.pos).normalize();

      this.angle = targetForce.heading();

      this.vel = p5.Vector.fromAngle(this.angle).mult(this.targetSpeed);

      if(min(targetDist)<50){

         target.splice(this.targetIndex,1);

         targetDist.splice(this.targetIndex,1);

         } 

    }

    this.pos.add(this.vel);

  }

  this.show = function(){

    push();

    translate(this.pos);

    rotate(this.angle);

    scale(-this.size,this.size);

    //draw fin and tail

    this.col1.setAlpha(180);

    fill(this.col1);

    triangle(-height*0.014,-height*0.027,height*0.032+random(-2,2),-height*0.043+random(-2,2),height*0.05,0);

    triangle(-height*0.014,height*0.027,height*0.032+random(-2,2),height*0.043+random(-2,2),height*0.05,0)

    quad(height*0.02,0,height*0.1+random(-5,5),-height*0.04+random(-5,5),height*0.093+random(-5,5),random(-5,5),height*0.1+random(-5,5),height*0.04+random(-5,5));

    //draw fish body

    this.col1.setAlpha(255);

    ellipse(0,0,height*0.11,height*0.055) 

    patternAngle(PI/2);

    patternColors([this.col1, this.col2]);

    pattern(this.pattern);

    ellipsePattern(0,0,height*0.11,height*0.055)

    //draw fish eye

    fill(this.col1);

    ellipse(-height*0.04,height*0.02,height*0.022);

    ellipse(-height*0.04,-height*0.02,height*0.022);//eye

    fill(255,200);

    ellipse(-height*0.041,height*0.025,height*0.013,height*0.01);

    ellipse(-height*0.041,-height*0.025,height*0.013,height*0.01);//eye white

    fill(0);

    ellipse(-height*0.042,height*0.027,height*0.008,height*0.005);

    ellipse(-height*0.042,-height*0.027,height*0.008,height*0.005);//eye black

    pop();

  }

}

​

////candy class////

//Star-reference from: https://p5js.org/examples/form-star.html

function Candy(x, y, radius1, radius2, npoints) {

  this.pos = createVector(random(windowWidth),random(0.5*windowHeight));

  this.vel = createVector(0,0);

  this.move = function(){

       if(this.pos.y < height*0.3){

       this.vel.y += 2;

     }else {

       this.vel.y -= 1.5;

     }

     if(this.vel.y <= 0){

       this.vel.y = 0;

     }

      this.pos.add(this.vel);

  }

  this.show = function(){

    let angle = TWO_PI / npoints;

    let halfAngle = angle / 2.0;

  fill(242, 239, 157);

  push();

  translate(this.pos);

  rotate(frameCount / 10.0);

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius2;

    let sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * radius1;

    sy = y + sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

  pop();  

  }

}

​