body {
margin: 0;
}
/*
* @name Mouse 2D
* @description Moving the mouse changes the position and
* size of each box.
*/
function setup() {
// Fit canvas to available space factoring codepen's margin
let body = document.documentElement;
createCanvas(body.clientWidth, body.scrollHeight - 5);
// Prevent page pan when you drag about the canvas
body.getElementsByTagName("canvas")[0].addEventListener(
"touchstart",
(e) => { e.preventDefault(); },
false
);
noStroke();
rectMode(CENTER);
}
function draw() {
background(200);
fill(30, 200, 50);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(50, 34, 200);
let inverseX = width - mouseX;
let inverseY = height - mouseY;
rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10);
}
This Pen doesn't use any external CSS resources.