Doug Rudolph


Reflective Grid

Posted on May 28th, 2018

Rippling effect based on a waving flag



So because it is memorial day, I was thinking about a new animation to code with the extra day off from work; and because Google is showing a waving American Flag as the banner to Google searches, I decided to create a rippling/reflective grid effect inspired by a waving flag.

memorial day

Now granted, the animation is slightly off, at least I think it is, but nonetheless, the animation was fun to code. Something worth mentioning is that while a lot of the code I used was boilerplate code that I recycled from my previous projects, trying to figure out an elegant solution to giving each node's radius an offset in size was pretty tricky.

In order to create the offset, I used a fun modulus arithmetic trick:

//iterate over columns
for(var i = 0; i < this.size; i++){

    // array that has a given row of nodes appended to it
    var row = [];

    //iterate over rows
    for(var j = 0; j < this.size; j++){

        // increase the radius for every node by 1
        // once we have inserted this.size amount of nodes,
        // reset the radius back to 1
        radius_delta = (radius_delta + 1) % (size-1);

        //append node
        row.push(new Node(h_center + i*node_displacement,
                    v_center + j*node_displacement,
                    radius_delta));
    }

    // add array of nodes to grid
    this.nodes.push(row);
}

As the code shows, the trick I use applies the mod operator in order to limit the max size of the radius. By ensuring a given node's radius is never larger than a certain value - in this case, that value is this.size - 1, the outcome is this offset of varying radii that seem to wrap the grid.

Thanks for viewing, and as always, until next time :)