xxxxxxxxxx
137
// 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:
}