# Incremental Grid

21 Nov

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;
}
}
```

### One Response to “Incremental Grid”

1. Luca Faccenda November 26, 2011 at 5:59 am #

Dear,
where did you go?
We are at day 26 and I miss your great post.
Ciao, LF