Interactive self-portrait

— Processing, generated graphics

This self-portrait was created as an intro page for my previous portfolio website. It's created in Processing (the IDE and the language), and displayed using the Processing.js library.

The Processing sketch renders a png image (currently a photo of myself) as a grid of black dots of various sizes. These dots grow when registering the mouseDown event, which makes it possible to "draw" on the portrait.

While I enjoyed writing the sketch and I like the result, it wasn't a very good fit as a homepage illustration. The code is fairly heavy and synchronous and it would block the site for seconds while it loaded. Because the code isn't written in native JavaScript, making it mesh with the rest of the page was always a struggle.

These days, I would either try working with the Canvas API directly or look for a native JavaScript library.

Image rendered as a grid of black dots of various sizes.

Back