​

let floorheight = 550;

let chilis = [];

let numOfChili = 10;

let window0;

let daylength = 5;

let DNswith = false;

let leftline = 250;

let rightline = 350;

let wallcolorR = 230;

let wallcolorG = 130;

let wallcolorB = 180;

let nightcount = 1;

let ifwater = false;

let thirsty = false;

let waterCount = 0;

let dead = false;

​

​

​

// import starrynight.js as *

// frameRate = 1;

​

function preload(){

​

  imgSky = loadImage('sky.png');

  imgSun = loadImage('sun.png');

  imgMoon = loadImage('moon.png');

  imgSkynight = loadImage('skynight.png');

  imgBranch = loadImage('branch.png');

  imgWaterpot = loadImage('waterpot.png');

  imgWaterpoint = loadImage('waterpoint.png');

  soundFormats('wav')

  waterSound = loadSound('water')

  Ubuntu = loadFont('Ubuntu-Bold.ttf');

  frameRate(30);

​

}

​

function setup() {

  createCanvas(600, 800);

​

  for(let i=0; i<numOfChili; i++){

    chilis.push(new Chili());

  }

​

  window0 = new Window();

  waterpot0 = new Waterpot();

  // frameRate(100);

}

​

function controller(){

}

​

class Chili {

  constructor() {

    this.x = random(100,500);

    this.y = random(150,300);

    this.N = random(1,1.5); //changable random num.

    this.M = random(1,2);

    this.O = random(20,25);

    this.P = random(3,6);

    this.r = 66;

    this.g = 155;

    this.b = 30;

    // this.textx = 

    // this.color0 = color(66,155,49);

    // this.color1 = color(255,137,0);

    // this.color2 = color(251,0,0);

    this.rate = 0.01;

    this.Branch = color(66,155,50);

    this.Branchheight = height/2-50+30;

    this.Bcenter = width/2-30;

  }

  branch(){

​

    image(imgBranch,this.Bcenter-7-200,this.Branchheight-230);

    // fill(this.Branch);

    // //main stock;

    // beginShape();

    // vertex(this.Bcenter-7,this.Branchheight-20);

    // vertex(this.Bcenter+7,this.Branchheight-20);

    // vertex(this.Bcenter+12,this.Branchheight+100);

    // vertex(this.Bcenter-12,this.Branchheight+100);

    // endShape(CLOSE);

    // //left stock;

    // beginShape();

    // vertex(this.Bcenter-7,this.Branchheight-20);

    // vertex(this.Bcenter-7,this.Branchheight-10);

    // vertex(this.Bcenter-90,this.Branchheight-40);

    // vertex(this.Bcenter-90+5,this.Branchheight-40);

    // endShape(CLOSE);

    // beginShape();

    // vertex(this.Bcenter-90,this.Branchheight-40);

    // vertex(this.Bcenter-90+5,this.Branchheight-40);

    // vertex(this.Bcenter-90+5-10,this.Branchheight-40-60);

    // vertex(this.Bcenter-90+5-12,this.Branchheight-40-60);

    // endShape(CLOSE);

​

    // //right stock;

    // beginShape();

    // vertex(this.Bcenter-7,this.Branchheight);

    // vertex(this.Bcenter+7,this.Branchheight);

    // vertex(this.Bcenter+12,this.Branchheight+100);

    // vertex(this.Bcenter-12,this.Branchheight+100);

    // endShape(CLOSE);

  }

  leaves(){

  }

  freshMiddle(){

    // console.log('X = ' + mouseX + '; Y = '+mouseY)

    if (this.x<rightline && this.x>leftline){

    let tx = this.x;

    let ty = this.y;

    let tP = this.P;

    let tO = this.O;

    let tM = this.M;

    let tN = this.N;

​

    //The branch of each chili

    // stroke(this.Branch);

    // strokeWeight(2);

    // fill(this.Branch);

    // beginShape();

    //   vertex(tx-5,ty+6);

    //   bezierVertex(tx-5-2,ty+6-1,this.Bcenter,this.Branchheight,this.Bcenter,this.Branchheight);

    //   vertex(tx+3,ty+4);

    //   bezierVertex(tx+3-2,ty+4+2,tx-5+1,ty+6+1,tx-5,ty+6);

    // endShape(CLOSE);

    stroke(this.r,this.g,this.b);

    fill(this.r,this.g,this.b);

    beginShape();

    bezier(tx,ty, tx-tP*4,ty-tP*3, tx+tO*0.8-tP,ty-tO*1.1*tM-tP, tx+tO*0.6,ty-tO*1.1*tM)

    bezier(tx,ty, tx+tP*3,ty+tP*3, tx+tO*0.8+tP,ty-tO*1.1*tM+tP, tx+tO*0.6,ty-tO*1.1*tM)

    line(tx,ty,tx+tO*0.6,ty-tO*1.1*tM)

    endShape(CLOSE);

​

    //The petiole of each chili

    fill(this.Branch);

    noStroke();

    push();

    beginShape();

      vertex(tx-4,ty-2);

      vertex(tx-5,ty+6);

      bezierVertex(tx-5-2,ty+6-1,tx-4-1,ty-2+2,tx-4,ty-2);

      vertex(tx+3,ty+4);

      bezierVertex(tx+3-2,ty+4+2,tx-5+1,ty+6+1,tx-5,ty+6);

    endShape(CLOSE);

    pop();

​

​

    }

  }

  freshLeft(){

    let tx = this.x;

    let ty = this.y;

    let tP = this.P;

    let tO = this.O;

    let tM = this.M;

​

    if (this.x<=leftline) {

    stroke(this.r,this.g,this.b);

    fill(this.r,this.g,this.b);

    beginShape();

    bezier(tx,ty, tx - tP * 3,ty + tP * 4, tx - tO - tP,ty -tO * tM + tP, tx - tO,ty - tO * tM)

    bezier(tx,ty, tx + tP * 3,ty - tP * 3, tx - tO + tP,ty -tO * tM - tP, tx - tO,ty - tO * tM)

    line(tx,ty,tx-tO,ty-tO*tM)

    endShape(CLOSE);

    push();

    fill(this.Branch);

    noStroke();

    beginShape();

      vertex(tx-5,ty+3);

      vertex(tx+5,ty+6);

      bezierVertex(tx+5-2,ty+6+1,tx-5-1,ty+3+2,tx-5,ty+3);

      vertex(tx+3,ty-4);

      bezierVertex(tx+3+2,ty-4+2,tx+5+1,ty+6+1,tx+5,ty+6);

    endShape(CLOSE);

    pop();

    }

  }

  freshRight(){

    let tx = this.x;

    let ty = this.y;

    let tP = this.P;

    let tO = this.O;

    let tM = this.M;

​

    if (this.x >= rightline){

    stroke(this.r,this.g,this.b);

    strokeWeight(3);

    fill(this.r,this.g,this.b);

     beginShape();

    bezier(tx,ty, tx-tP*4-4,ty-tP*3-4, tx+tO-tP,ty-tO*tM-tP, tx+tO,ty-tO*tM)

    bezier(tx,ty, tx+tP*3,ty+tP*3, tx+tO+tP,ty-tO*tM+tP, tx+tO,ty-tO*tM)

    line(tx,ty,tx+tO,ty-tO*tM)

    endShape(CLOSE);

    fill(this.Branch);

    noStroke();

    beginShape();

      vertex(tx-5,ty-3);

      vertex(tx-5,ty+6);

      bezierVertex(tx-5-2,ty+6-1,tx-4-1,ty-2+2,tx-5,ty-3);

      vertex(tx+2,ty+3);

      bezierVertex(tx+2-2,ty+3+2,tx-5+1,ty+6+1,tx-5,ty+6);

    endShape(CLOSE);

    }

  }

  // As time (frame goes by), the chili will become redder and bigger.

  grow() {

    if(frameCount%10==0 && this.O<50 ){

    this.r = this.r + 20*this.rate;

    this.g = this.g - 20*this.rate;

    this.b = this.b - 2*this.rate;

    this.P = this.P + this.rate;  

    this.O = this.O + 5*this.rate; 

    this.N = this.N + this.rate

    // this.rate = this.rate*0.995

    noStroke();

    fill(this.r,this.g,this.b);

      if(waterpot0.thirdStage == true){

        this.O = this.O + 40*this.rate;

        this.N = this.N + 4*this.rate

        this.P = this.P + 4*this.rate; 

        this.r = this.r + 160*this.rate;

        this.g = this.g - 160*this.rate;

        this.b = this.b - 8*this.rate;

    }

    } 

    if(this.O >= 50){

      // console.log('I am done! ' + frameCount);

        push();

        stroke(0);

        strokeWeight(5);

        fill(255,255,255,50);

        rectMode(CENTER);

        textAlign(CENTER);

        rect(width/2,height/2,230,100);

        textSize(26)

        textFont(Ubuntu);

        fill(255);

        text('I am a grown up! ',width/2,height/2+10)

        pop();

    }

  }

  // When sometime, like the random(1)<0.05, the chili will say it is thirsty, requiring the water.

  thirsty(){

    if(nightcount == 1 && waterCount == 0){

      console.log('in thirsty');

        push();

        stroke(0);

        strokeWeight(5);

        fill(255);

        rect(width/2-130,height/2+100,200,100);

        textSize(20)

        textFont(Ubuntu);

        noStroke();

        textAlign(CENTER)

        fill(0);

        text('I am thirsty! ',width/2-30, height/2+150)

        textSize(14);

        text('Press "W "to water me.', width/2-30, height/2+170)

        pop();

​

        if (ifwater == true){

          waterCount ++;

        }

​

    }else if(nightcount >= 2 && nightcount < 4 && waterCount ==0){

        push();

        stroke(0);

        strokeWeight(5);

        fill(255);

        rect(width/2-130,height/2+100,200,100);

        noStroke();

        fill(0);

        textFont(Ubuntu);

        textAlign(CENTER);

        textSize(20);

        text('I am dying! ',width/2-30, height/2+150)

        textSize(14);

        text('Press "W "to water me.', width/2-30, height/2+170)

        pop();

      if (ifwater == true){

          waterCount ++;

        }

    }else if(nightcount == 4 && waterCount ==0){

      console.log("dead plant!");

        dead = true;

        noStroke();

    }

  }

  flowerpot(){

    push();

    fill(230,200,120);

    beginShape();

      vertex(this.Bcenter-90, height/2);

      vertex(this.Bcenter+90, height/2);

      vertex(this.Bcenter+90+40, height/2+180);

      vertex(this.Bcenter-90-40, height/2+180);

    endShape(CLOSE);

    beginShape();

      vertex(this.Bcenter-90-40, height/2+180);

      vertex(this.Bcenter+90+40, height/2+180);

      vertex(this.Bcenter+90,height/2+360);

      vertex(this.Bcenter-90,height/2+360);

    endShape(CLOSE);

    ellipse(this.Bcenter,height/2+180,300,200);

    pop();

​

  }

  //when the chili is grown up, the pot will shine

  potshine(){

    // if(this.O >= 50){

    //     push();

    //     stroke(0);

    //     strokeWeight(5);

    //     fill(255);

    //     rect(width/2-25,height/2,200,100);

    //     text('I am done',width/2-20,height/2+10)

    //     pop();

    // }

  }

}

​

​

​

class Waterpot {

  constructor() {

​

    this.x = width-200;

    this.y = height-140;

    this.width = 128;

    this.height = 183;

    this.firstStage = true;

    this.secondStage = false;

    this.thirdStage = false;

    this.audioplayed = false;

  }

  // When the chili says it's thirsty, water it.

  water() {

    if(ifwater == true){

      if(this.firstStage){

        this.x -= 2;

        this.y -= 4;

        // frameRate(2*frameRate()); 

        if(this.x<width/2-80){

          this.firstStage = false;

          this.secondStage = true;

        }

      } else {}

      if(this.secondStage){

        rotate(0);

        this.x += 0.5;

        this.y += 1;

        if(this.audioplayed == false){

          waterSound.play();

          this.audioplayed = true;

        }

        if(this.y>height/2-50){

          // ifwater = false;

          // this.firstStage = true;

          this.audioplayed = false;

          this.secondStage = false;

          this.thirdStage = true;

        } else{ }

      }

      if(this.thirdStage){

        rotate(0)

        this.x += 2;

        this.y += 4;

        // frameRate(2*frameRate()); 

        if(this.y>height-150){

          ifwater = false;

          this.firstStage = true;

          this.thirdStage = false;

          // console.log(this.x);

      }

​

      } else {}

    }

    }

  render(){

    // if(ifwater === false){

    push();

    if(this.secondStage){

      translate(this.x,this.y);

      angleMode(DEGREES);

      rotate(-30);

      image(imgWaterpot,0,0);

      image(imgWaterpoint,-50,70);

    } else {

      // image(imgWaterpot,this.x,this.y);

    }

    if(this.thirdStage){

      translate(this.x,this.y);

      angleMode(DEGREES);

      rotate(0);

      image(imgWaterpot,0,0);

    } else {

      image(imgWaterpot,this.x,this.y);

    }

    pop();

    // let wp = image(imgWaterpot,this.x,this.y);

    // wp.remove();

    // } //how to make it disappear?

  }

​

  }

​

​

class Window {

  constructor(){

    this.x = width/2;

    this.y = 0;

    this.width = width/2;

    this.height = 440;

    this.w = 10;

    this.h = 15;

    this.rate = 1;

    this.framecolor = color(0,90,250);

    this.Branchheight = height/2-50+30;

    this.Bcenter = width/2-30;

  }

  frame(){

    push();

    fill(this.framecolor);

    rect(this.x-this.w,this.y-this.h,this.w,this.height+2*this.h);

    rect(this.x,this.y+this.height,this.width,this.h);

    pop();

  }

  //switch the view outside the window between day and night.

​

  day(){

    // let day = 0;

    if(DNswith == true){

      fill(255,0,0);

      // day += 1

      // console.log('day = ' + day);

      rect(this.x,this.y,this.width,this.height);

      image(imgSky,this.x,this.y);

      image(imgSun,this.x+this.rate,this.y-100+this.rate*cos(-1));

​

      push();

      fill(0,99);

      beginShape();

      vertex(this.Bcenter+90,400+360);

      vertex(this.Bcenter-90,400+360);

      vertex(this.Bcenter-90+200-this.rate,800+100);

      vertex(this.Bcenter+90+200-this.rate,800+100+this.rate);

      endShape(CLOSE);

      pop();

​

      if (this.rate < width/2){

        this.rate += 1;

      } else this.rate = 1;

    }

​

  }

​

  night(){

​

    var fromX, fromY;

    var toX, toY;

    var step = 2.5;

​

    if(DNswith == false){

      // fill(0,0,255);

      // rect(this.x,this.y,this.width,this.height);

      fill(0, 20, 80);

      image(imgSkynight,this.x,this.y);

      image(imgMoon,this.x+this.rate,this.y-100+this.rate*cos(-1));

      if (this.rate < width/2){

        this.rate += 1;

      } else this.rate = 1;

​

      if(random()>0.9){

          push();

          stroke(255);

          strokeWeight(random(2,4))

          point(random(this.x,width),random(0,this.height));

          pop();

      }

​

    }

  }

​

  daynightSwitch(){

    let mil = frameCount;

    if (((mil % 300) == 0) && (mil % 600 != 0)){

      // console.log('I am in Day');

      DNswith = true;

​

    } else if (mil % 600 == 0){

      DNswith = false;

      // console.log('I am in Night');

      nightcount +=1;

      console.log('night= '+ nightcount);

    }

​

​

  }

}

​

​

class Surprise {

  constructor(){

  }

  // When timely watered the chili for 3 times, the surprise will show up.

  show(){

  }

}

​

​

​

​

​

function draw() {

  if (!dead){

      // translate(width/2, height/2);

  background(255);

  fill(wallcolorR,wallcolorG,wallcolorB);

  rect(0,0,width,floorheight);

  stroke(0);

  strokeWeight(3);

  line(0, floorheight,width,floorheight);

  noStroke();

​

​

  for(let v=0;v<15;v++){

    for(let i = 0; i < 20; i++){

      // stroke(0);

      fill(0);

      square(0+80*i,floorheight+80*v,40);

    }

  }

  for(let v=0;v<15;v++){

    for(let i = 0; i < 20; i++){

      // stroke(0);

      fill(0);

      square(0+40+80*i,floorheight+40+80*v,40);

    }

  }

​

​

  window0.frame();

  window0.day();

  window0.night();

  window0.daynightSwitch();

​

   chilis[0].branch();

  chilis[0].flowerpot();

​

  for(let i=0; i<chilis.length; i++){

    noStroke();

    chilis[i].freshMiddle();

    chilis[i].freshLeft();

    chilis[i].freshRight();

    chilis[i].grow();

​

  }

  // starrynight();

  waterpot0.water();

  waterpot0.render();

  // console.log('ifwater = ' + ifwater);

  // console.log('frameRate = ' + frameRate())

​

  chilis[0].thirsty();

  }else{

    //dead

    fill(0,0,0,50);

    rect(0,0,600,800);

    fill(255);

    textSize(40);

    textAlign(CENTER);

    text('xOx',width/2,height/2-40);

    textFont(Ubuntu);

    text('I am dead.',width/2,height/2);

  }

}

​

​

function keyPressed() {

  if (keyCode === 87) { //keyCode 87 == W

    // console.log('I am in keyTyped')

    ifwater = true;

  }

}

​

​

​