shuffle_grid.pde

ArrayList<Widget> widgets = new ArrayList<Widget>();

void setup() {
  size(500, 500);
  
  // Create widgets
  for (int i = 0; i < 100; i++) {
    widgets.add(new Widget());
  }

  // Trigger initial layout 
  mousePressed();
}

void mousePressed() {
  // Shuffle
  java.util.Collections.shuffle(widgets);

  // Lay out in a grid
  for (int i = 0; i < widgets.size(); i++) {
    widgets.get(i).targetPosition.x = 15 + (i % 10) * 50; 
    widgets.get(i).targetPosition.y = 15 + floor(i / 10.0) * 50;
  }
}

void draw() {
  background(0);
  noStroke();
  fill(255);  

  for (Widget widget : widgets) {
    // Lerp current position towards target
    widget.currentPosition.x = lerp(widget.currentPosition.x, widget.targetPosition.x, 0.1);
    widget.currentPosition.y = lerp(widget.currentPosition.y, widget.targetPosition.y, 0.1);    

    // Draw  
    rect(widget.currentPosition.x, widget.currentPosition.y, 20, 20);
  }
}

class Widget {
  PVector currentPosition = new PVector(0, 0);
  PVector targetPosition = new PVector(0, 0);
}