Incremental Grid

Here’s two nifty tricks:

1) Using sin waves with incrementing frequencies to pulse each cell of a grid. This is a square grid version of the animation in the Whitney Music Box.

      fill( map(sin( millis()*.00001*n ),-1,1,0,255) );

n is a number which increases for each cell. .00001 is used to control the speed, and millis() provides the impetus for the motion. Since sin() goes from -1 to 1, I used map() to make it go from 0 to 255.

It’s tempting to use frameCount for animations like this, but I usually use millis() because it makes the speed of the animation predictable, regardless of whatever framerate I’m managing to achieve.

2) Each cell is drawn as if it is 1 pixel wide. I use scale() to grow the whole thing to the desired size.

  scale(cellWidth);
  for (int y = 0; y < gridWidth; ++y) {
    for (int x = 0; x < gridWidth; ++x) {
      fill( map(sin( millis()*.00001*n ),-1,1,0,255) );
      rect( x, y, 1, 1 );
      ++n;
    }
  }