New post

Orbiting dots to Mona Lisa

by Nov 26 2015

Step 1.

Each of these GIFs is a 50-frame loop, made with Processing. This is one of the first ones I made. Each dot moves in a fixed circle, all at the same frequency, but the phase of the dots (the initial position on its circle) is adjusted based on distance from center. I was imitating a very similar GIF by /u/davebees that a friend had posted on Facebook, and riffing on the idea.

Step 2.

Here I modified the phase to form a spiral using log(d)+a, where (d,a) are the polar coordinates of the cell.

Step 3.

Same as Step 2, but during the cycle, I translate (scroll, pan) to a different tile, creating the illusion that each dot is traveling across the screen, instead of orbiting in place. In fact, they are still orbiting in place, relative to the underlying framework.

Step 4.

Instead of a spiral, the phase of each dot is determined by the color of a pixel in an underlying target image of the Mona Lisa. The amount of phase displacement can vary. Here I am displacing it a lot, but later (step 11), I dialed it back to a quarter cycle (PI/2).

Step 5.

Got rid of the underlying grid showing the circles. Now it's less obvious what is going on.

Step 6.

More dots.

Step 7.

Even more dots.

Step 8.

Changed the background color from white to black. Changed the dot color to a sampled color from the underlying image.

Step 9.

Rewrote script to get rid of the jitter. Changed the method used for sampling the underlying image so it more smoothly interpolates color and phase.

Step 10.

Changed to an interleaved (hexagonal) packing, so I can pack the dots tighter.

Load 4 more images Grid view
Description of a set of changes to a Processing script.
TAKE ME UP

Embed Code

Use old embed code

Copy and paste the HTML below into your website:

Preview

  • #
  • #
  • #

Hide old embed code