HTTP/2 200 date: Sat, 11 Oct 2025 18:25:07 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=Zy4i1OwoxFq65AYK%2BubGZxh5mYqSh42slHPlT5c7NzZuDqVYV%2FHQGdkP6dbB9Q5NrZEYUrDMm3uekuwXIB7LmPxzE1%2BsRiz1Pm4lJ8I%3D"}]} content-encoding: gzip cf-ray: 98d065f11c623de5-BOM alt-svc: h3=":443"; ma=86400

Processing.js

StoringInput

Move the mouse across the screen to change the position of the circles. The positions of the mouse are recorded into an array and played back every frame. Between each frame, the newest value are added to the end of each array and the oldest value is deleted.

Original Processing.org Example: StoringInput

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() 
{
  size(200, 200);
  smooth();
  noStroke();
  fill(255, 153); 
}
void draw() 
{
  background(51); 
  
  // Reads throught the entire array
  // and shifts the values to the left
  for(int i=1; i<num; i++) {
    mx[i-1] = mx[i];
    my[i-1] = my[i];
  } 
  // Add the new values to the end of the array
  mx[num-1] = mouseX;
  my[num-1] = mouseY;
  
  for(int i=0; i<num; i++) {
    ellipse(mx[i], my[i], i/2, i/2);
  }
}