HTTP/2 200 date: Sat, 11 Oct 2025 10:31:15 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=9iu6fhw7CPdiLad91pasKZ5ytqkvD3kbW9a8mSRbFGAElDNep7MXJykRHiPcpYQqTUasH3RgKGHwFlitkBEemvIM6G72NiKTM8TE44w%3D"}]} content-encoding: gzip cf-ray: 98cdafd1af0448f8-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Mouse2D

Moving the mouse changes the position and size of each box.

Original Processing.org Example: Mouse2D

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
void setup() 
{
  size(200, 200); 
  noStroke();
  colorMode(RGB, 255, 255, 255, 100);
  rectMode(CENTER);
}
void draw() 
{   
  background(51); 
  fill(255, 80);
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
  fill(255, 80);
  rect(width-mouseX, height/2, ((height-mouseY)/2)+10, ((height-mouseY)/2)+10);
}