Home Cooking XML Page Civil War Letters Art

Glowing Dots of Light

One of the tools in my toolbox is speckles: thousands of dots, usually light on a dark background, giving a soft glowing form to some shape or other. I've experimented with lots of shapes, and I'm almost always pleased with the results. Here are a couple: Specklization of a rose and a Sierpinksi triangle curve:

There are two kinds of speckling: interior and exterior. Interior speckling is distributed inwards to the center of a figure away from the boundary. Exterior speckling is distributed outwards from the boundaries.

There are a few moving parts:

1. distribution of speckles
2. determining speckling vectors
3. colouring
4. rendering thousands of dots in single path

Let's take these one by one.

Speckles are distributed using an exponential distribution. This gives only non-negative values, with higher probabilities to numbers closer to zero, tailing away more or less sharply depending on the λ parameter. For inner speckles I scale this to the maximum distance; for outer speckles I scale this by a spread parameter. Post-multiplication like this does create some artifacts: noticeable banding for exterior speckles when the spread is somewhat high. For example:

The basic technique for determining speckling vectors depends on being able to select random boundary points. Given a random value `t` between 0 and 1, it is easy to determine a point at the fraction `t` from the start to the end of a straight edge. Similarly there are methods for figuring that out for cubic and quadratic Bézier curves and for circles and ellipses. For a path or polygon, the point can be determined by interpolating based on edge lengths relative to the overall length. Since all my figures consist of such shapes, random edge points can be selected in this fashion for any figure by applying an ordering over all basic shapes.

Given an edge point, the vector can be determined either by computing the direction from the edge point to or from the center of the figure, or by using the normal vector at that point. For closed shapes (polygons, polyhedra, ellipses, etc.) the center of the object can be used to define the vectors. Here each polygon is being speckled separately.

For polyhedra we can either speckle face by face (using the center of the face for the vectors) or as a whole (using the center of the polyhedron for the vectors). Here the center of the dodecahedron is used to define all the vectors.

For paths that don't have a center per se, we can use the center of the bounding box or some specific focal point. In general using centers and approximate centers is easier and faster to calculate and produces acceptable result, although for some applications normal vectors look nicer. Centers also provide a useful limit to use for scaling interior speckles.

Notice how in this image, the speckling vectors at the ends of the curve are larger than those in the middle, and point towards the focus of the curve.

Other techniques can be used, however. In this image, the vectors and limits are defined by adjacent contours. Thus close contours end up with tighter speckling and distance contours end up with wider speckling. The contours themselves are not rendered directly.

Speckle colouring looks best when all the speckles in a class (interior vs exterior) are similar in colouring: all some kind of off-white, or all some shade of red, for example. Contrasting interior and exterior speckles can look nice, however. Light on dark tends to look better.

I create my images in SVG. Creating tens or hundreds of thousands of separate little circles would create massive files that would take forever to render. I use a little trick to make this better:

1. collect all the speckles with a particular colour together
2. for each single-colour collection of speckles create an SVG path with that stroke colour that has a stroke width of `w`, a `stroke-linecap` of `round`, alternating between moving to one of the points and drawing a segment of length `w` from that point

Given this framework of making speckles, we can add them for texturing as well. Here the sky around the sun has some red speckling to augment the sunset:

There is one final trick. We can choose to draw the speckling vectors rather than the points at the ends of those vectors. Bam! Behold the cosmic egg!