Creating digital portraits with algorithms

Mike Brondbjerg explains how he uses Processing.js to create generative portraits of American Presidents with an analogue vibe.

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 artistsandalgorists.com, 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.

ABOUT THE AUTHOR

Tom May is a freelance writer and editor specialising in design and technology. He was previously associate editor at Creative Bloq and deputy editor at net magazine, the world’s best-selling magazine for web designers. Over two decades in journalism he’s worked for a wide range of mainstream titles including The Sun, Radio Times, NME, Heat, Company and Bella. Follow him on Twitter @tom_may.