From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

“We want students to open their eyes to the city,” said Robin Smits, a graphic designer and one-half of Superposition, a Netherlands-based design studio that uncovers and visualizes stories through art, technology, code and design. “If they start looking at the world through those glasses ⁠— noticing details from typography and adornment to architecture and planning ⁠— we’ve done our job.”

Together with programmer Bram Bogaerts, his partner in Superposition, they led a learning lab on computational ornaments at TUMO Yerevan. Over the course of 2 weeks, students merged graphic design and programming to create generative graphics inspired by Armenia’s ornamental heritage.

IMG 7843 2 - From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

Mirroring Robin and Bram’s own dynamic, students worked in pairs — one as graphic designer and the other as programmer. They began by scouring the city for ornaments and taking charcoal rubs to record them.

TUMO students Aida Shalaeva and Edgar Ektibaryan picked a symbol that they noticed on municipal garbage pails. Gemma Asryan and Ani Petrosyan chose a sidewalk pattern on Tigran Mets Avenue, a shape adorning a door to the Opera House and a carving on Alexander Tamanyan’s statue.

IMG 7750 2 - From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

Next, the pairs worked collaboratively to expand on and digitize what they found. The graphic designer used Adobe Illustrator to transform the charcoal rubbing into a digital pattern. The programmer used the Processing programming language to turn the digital pattern into a generative graphic.

“This has been an interesting experience,” recounted 15-year-old Ani Petrosyan. “It’s my first time using Processing and my first time working so closely with a graphic designer.”

IMG 7739 2 - From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

The pairs took the experiment further, when they coded their generative graphics to animate, respond to movement on a web camera, and change color, shape and size with parameter sliders controlled by the click and drag of a mouse.

“Rather than being siloed as a programmer and designer, it’s great for them to learn how to talk to each other and work collaboratively,” said Bram. “We also wanted them to let go of the need to start out with an end product in mind. We want them to dive in — start building, making, experimenting, and seeing where that lands them.”

ezgif.com gif maker - From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design

According to Robin, the use of graphic design and code to tell stories is becoming the norm. In government, journalism and business, programmers and graphic designers work together to distill meaning from data and create visualizations that tell stories. In this month’s Computational Ornament Lab, TUMO Yerevan students learned about the growing relationship between the fields, first hand.

IMG 7758 2 - From Ornament to Generative Graphic: An Experiment in Programming and Graphic Design