Creating digital portraits with algorithms

Drawing American Presidents with SVG and Processing.js

Mike Brondbjerg is creative director at Brondbjerg Design and Development. He explains how he uses Processing.js, algorithmic trickery and some SVG to create amazing digital portraits of American Presidents.

Who are you and what do you do?

I'm a freelance creative developer specialising in web applications and data visualisation using technologies like HTML, CSS, JS, D3.js, Leaflet, Processing and Processing.js.

Tell us about your Dead Presidents project.

Dead Presidents started as a quick test of a drawing algorithm in my spare time. Over a couple of months it became a series of prints, motion graphics, a web app and an installation prototype for my entry in Google's DevArt competition.

What technologies did you use?

Processing was used to produce the initial set of illustrations, with Processing.js and Google's dat.GUI used for the web application. The PDFs were converted to SVG in Adobe Illustrator and imported back into Processing to algorithmically animate each polygon to create the motion portraits.

Finally, Processing and OpenCV were used to create the installation version that deformed the portrait in response to the viewer's position.

Drawing American Presidents with SVG and Processing.js

The task of making the President portraits involved Processing, SVG and various other technologies

What inspired the particular look and feel?

Digital art, made and consumed on-screen, can sometimes feel too clinical and lack serendipity. So I was interested in sampling colour from analogue sources like classical portraits and landscapes.

Drawing American Presidents with SVG and Processing.js

Martin Van Buren (December 5, 1782 – July 24, 1862) was the eighth President of the United States (1837–1841)

What's the community reaction been like?

It's been really positive, which is satisfying for a part-time experiment. The project was picked up by the lovely guys at, and in turn mentioned by Adobe Creative Cloud on Presidents' Day. Exposure like that led to some really interesting conversations about collaborations with photographers and film-makers.

Drawing American Presidents with SVG and Processing.js

John Adams (October 30, 1735 – July 4, 1826) was the second president of the United States (1797–1801)

Are you planning any future side projects?

Yes, always. I'll be exploring further iterations of the drawing algorithm and simpler, more geometric work. I'm also interested in seeing where these design experiments can cross over with my work on the web and into more abstract data visualisation.

Mike Brondbjerg is Creative Director at Brondbjerg Design & Development. This article originally appeared in net magazine issue 257.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tom May

Tom May is an award-winning journalist and editor specialising in design, photography and technology. Author of the Amazon #1 bestseller Great TED Talks: Creativity, published by Pavilion Books, Tom was previously editor of Professional Photography magazine, associate editor at Creative Bloq, and deputy editor at net magazine. Today, he is a regular contributor to Creative Bloq and its sister sites Digital Camera World, and Tech Radar. He also writes for Creative Boom and works on content marketing projects.