Comments on: towards the within: steering code

By: Morgan

Morgan — Thu, 12 Mar 2009 04:52:51 +0000

Ahh, I see. Nifty trick. So in “Toward #6″ (I like that one best) your offset is 0, but your light circle size is fixed at 4, where your colored circle is size 2. This makes it appear like the light source is directly overhead in the z axis or that the shoestrings are semi-transparent? I also like the “fuzz” growing out at the tangents on this one. I’ll give this a try. If I come up with anything interesting, I’ll send you a link.

Thanks for the explanation.

–m

By: Frederik Vanhoutte

Frederik Vanhoutte — Tue, 10 Mar 2009 22:50:51 +0000

Hi morgan, thanks for the kind comment. It's true that most code is uncommented. This is because it's rough-and-tumble, stream-of-consciousness code. A "sketch" in the true sense of the word. The 3D-effect is actually relatively simple to achieve. The moving particles are rendered as small circles and drawn over the previous frame. The step size is kept small so there's a lot of overlap between two steps. To add the 3D-like emboss, you need to draw everything twice. Once with a slight shift and in a "light" color, and then once again, now in the particle color and without the shift. This way you get the rendered circle with a small "light" border in the direction of the shift. If the step size is small enough you get the shoestring illusion. You can find this in the code:

fill(255,120); // white fill
      ellipse(tracers[t].pos.x+light.x,tracers[t].pos.y+light.y,3,3);// white fill is offset by (light.x, light.y)
      fill(0,120); // black fill
      ellipse(tracers[t].pos.x,tracers[t].pos.y,3,3); // draw the particle

In this case, the light offset is fixed for all particles, giving the illusion of a light source far away in that direction. Another piece, haywire gives the illusion of a central lightsource. This is achieved by varying the shift according to the particle position. E.g. a particle on the lower-right will have its light fill shifted to the upper-left, etc...

By: Morgan

Morgan — Tue, 10 Mar 2009 21:24:32 +0000

I really like all these examples, and appreciate that you’ve included the code. I am very new to Processing and was wondering how you achieved the 3-d “shoestring” effect of your tracers. From the code it looks like they are composed of lines and a couple of ellipses? Can you describe this in more detail, or maybe add some comments to the code?

Great work! I love the site.

–m