stippling

a quickie to celebrate holidays!

to stipple (verb)

to paint, engrave, or draw by means of dots or small touches.

here’s why english is a beautiful language. stippling is a graphic way of rendering masses. I must admit I’m obsessed with stippling for years now, I wanted to give it a try for a while and never found time to do so.

to mimic a stippling, we’ll need dots – obviously – and one approach would be to randomly distribute dots over a surface, retrieve the greyscale value of a picture’s pixel, normalize it, then index the size of the dot on this value. that’s how the final render works (somehow). but there’s a more elegant way to distribute dots over a surface called the Poisson Disc distribution. I chose to use it for the graphic quality of the ouput but also because Poisson means fish in french which I find extremely funny. a good explanation & example of what Poisson distribution is can be found on Mike Bostock’s amazing page.

I ported the code found here & pushed an example on codepen (click to reset):

See the Pen Honhonhon le poisson! by nicolas barradeau (@nicoptere) on CodePen.

stippling is used to spare some ink when printing large posters, I did a variation on the render with 3 colors & a subtractive blendmode. I collected a series of portraits from Google images and applied the process to the 204² px pictures.  here are some results:

lovely ain’t it ?

and here’s the live demo ( click to load next picture, might freeze your computer )