coding challenge #78

by hlim188

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<html>
<head></head>
  <body>

  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

// coding challenge #78: https://youtu.be/UcdigVaIYAk

let particles = [];

function setup() { 
  createCanvas(400, 300);
} 

function draw() { 
  background(0);
  for(let i = 0; i < 5; i++){
    let p = new Particle();
    particles.push(p);
  }
  for(let i = 0; i < particles.length; i++){
    particles[i].update();
    particles[i].show();
    if(particles[i].finished()){
      // remove this particle
      particles.splice(i, 1);
    }
  }
}

class Particle{
  constructor(){
    this.x = 200;
    this.y = 280;
    this.vx = random(-1, 1);
    this.vy = random(-5, -1);
    this.alpha = 255;
  }
  
  finished(){
    return this.alpha < 0;
  }
  
  update(){
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 5;
  }
  
  show(){
    noStroke();
    fill(255, this.alpha);
    ellipse(this.x, this.y, 16);
  }
}