HTTP/2 200 date: Sat, 11 Oct 2025 10:31:02 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=W13lDSeauK1PrXcUqoOSOLgUB3rbyNZSn8GKpb5kdhMtTXUq9SBwSnECWHe17vsu%2FrazPpd76j46StpSgiWqIIKI0G8fBxT8xIA6j9I%3D"}]} content-encoding: gzip cf-ray: 98cdaf7d5be13c4c-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Distance2D

Move the mouse across the image to obscure and reveal the matrix. Measures the distance from the mouse to each square and sets the size proportionally.

Original Processing.org Example: Distance2D

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
float max_distance;
void setup() {
  size(200, 200); 
  smooth();
  noStroke();
  max_distance = dist(0, 0, width, height);
}
void draw() 
{
  background(51);
  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= width; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 66;
      ellipse(i, j, size, size);
    }
  }
}