var p1, p2, size1, size2;
createCanvas(windowWidth, windowHeight, WEBGL);
p1 = new p5.Vector(0, 0, 0);
p2 = new p5.Vector(0, 0, 0);
p2.x = map(mouseX, 0, width, -width / 2, width / 2);
p2.y = map(mouseY, 0, height, -height / 2, height / 2);
translate(p1.x, p1.y, p1.z);
box(size1.x, size1.y, size1.z);
translate(p2.x, p2.y, p2.z);
if (checkCollision(p1, p2, size1, size2)) {
box(size2.x, size2.y, size2.z);
function mouseClicked() {
function mouseWheel(event) {
p2.z += event.delta * 0.1;
function checkCollision(p1, p2, size1, size2) {
if (Math.abs(p1.x - p2.x) < (size1.x + size2.x) * 0.5) {
if (Math.abs(p1.y - p2.y) < (size1.y + size2.y) * 0.5) {
if (Math.abs(p1.z - p2.z) < (size1.z + size2.z) * 0.5) {
function randomizeSizes() {
size1 = new p5.Vector(random(10, 100), random(10, 100), random(10, 100));
size2 = new p5.Vector(random(10, 100), random(10, 100), random(10, 100));