SoMe Wall

Instagram

stigmollerhansen

Computational Graphic Designer / Senior Associate Professor, PhD / Teaching graphic designers how to code by recreating design products in Processing

⚠️ Instagram's compression butchered the video

⚠️ Instagram's compression butchered the video — check the stills.

I was immediately struck by Dutch designer Willem Henri Lucas' poster series for Brainstorming Turing—a 2012 UCLA event celebrating Alan Turing, the pioneer of modern computing.

Its grainy, raw, and displaced portrait of Turing is an evocative blend of form and fragmentation, making it a perfect #objecttothinkwith for exploring the aesthetic potential of noise.

My code-based reconstruction is a deliberately chaotic twist on image sampling. For each pixel in a source image of Turing, I sample its brightness and then—based on adjustable thresholds and randomness—decide whether to draw a black dot or not. Easy, right? Well, as always, the devil is in the details. It took several iterations to capture the subtle streaks and jittery imperfections that give the original poster its character.

Extending Lucas' work, I added an option to shift the sampled pixel's position horizontally or vertically. I also experimented with scaling and thresholding techniques to make the portrait feel more haunted, more mechanical, or dissolve into full abstraction. Balancing control and chaos became key—tuning the system just enough to suggest a face while letting noise obscure and erode it.

Finally, on a whim, I swapped all float and int variables for a custom lerp()-driven class. This enabled automatic animated transitions by simply assigning each parameter a new random value.

Recreating the Brainstorming Turing poster teaches #designstudents the fundamentals of working with pixel data and using noise and randomness to create rich, organic textures from minimal means.

I'm sure Turing would've loved seeing code used this poetically.

#builtwithprocessing #p5js #creativecoding #madewithcode #graphicdesign #visualcommunication #generativedesign #designeducation #designstudents #objecttothinkwith #posterdesign #willemhenrilucas #alanturing #noiseaesthetics #ucla

▶ Original poster: https://dk.pinterest.com/pin/156359418308048504
▶ Willem Henri Lucas: https://cargocollective.com/willemhenrilucas
▶ Event info: https://artsci.ucla.edu/events/brainstorming-turing-celebrating-alan-turing-25-years-ai-and-society-journal

I've previously recreated a poster for one of Pola

I've previously recreated a poster for one of Poland's iconic music festivals, Warszawska Jesień. Once again, Hubert Hilscher is behind the design. His love of rule-based visual systems shines through in the main motif, where a cluster of multi-colored isometric boxes distorts around a focal point.

My #Processing-based recreation of Hilscher's poster uses a regular 2D grid. Each grid cell is drawn with two triangles—one for the top left and one for the bottom right. With some simple math (looking at you, modulo and random), it's easy to assign colors to the two triangles. Things, however, get much trickier when ensuring that each cell's colors differ from its neighbors. To solve this, I sketched it out by hand — a quick visual analysis revealed the underlying logic.

With the colors set, the next step is distorting the grid. To do that, I calculate a series of values between 0 and 1 for both the x and y axes. These values are distributed based on their distance from the central focal point and amplified by a variable factor. That way, I can ensure the outermost boxes are anchored to the poster's edges, even as it flexes.

While working, I discovered an alternate version of the poster where the colors aren't chosen randomly; instead, they appear in a rhythmic pattern — so I implemented both options. For the palettes, I used ColourLovers API to grab a JSON file. With a bit of editing, it clicks right into the handy Nice Color Palettes library.

Additional touches include the ability to add/subtract to the overall shape and a noise-infused cycloid animation of the focal point.

Overall, I enjoyed recreating this tribute to Hubert Hilscher — whose 1971 design can inspire today's #designstudents to think and design through code.

#builtwithprocessing #p5js #creativecoding #madewithcode #graphicdesign #visualcommunication #generativedesign #designeducation #designstudents #objecttothinkwith #posterdesign #warsaw #huberthilscher

▶ Original posters: https://www.flickr.com/photos/23473719@N08/3320981648 + https://dk.pinterest.com/pin/156359418308040010
▶ Hubert Hilscher: https://culture.pl/en/artist/hubert-hilscher
▶ Warsaw Autumn: https://warszawska-jesien.art.pl/

In 1983, Erik Nitsche designed the "Bauhaus" stamp

In 1983, Erik Nitsche designed the "Bauhaus" stamp series for the West German postal service. The 60-pfennig stamp highlights Josef Albers' 1942 work "Sanctuary," a black-and-white geometric pattern in his distinctive style.

In #designschool #creativecoding classes, this stamp can serve as an #objecttothinkwith for exploring two key topics: distance formulas and grid-snapping.

Designers typically consider distance as the shortest line between two points—aka Euclidean distance. However, there are other ways to measure distance.

Manhattan distance measures the total movement within a grid, allowing only up, down, left, or right—like a taxi in a city.

Chebyshev distance is based on the largest absolute difference between x- and y-coordinates.

Each method produces distinct visuals: Euclidean distance forms smooth, rounded shapes, Manhattan produces sharp diagonals, while Chebyshev results in square patterns, like those in Albers' Sanctuary piece.

To generate the pattern, I add a couple of rectangles. For each pixel, I compute the distance to the nearest rectangle using one of the distance formulas. This value is then fed through a modulo operator to determine if the pixel should be colored white or black.

To ensure a pattern where all lines align seamlessly, all rectangles must "snap" to a shared grid. Fortunately, snapping can be achieved with basic math: a dash of division, a sprinkle of round(), and voilà—done!

My UI Salt Bae touch is the ability to move, resize, and delete existing rectangles and draw new ones simply by dragging an outline on the canvas.

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designeducation #designstudents #objecttothinkwith #stampdesign #eriknitsche #josefalbers #bauhaus #distanceformula

► Original stamp: https://www.suche-briefmarken.de/marken/brd/d1983004.html
► Erik Nitsche: https://www.oneclub.org/adc-hall-of-fame/-bio/erik-nitsche/
► Josef Albers: https://en.wikipedia.org/wiki/Josef_Albers
► Sanctuary: https://www.moma.org/collection/works/65884
► Euclidian, Manhattan & Chebyshev distances: https://www.youtube.com/watch?v=1UpJAgqfBBc

Ernest Hemingway's classic book The Old Man and th

Ernest Hemingway's classic book The Old Man and the Sea (1952) won him the Nobel Prize in Literature in 1954. Set in the Gulf Stream off the coast of Havana, it's a tale of an old man, a young boy, and a giant fish.

The book has been published in countless variations, but from a #creativecoding perspective, the 1966 edition by Penguin Books is particularly interesting. Its cover packs a small blurb, title, and the author's name into a tight, wavy grid that mimics the sea. Recreating this layout with code is a fun challenge for #designstudents interested in distorting vector shapes using envelope functions.

In #Processing, I used the Geomerative library to convert a text string into an array of points. Using basic math, I scaled each line to fit within a rectangular shape. Next, I needed to transform it into a wave-like container. This is called Envelope Distort. Here, math is used to warp (distort) points into a new shape (envelope). I made four envelopes based on sin(), tan(), and atan(), respectively, plus a custom wave formula I wrote in Desmos—each with its own distinctive look.

The warped typography is rendered separately on a PGraphics as white letters on a black background. I then use it to mask an ocean photo, creating a quick inset-image fill effect!

A key detail of the original cover is the boat rocking on the top waves. I calculated its angle by applying atan2() to two nearby points from the same envelope function.

Because it's done with code, the layout can be manually tweaked, randomized, and animated to generate endless visual reinterpretations of the original 1966 Penguin cover.

#processing #processingorg #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #bookcoverdesign #penguinbooks #ernesthemingway #textwarp

▶ Original cover: https://pinterest.com/pin/156359418307370875/
▶ Ernest Hemingway: https://en.wikipedia.org/wiki/Ernest_Hemingway
▶ Geomerative: http://www.ricardmarxer.com/geomerative/
▶ Cocogoose font: https://www.1001fonts.com/cocogoose-font.html
▶ Custom wave function: https://www.desmos.com/calculator/6rq2atiane

One of the first things #designstudents learn in #

One of the first things #designstudents learn in #creativecoding courses is how to use nested for() loops to create a regular 2D grid—an essential visual design element.

But once regular grids feel second nature, what are the alternatives? An excellent #objecttothinkwith to help answer this question is Deutsche Bundespost's four-stamp series for the 1972 Sapporo Winter Olympics.

The renowned Japanese designer Kōhei Sugiura created the stamps, likely forging his German connection while teaching at the Ulm School of Design (1964–1967). His semi-abstract motifs of winter sports athletes are drawn with dots of varying diameters in a 2D grid—a design easily recreated with two for() loops sampling pixel brightness and a map() function for circle size. Easy peasy.

The next step is to explore other strategies to depict a motif with dots. In this project, I have explored hexagonal grids, the phyllotaxis pattern, sine waves, concentric circles, and an Archimedean spiral—but #creativecoding offers many other exciting point-distribution algorithms!

I've expanded the original series to 10 stamps to give each winter sport represented in Sapporo a unique design, color, and value.

I'm likely just being nostalgic here, but as I explored the possibilities within Sugiura's stamp design, I could almost hear him standing behind me, whispering "よくやった," approving my experiments.

SIDENOTE: I used DALL·E to generate endless cut-out winter sports athletes in dynamic poses. The prompt is generated in #Processing, and DALL· E's API returns a PImage. To keep tweaking images while new ones load, I moved queries to a separate thread(), which led to an unexpected mini-task: designing an animated loading icon!

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #stampdesign #koheisugiura #winterolympics #sapporo1972

▶ Original stamp series: https://dk.pinterest.com/pin/156359418306630716/
▶ Kōhei Sugiura: https://en.wikipedia.org/wiki/K%C5%8Dhei_Sugiura
▶ 1972 Sapporo Olympic Winter Games: https://www.olympics.com/en/olympic-games/sapporo-1972

Since the early 2000s, a surge of microbreweries h

Since the early 2000s, a surge of microbreweries has diversified Denmark's beer scene. One of them is @gammabrewing. Founded in 2015 by a group of friends, their generously hopped beers have gained high recognition.

When I picked up their tasty IPA Freak Wave, I instantly knew I had to use it as an #objecttothinkwith. Its mesmerizing label is designed by Danish artist @svendsoemod. His fascination with mathematics is evident in his Freak Wave artwork, where alternating black and white horizontal bands of decreasing height are populated with the classic sine wave.

In my #Processing-based recreation of Sømod's work, I first explored different methods for harmonically segmenting a given length. I settled on a simple pow()-based ease function to adjust the number and compression of segments.

Next, I used the calculated segment values to set the height of each band, which I then filled with a sine wave of varying frequency and amplitude. The alternating colors were achieved using a modulo operator.

Adding animation and new color palettes was quickly done. As my last touch, I wanted a preview of how the label would appear on the can. #Processing doesn't do realistic real-time 3D rendering, so as a quick fix, I used WebSockets to pipe the Processing canvas to three.js, where it was applied as a texture on the label. To maintain the distinct wavy edges and dual label design, I simply applied an alpha mask.

Recreating Sømod's Freak Wave label is a fun composite challenge for creative coders: Sine waves, subdivision, alpha masking, and 3D, all in one visually pleasing bundle!

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #packaging #threejs #craftbeer #gammabrewing #svendsoemod

▶ Gamma Brewing: https://gammabrewing.com/
▶ Svend Sømod: https://svendsoemod.dk/
▶ Freak Wave: https://shop.gammabrewing.com/products/freak-wave
▶ three.js: https://threejs.org/
▶ HDRI environment: https://polyhaven.com/a/studio_small_08
▶ Can model: https://www.cgtrader.com/free-3d-models/household/other/aluminum-can-high-detail-16-oz

The Fête des Lumières (Festival of Lights) in Ly

The Fête des Lumières (Festival of Lights) in Lyon, France, is deeply rooted in the city's history and identity. Originating in the 1800s as a tradition to honor the Virgin Mary, Lyon's patron saint, it has evolved into an annual event celebrating the city's artistic and cultural vibrancy.

The festival's 2016 edition featured a striking yet subtle visual identity, presumably designed by the local studio Extra l'Agence. It features a tilted gradient-colored grid of circles in alternating diameters. Each circle is copied, and its colors are slightly modified multiple times along the z-axis, creating both an impression of depth and moiré-like patterns between the columns and rows.

The simplicity of this design makes it highly suitable as an #objecttothinkwith for #designstudents who want to go beyond #Processing's 2D canvas and explore the visual opportunities that working in 3D offers.

Replicating the original poster as a parametric, code-based project introduces several parameters that allow for endless experimentation:

• Adjust hue, brightness, and saturation to explore different moods and contrasts
• Modify the gradient for smooth or sharp transitions
• Change the circle's density, scattering, size, and position to experiment with the overall visual balance
• Introduce differentiated z-axis offsets to break the monotony of the flat surface
• Use animation to emphasize the visual depth and create new compositions

The original Fête des Lumières 2016 poster is a beautiful celebration of light, form, and texture. And when used in the context of #creativecoding courses, it can literally help students extend their skills into a new dimension.

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #visualidentity #fetedeslumieres #extralagence

▶ Original poster: https://dk.pinterest.com/pin/7670261861064601/
▶ Extra l'Agence: https://www.extralagence.com/
▶ Fête des Lumières: https://www.fetedeslumieres.lyon.fr/en
▶ Fête des Lumières 2016 edition: https://www.lightzoomlumiere.fr/evenement/fete-des-lumieres-2016/

In 2014, Maison d'Ailleurs, the Museum of Science

In 2014, Maison d'Ailleurs, the Museum of Science Fiction, utopia, and Extraordinary Journeys in Yverdon-les-Bains, Switzerland, presented the exhibition "Alphabrick," illustrating how LEGO models could bring fictional universes to life.

Lausanne-based studio Notter+Vigne designed the exhibition's visual identity. It featured an orthographically projected LEGO sphere in vibrant yellow, green, and gray colors. A great #objecttothinkwith to aid exploration of voxels, perspective, math shapes, and .obj import in #Processing!

I began by modeling a 3D 1x1 LEGO brick, focusing on minimizing the number of vertices and faces to speed up rendering. Once modeled, I imported it into #Processing as a PShape. Using disableStyle(), I manually assigned the original Alphabrick colors to the brick faces.

The next challenge was deciding which shapes the bricks would form. Rather than importing premade .obj files, I decided to generate them mathematically through Platonic solids—five convex, regular polyhedra + a classic sphere as seen on the original poster.

To render the shapes as voxels, I wrote an algorithm that checks for intersections between a 3D box (LEGO brick) and a 2D triangle (shape face). This method effectively filtered out computationally expensive "invisible" interior bricks and left a clean outer shape.

After recreating Notter+Vigne's original poster, I made it possible to rotate the 3D shape. I also made it possible to toggle between the traditional LEGO orthographic view and a classical perspective, which emphasized my final touch: An animated exploding view!

Recreating the Alphabrick poster was a huge learning experience for me. Merci beaucoup for the challenge, Notter+Vigne!

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #orthographic #posterdesign #lego #nottervigne #platonicsolids

▶ Original poster: https://www.notter-vigne.ch/fre/alphabrick
▶ Notter+Vigne: https://www.notter-vigne.ch/
▶ Maison d'Ailleurs: https://ailleurs.ch/
▶ Alphabrick: https://ailleurs.ch/wp-content/uploads/2023/03/Alphabrick.pdf

Long time, no post. After a long stretch of teachi

Long time, no post. After a long stretch of teaching, I've finally found time to create a new code-based copycat project.

This time, my #objecttothinkwith is inspired by the German-Canadian designer Rolf Harder. In 1969, he designed what appears to be an advertisement or packaging for the vitamin-effervescent tablet 'Redoxon-B.' A design so iconic that it now resides in MoMA's permanent collection (link below).

Harder ingeniously paraphrased the fizzy bubbles released when the tablet dissolves in water using simple repetition and displacement. A concept as clever as it is timeless!

Fast forward half a century and #creativecoding #designstudents can easily replicate Harder's design using a for() loop and an exponentially growing y-axis value to make letters rise. But I encourage them to think beyond replication: Harder's design holds untapped potential that can be explored through physics-based particle systems, offering a dynamic and alternative interpretation of his original idea.

In my project, I used Fisica to make each letter emit new copies at regular intervals. These copies interact in a shared world, pushing and influencing one another. Over time, particles split into smaller versions of themselves, creating emergent behavior. With just a few tweaks to the parameters, this system can produce an incredible variety of effects. It's a playful and fascinating way to stretch the original idea!

My copycat version doesn't match Harder's original's clean, minimalist aesthetic but gains something in return: interactivity. Its organic behavior feels closer to the real-life experience of dropping a Redoxon-B tablet into water.

I'd like to think Harder would have approved.

#processing #processingorg #p5js #creativecoding #madewithcode #programming #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #typographicposter #rolfharder #redoxon

▶ Original design: https://www.moma.org/collection/works/109225
▶ Rolf Harder: https://designcanada.com/designers/rolf-harder
▶ Fisica: http://www.ricardmarxer.com/fisica/
▶ Redoxon-B: https://www.redoxon.me/

Load More Follow on Instagram

Pinterest