Ball in the Chamber

.block

height: 440

index.html

<script async src=http://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js

/**
 * Ball in the Chamber (v1.0.2)
 * GoToLoop (2017-Nov-13)
 *
 * Forum.Processing.org/two/discussion/24978/
 * issues-passing-an-instance-of-one-class-into-another-class-in-p5-js#Item_7
 *
 * Bl.ocks.org/GoSubRoutine/d0b7d3058d84970e83cf8685f8e69777
 * GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-global/
 *
 * Forum.Processing.org/two/discussion/10680/collision-colors#Item_14
 * Studio.ProcessingTogether.com/sp/pad/export/ro.9qPrLGrYGkr2o
 */

'use strict';

const BALLS = 4, balls = Array(BALLS).fill(),
      CHAMBERS = 8, chambers = Array(CHAMBERS).fill(),
      BG = 0o350;

let bg;

function setup() {
  createCanvas(640, 440);

  ellipseMode(CENTER).rectMode(CORNER).colorMode(RGB);
  strokeWeight(Ball.BOLD).stroke(Ball.STROKE);

  bg = color(BG);

  balls[0] = new Ball(50,  50,  4, 2);
  balls[1] = new Ball(50,  80,  3, 5);
  balls[2] = new Ball(100, 150, 4, 5);
  balls[3] = new Ball(300, 300, 6, 2);
 
  chambers[0] = new Chamber(1,   1,   'red');
  chambers[1] = new Chamber(599, 1,   'lightgreen');
  chambers[2] = new Chamber(1,   399, 'blue');
  chambers[3] = new Chamber(599, 399, 'pink');
  chambers[4] = new Chamber(300, 1,   'yellow');
  chambers[5] = new Chamber(300, 399, 'cyan');
  chambers[6] = new Chamber(1,   199, 'orange');
  chambers[7] = new Chamber(599, 199, 'magenta');
}

function draw() {
  background(bg);

  for (const b of balls) {
    for (const c of chambers)  if (b.colliding(c)) {
      b.c = c.c;
      break;
    }
 
    b.script();
  }
 
  for (const c of chambers)  c.display();
}

class Ball {
  static get DIM() {
    delete this.DIM;
    return this.DIM = 25;
  }

  static get RAD() {
    delete this.RAD;
    return this.RAD = this.DIM >> 1;
  }

  static get BOLD() {
    delete this.BOLD;
    return this.BOLD = 2;
  }

  static get STROKE() {
    delete this.STROKE;
    return this.STROKE = color(0);
  }

  static get INIT_FILL() {
    delete this.INIT_FILL;
    return this.INIT_FILL = color(0xff);
  }

  constructor(x, y, vx, vy) {
    this.x = x, this.y = y, this.vx = vx, this.vy = vy;
    this.c = Ball.INIT_FILL;
  }

  script() {
    return this.update().display();
  }

  update() {
    const { RAD } = Ball;
    if ((this.x += this.vx) > width  - RAD | this.x < RAD)  this.vx *= -1;
    if ((this.y += this.vy) > height - RAD | this.y < RAD)  this.vy *= -1;
    return this;
  }

  display() {
    fill(this.c).ellipse(this.x, this.y, Ball.DIM);
    return this;
  }

  colliding(c) {
    const { RAD } = c.constructor;
    return sq(c.x + RAD - this.x) + sq(c.y + RAD - this.y) < sq(RAD + Ball.RAD);
  }
}

class Chamber {
  static get DIM() {
    delete this.DIM;
    return this.DIM = 40;
  }

  static get RAD() {
    delete this.RAD;
    return this.RAD = this.DIM >> 1;
  }

  static get BOLD() {
    delete this.BOLD;
    return this.BOLD = 2;
  }

  static get STROKE() {
    delete this.STROKE;
    return this.STROKE = color(0);
  }

  constructor(x, y, c) {
    this.x = x, this.y = y, this.c = color(c);
  }

  display() {
    fill(this.c).rect(this.x, this.y, Chamber.DIM, Chamber.DIM);
    return this;
  }
}