Skip to content

Instantly share code, notes, and snippets.

@GoSubRoutine
Last active Nov 27, 2019
Embed
What would you like to do?
Bouncing Colorful Balls
height: 650
scrolling: no
border: yes
license: cc-by-4.0
'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
);
};
<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>
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;
<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>
/**
* 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();
}
<iframe src=global.html></iframe>
<iframe src=instance.html></iframe>
<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>
/**
* 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();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment