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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js