var sliderR, sliderG, sliderB;

var slFR, slFG, slFB;

var x, y;

var balls = [];

var button;

​

function setup() {

  createCanvas(507, 250);

  for (var i = 0; i < 2; i++) {

    balls[i] = new Ball(200, 200);

  }

  button = createButton("Click Here!");

  button.mousePressed(madness);

  createP(" ");

  sliderR = createSlider(0, 255, 255);

  sliderG = createSlider(0, 255, 45);

  sliderB = createSlider(0, 255, 45);

  createP(" ");

  slFR = createSlider(0, 255, 0);

  slFG = createSlider(0, 255, 0);

  slFB = createSlider(0, 255, 0);

}

​

function madness() {

  balls.push(new Ball(x, y));

}

​

function draw() {

  background(sliderR.value(), sliderG.value(), sliderB.value());

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

    balls[i].move();

    balls[i].show();

    balls[i].bounce();

  }

  x = random(width);

  y = random(height);

  r = slFR.value();

  g = slFG.value();

  b = slFB.value();

}

​

class Ball {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.xs = 4;

    this.ys = -3;

  }

  show() {

    fill(r, g, b);

    noStroke();

    ellipse(this.x, this.y, 24, 24);

  }

  move() {

    this.x = this.x + this.xs;

    this.y = this.y + this.ys;

  }

  bounce() {

    if (this.x > width || this.x < 0) {

      this.xs = this.xs * -1;

    }

    if (this.y > height || this.y < 0) {

      this.ys = this.ys * -1;

    }

  }

}