let portName = '/dev/tty.usbmodem142401';  // fill in your serial port name here

let inData;

​

let img;

let leaves = [];

let x, y, xSpeed, ySpeed,rectX, rectY, rectWidth, rectHeight, direction; 

let colorR, colorRSpeed, colorB, colorBSpeed;

let button;

let leafState = true; // false -> leaves fall down

​

function preload(){

  img = loadImage('plant.png');

}

​

function setup() {

  serial = new p5.SerialPort();       // make a new instance of the serialport library

  // serial.on('list', printList);  // set a callback function for the serialport list event

  serial.on('connected', serverConnected); // callback for connecting to the server

  serial.on('open', portOpen);        // callback for the port opening

  serial.on('data', serialEvent);     // callback for when new data arrives

  serial.on('error', serialError);    // callback for errors

  serial.on('close', portClose);      // callback for the port closing

  serial.list();                      // list the serial ports

  serial.open(portName);              // open a serial port

  createCanvas(800, 800);

   // for (let i = 0; i < 10; i++){

   //  let x = random(width);

   //  let y = random(height);

   //  let r = random(35, 55);

   //  let b = new leaf(x, y, r);

   //  leaves.push(b);

  xSpeed = 0;

  ySpeed = -1;

  rectX = 365;

  rectY = 520;

  rectWidth = 70;

  rectHeight = 210;

  x = rectX;

  y = rectY+rectHeight;

​

  direction = "UP";

  colorR = 25;

  colorB = 230;

  colorRSpeed = 0.92;

  colorBSpeed = 0.92;

   button = createButton('End the Game');

   button.position(19, 19);

   button.mousePressed(makeLeafFall);

}

​

function serverConnected() {

  console.log('connected to server.');

}

function portOpen() {

  console.log('the serial port opened.')

}

function serialEvent() {

  inData = Number(serial.read());

  console.log(inData);

  //when it's the darkest (200), leaves grow more and more and fast

  if (inData > 140){

    leaves.push(new leaf(random(width*0.15, width*0.8), random(height*0.45, height*0.04), r = random(10, 60)));

}

}

function serialError(err) {

  console.log('Something went wrong with the serial port. ' + err);

}

function portClose() {

  console.log('The serial port closed.');

}

​

function draw() {

  background(255, 255, 228);

​

//clay pot

  fill(217, 117, 87);

  noStroke();

  quad(width*0.25, height*0.6, width*0.75, height*0.6, width*0.625, height*0.95, width*0.375, height*0.95);

  stroke(154, 74, 51);

  strokeWeight(30);

  line(width*0.25, height*0.6, width*0.75, height*0.6);

//plant branches 

 image(img, width*0.09, height*0.06, 600, 650); 

//for loop leaves, each leaf starts growing out and expanding at different time and place

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

    leaves[i].show();

    leaves[i].growing();

   }

    if (leafState == false) {

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

    leaves[i].fallDown();

    }    

  }

  // if (leaves.length > 5){

  //   leaves.splice(0, 1);

  // }

  noFill();

  stroke('black');

  strokeWeight(3);

  rect(rectX, rectY, rectWidth, rectHeight);

  // noStroke();

  fill(colorR, 0, colorB);

  strokeWeight(0);

  colorR = colorR + colorRSpeed

  if (colorR > 255 || colorR < 0   ){

   colorRSpeed *= -1

  }

   colorB = colorB + colorBSpeed

  if (colorB > 255 || colorB < 0   ){

   colorBSpeed *= -1

  }

  // console.log(colorR, colorB);

  ellipse(x, y, 30, 30);

  x = x + xSpeed;

  y = y + ySpeed;

  if( y <= rectY && direction == "UP"){

    xSpeed = 1;

    ySpeed = 0; 

    direction = "RIGHT";

  }

  if( x >= rectX + rectWidth && direction == "RIGHT"){

    xSpeed = 0;

    ySpeed = 1;

    direction = "DOWN";

  }

  if( y >= rectY + rectHeight && direction == "DOWN"){

    xSpeed = -1;

    ySpeed = 0;

    direction = "LEFT";

  }

  if ( x <= rectX && direction == "LEFT"){

  xSpeed = 0;

  ySpeed = -1; 

  direction = "UP";

  } 

}

​

function makeLeafFall() {

  if (leafState) {

    leafState = false;

  } else {

    leafState = true;

    inData = 0; 

  }

}

​

class leaf {

  constructor(x, y, r){

    this.x = x;

    this.y = y;

    this.diameter = r; 

    this.speed = 0.02; //breathing controlled 

    this.Xspeed = random(-1, 1);

    this.colorH = this.diameter;

    this.colorSpeed = this.diameter/200;

  }

  growing(){

    this.diameter += this.speed;

    if (this.diameter > 60){

    this.speed = 0;

    // this.y += 1;

    // this.x += this.Xspeed;

    }

  }

  show(){

    stroke(19, 78, 19);

    strokeWeight(2);

    line(this.x, this.y-(this.diameter+10)*0.6, this.x, this.y+(this.diameter+10)*0.5);

    line(this.x, this.y-(this.diameter+10)*0.25, this.x+this.diameter*0.5, this.y);

    line(this.x, this.y+(this.diameter+10)*0.1, this.x-this.diameter*0.35, this.y+(this.diameter+10)*0.35);

    fill(this.colorH, 139, 34, 200);

    noStroke();

    ellipse(this.x, this.y, this.diameter, this.diameter+10); 

    this.colorH = this.colorH + this.colorSpeed;

  }

  fallDown(){

    this.y += 1;

    this.x += this.Xspeed;

  }

}