// Ben

//Code 1, Assignment 8: Drawing Poster

​

//reference: https://github.tslytsly.me/p5.js-projects/Steering_Text_Paths/index.html

​

//2 interactions: 1. move the mouse over to make the leaves move

//                2. click mouse to make leaves fall down or on the canvas alternatively

var font;

var leaf1;

var leaf2;

var leaf3;

var leaf4;

var leaf5;

var leaf6;

var leafArray;

var points;

var textXpos=10;

var textYpos=300;

var SizeOfText=210;

var textMessage='FALL'

var vehicles = [];

var mouseClick=0;

var stopLoop=0;

function preload() {

  font = loadFont('LemonMilkBold-gx2B3.otf')

  leaf1 = loadImage('Assets/Leaf1.png');

  leaf2 = loadImage('Assets/Leaf2.png');

  leaf3 = loadImage('Assets/Leaf3.png');

  leaf4 = loadImage('Assets/Leaf4.png');

  leaf5 = loadImage('Assets/Leaf5.png');

  leaf6 = loadImage('Assets/Leaf6.png');

  num = loadImage('Assets/2020.png');

  leafArray = [leaf1,leaf2,leaf3,leaf4,leaf5,leaf6] //array of the leaves

}

function setup() {

  createCanvas(600, 600);

  points=font.textToPoints(textMessage,textXpos,textYpos,SizeOfText) //converts the outline of the text into points

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

    var pt = points[i]; //individual point on the 

    var vehicle=new Vehicle(pt.x,pt.y,i) //for each individual point, call the class to create a new leaf with different behaviours

    vehicles.push(vehicle); //adding to array of the vehicle

  }

}

function draw() {

  background('#f4a77b');

  fill('#f4a77b');

  pic=image(num,250,350) //2020 text

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

    var v = vehicles[i]; //traversing through the class array

    //calling different class functions

    v.update(); //updating the acceleration

    v.show(); // different leaf images

    v.behaviors(); //controls acceleration, mouse actions etc.

  }

  textFont(font); //fall text on top of the leafs

  textSize(SizeOfText);

  text(textMessage,textXpos+15,textYpos+15)

  switch(mouseClick){

    case 0:

      scene1(); //fall onto the canvas

      break

    case 1:

      scene2(); //fall off the canvas

      break

  }

}

function scene1(){

      points=font.textToPoints(textMessage,textXpos,textYpos,SizeOfText)

      if (stopLoop==0){

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

        var pt = points[i];

        var v = vehicles[i];

          v.reset(random(width),random(-5000,height)); //reset all the initial positions randomly

          stopLoop=1; 

        v.newTarget(pt.x,pt.y,i); //reset all the final positions to points on the text outline

      }

      }

}

function scene2(){

  if (mouseX < 600 && mouseY < 600){

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

        var v = vehicles[i];

        v.newTarget(v.pos.x, height); //reset final postion vector to the bottom of the canvas at height 

        stopLoop=0;

      }

    }

}

function mousePressed(){

  mouseClick++ //changes scene when the mouse is pressed

  mouseClick=mouseClick%2

}