// CCLab Mini Project - 7.R Particles Template

​

let particles = [];

let totalNum = 1; // Decide the number of particles here.

​

function setup() {

  createCanvas(600, 600);

  //  Generate Particles

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

    particles[i] = new Particle(random(width), random(height));

    // particles here are generated with a random starting location

  }

}

​

function draw() {

  background("#fff6d3");

  //  Particles update and display

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

    particles[i].repelledFrom(mouseX, mouseY);

    particles[i].move();

    particles[i].reappear();

    particles[i].display();

    particles[i].rotate();

​

    // call methods here for making koi move

  }

}

​

//  Design interactions by using Mouse or Keyboard

function mousePressed() {

  //..generate an object when mousePressed at the location of  mouseX,mouseY

  particles.push(new Particle(mouseX, mouseY));

}

​

function keyPressed(){

  // use backspace button to delete!

  if (keyCode === BACKSPACE) {

    // and if there is at least one object

    if (particles.length > 0) {

      let index = 0; // the first index = the oldest object

      particles.splice(index, 1);

    }

  }

}

​

//----------------------------------OOP:Class

class Particle {

  //  Constructor Function:properties

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.xSpd = random(-3, 1);

    this.ySpd = random(-3, 1);

    this.xdia = random(20,30);

    this.ydia = random(30,50);

    this.scaleAmount = random(5,10)

    this.rotAngle = random(TWO_PI); // radians

    this.rotSpd = random(0.01, 0.02);

  }

​

  // methods

  move() {

    this.x += this.xSpd;

    this.y += this.ySpd;

  }

​

  //  Particle's appearance

  display() {

    push();

    translate(this.x, this.y);

    rotate(this.rotAngle);

    // Design the particle's appearance R CODE GOES HERE:

    noStroke();

    fill("#f9a875");

    ellipse(0, 0, this.xdia,this.ydia);

    fill("#eb6b6f");

    ellipse(this.scaleAmount, this.scaleAmount, this.ydia+this.scaleAmount,this.xdia+this.scaleAmount);

    fill("#8be5ff");

    circle(-10, 0, this.scaleAmount*3);

    pop();

  }

  // Implement (at least three) more methods(functions) for the particle's behaviors

​

  // Design the 1st behavior/method for your Particle

  // YOUR CODE GOES HERE:

  reappear() {

    if (this.x < 0) {

      this.x = width;

      this.xSpd = random(-3, 1);

    }

    else if (this.x > width) {

      this.x = 0;

      this.xSpd = random(-3, 1);

    }

    if (this.y < 0) {

      this.y = height;

      this.ySpd = random(-3, 1);

    }

    else if (this.y > height) {

      this.y = 0;

      this.ySpd = random(-3, 1);

    }

  }

  // Design the 2nd behavior/method for your Particle

  // YOUR CODE GOES HERE:

  repelledFrom(targetX, targetY) {

    // With dist(), we can easily get the distance

    // between the particle's current position and the target position.

    let distance = dist(this.x, this.y, targetX, targetY);

    // If the distance is too close (less than 30),

    // we apply the repelling acceleration (actually Force in Physics)

    if (distance < 30) {

      // By calculating "target position - this position"

      // we can get the direction to the target.

      // Then we FLIP the direction by multiplying with -1.

      // We also arbitrary decrease the acceleration to reach the target

      let xAcc = (targetX - this.x) * -1 * -0.2;

      let yAcc = (targetY - this.y) * -1 * -0.2;

      this.xSpd += xAcc;

      this.ySpd += yAcc;

    }

  }

  // Design the 3rd behavior/method for your Particle

  // YOUR CODE GOES HERE:

​

  rotate() {

    this.rotAngle += this.rotSpd;

  }

  // *Design more behavior/method for your Particle* [optional]

  // YOUR CODE GOES HERE:

}

​