var balls = [];

var slider;

function setup() {
  createCanvas(600, 600);

  slider = createSlider(0, 360, 180, 40);
  slider.position(260, 610);
  slider.style('width', '80px');

}

function draw() {
  background(0);
  fireworks();
  
}

function fireworks(){
   for (var i = 0; i < balls.length; i++) {
    balls[i].update();
    balls[i].render();
    if (balls[i].ballisFinished()) {
      balls.splice(i, 1);
    }
  }
  for (var x = 0; x < 10; x++) {
      balls.push(new Ball((0 + random(-30, 30)), 0 + random(-30, 30)));
  }
  for (var x = 0; x < 10; x++) {
      balls.push(new Ball((0 + random(-30, 30)), 600 + random(-30, 30)));
  }
  for (var x = 0; x < 10; x++) {
      balls.push(new Ball((600 + random(-30, 30)), 0 + random(-30, 30)));
  }
  for (var x = 0; x < 10; x++) {
      balls.push(new Ball((600 + random(-30, 30)), 600 + random(-30, 30)));
  } 
}

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 3;
    this.gravity = 0.7;
    this.diameter = 20;

    this.ax = random(-this.speed, this.speed);
    this.ay = random(-this.speed, this.speed);

    this.colour = random(['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423']);
  }

  update() {
    this.diameter = this.diameter - 0.15;
    this.x += this.ax / 2;
    this.y += this.ay / 2;

    this.x += random(-this.speed / 2, this.speed / 2);
    this.y += random(-this.speed / 2, this.speed / 2);
  }

  ballisFinished() {
    if (this.diameter < 0) {
      return true;
    }
  }

  render() {
    //print(this.colour);
    noStroke();
    if (this.diameter > 0) {
      fill(this.colour);
      ellipse(this.x, this.y, this.diameter, this.diameter);
    }

  }
}