Bouncing Colorful Balls

.block

height: 650
scrolling: no
border: yes
license: cc-by-4.0

adjustFrameSize.js

'use strict';

p5.prototype.adjustFrameSize = function () {
  if (frameElement) {
    frameElement.height = frameElement.frameBorder = 0;
    frameElement.height = this.getDocHeight() + 'px';
    frameElement.width  = this.getDocWidth()  + 'px';
  }
};

p5.prototype.getDocWidth = function () {
  return Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
  );
};

p5.prototype.getDocHeight = function () {
  return Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );
};

all.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>

<script defer src=global.js></script>
<iframe src=global.html></iframe>

<script defer src=instance.js></script>
<script defer src=instance.js></script>

ball.js

class Ball {
  constructor(p = p5.instance) {
    this.p = p;
    this.pos = p.createVector();
    this.vel = p.createVector();
    this.reset();
  }

  reset() {
    const { p, pos, vel, VEL, MIN_RAD, MAX_RAD, ALL_COLORS } = this,
          r = this.rad = p.round(p.random(MIN_RAD, MAX_RAD));

    pos.set(p.random(r, p.width - r), p.random(r, p.height - r));
    vel.set(p.random(-VEL, VEL), p.random(-VEL, VEL));

    this.c = p.color('#' + p.hex(~~p.random(ALL_COLORS), 3));

    return this;
  }

  update() {
    const { p: { width: w, height: h }, pos, vel, rad } = this;

    pos.add(vel);
    pos.x > w - rad | pos.x < rad && (vel.x *= -1);
    pos.y > h - rad | pos.y < rad && (vel.y *= -1);

    return this;
  }

  display() {
    this.p.fill(this.c).circle(this.pos.x, this.pos.y, this.rad << 1);
    return this;
  }
}

Ball.prototype.VEL = Ball.VEL = 2;
Ball.prototype.MIN_RAD = Ball.MIN_RAD = 5;
Ball.prototype.MAX_RAD = Ball.MAX_RAD = 30;
Ball.prototype.ALL_COLORS = Ball.ALL_COLORS = 0x1000;

global.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>
<script defer src=global.js></script>

<h3>Bouncing Colorful Balls [Global Mode]:</h3>

global.js

/**
 * Bouncing Colorful Balls [Global Mode] (v2.0.0)
 * AllOneString & GoToLoop (2016-Jun-28)
 *
 * Discourse.Processing.org/t/make-class-get-all-functions-of-p5-js/12558/2
 * Bl.ocks.org/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22
 * 
 * Forum.Processing.org/two/discussion/17306/multiple-canvases-on-one-page#Item_12
 * CodePen.io/GoSubRoutine/pen/KaerGb/right/?editors=101
*/

'use strict';

const NUM = 15, balls = Array(NUM).fill();
let bg;

function setup() {
  createCanvas(600, 600).mousePressed(reset);
  adjustFrameSize();
  noStroke();
  bg = color(Array.from({ length: 3 }, () => ~~random(0xd0, 0x100)));
  for (let i = 0; i < NUM; balls[i++] = new Ball);
}

function draw() {
  background(bg);
  for (const b of balls)  b.display().update();
}

function reset() {
  for (let i = 0; i < 3; bg.levels[i++] = ~~random(0xd0, 0o400));
  for (const b of balls)  b.reset();
}

index.html

<iframe src=global.html></iframe>
<iframe src=instance.html></iframe>

instance.html

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>
<script defer src=instance.js></script>

<h3>Bouncing Colorful Balls [Instance Mode]:</h3>

instance.js

/**
 * Bouncing Colorful Balls [Instance Mode] (v2.0.0)
 * AllOneString & GoToLoop (2016-Jun-28)
 *
 * Discourse.Processing.org/t/make-class-get-all-functions-of-p5-js/12558/2
 * Bl.ocks.org/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22
 * 
 * Forum.Processing.org/two/discussion/17306/multiple-canvases-on-one-page#Item_13
 * CodePen.io/GoSubRoutine/pen/KaerGb/right/?editors=101
*/

'use strict';

new p5(p => {
  const NUM = 15, balls = Array(NUM).fill();
  let bg;

  p.setup = () => {
    p.createCanvas(600, 600).mousePressed(reset);
    p.adjustFrameSize();
    p.noStroke();
    bg = p.color(Array.from({ length: 3 }, () => ~~p.random(0xd0, 0x100)));
    for (let i = 0; i < NUM; balls[i++] = new Ball(p));
  };

  p.draw = () => {
    p.background(bg);
    for (const b of balls)  b.display().update();
  };

  function reset() {
    for (let i = 0; i < 3; bg.levels[i++] = ~~p.random(0xd0, 0o400));
    for (const b of balls)  b.reset();
  }
});