SoMe Wall

Instagram

stigmollerhansen

Computational Graphic Designer / Senior Associate Professor, PhD / I teach graphic designers how to code

⚠ The video took a hit from IG compression. Chec

⚠ The video took a hit from IG compression. Check the stills for full fidelity.

In this project, I have reconstructed Jacqueline Casey's 1979 recruitment poster for MIT Lincoln Laboratory. The abstract yet unmistakably science-inspired motif looks like it was captured straight from a CRT screen, with visible scanlines, sync fluttering, color ghosting, and washed-out highlights all contributing to a fuzzy, tactile texture. It's a fascinating tension: a poster promoting scientific exactitude rendered with a medium that softens and distorts.

I began my remake in #Processing by generating a coarse heatmap grid using uniform Perlin noise and handpicked color palettes from Colour Lovers, rendered to an offscreen canvas. To optimize speed (and to challenge myself to leave my usual comfort zone), I ported all pixel operations to a custom GLSL shader. With a bit of AI assistance, I pieced together a custom shader by combining several effects I found on Shadertoy—each one chosen to replicate key elements present in the original poster. My analysis pointed to a specific visual recipe: CRT-style fisheye distortion, scanlines, chromatic aberration, static, jagged edges, vignette, and bloom. It's a lot, but the shader runs blazingly fast—far quicker than replicating the same look in Processing alone. Finally, I overlaid the typography as an SVG to complete my tactile, code-based homage to Casey's design.

As an #objecttothinkwith, this project provides #designstudents with an opportunity to develop a sharper eye for the characteristics that define non-digital aesthetics—grain, bleed, distortion—and explore how these features can be intentionally replicated in code.

#builtwithprocessing #p5js #creativecoding #madewithcode #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #glsl #poster #lincolnlaboratory #jacquelinecasey

▶ Original poster: https://dk.pinterest.com/pin/6966574418532949/
▶ Jacqueline Casey: https://en.wikipedia.org/wiki/Jacqueline_Casey
▶ MIT's obituary for Casey: https://news.mit.edu/1992/casey-0520
▶ MIT Lincoln Lab: https://www.ll.mit.edu/
▶ Shadertoy: https://www.shadertoy.com/

Some Olivetti ads were loud and proud. Others whis

Some Olivetti ads were loud and proud. Others whispered with grace. This inside-flap ad from Graphis Annual 73/74 (1973) belongs to the latter category: no headline, just two quiet lines of body copy—and a mesmerizing grid of “links” in muted blue and red, echoing the colors of the era. Together, they form an almost architectural composition that suggests mechanical complexity and technological elegance.

The designer remains unknown, but their work speaks volumes about Olivetti’s legacy: a company that consistently blurred the boundaries between engineering and art.

In my #Processing-based recreation, I set up a simple 2D grid with a few helper functions to manage logic and rendering. The “links” are rounded bars connecting adjacent grid points, randomly stacked and constrained to increments of 45 degrees to mimic the original’s rigid yet intricate visual look.

With the system established, I began tweaking grid resolution, aspect ratio, densities, and direction bias. For colors, I fetched a bunch of era-specific palettes using the ColourLovers API and sorted them by brightness to ensure the darkest colors only appeared in the background.

To ensure reproducibility, each design can be regenerated using a randomSeed() value—a nod to the modular precision of the Olivetti machines themselves.

This piece now serves as an #objecttothinkwith for my students—not just for its aesthetic or historical value, but because it invites them to see simplicity as a point of departure, not a limitation. And the code is as lean as the idea itself: the core part of the sketch clocks in under 100 lines.

#builtwithprocessing #p5js #creativecoding #madewithcode #graphicdesign #visualcommunication #generativedesign #designschool #designeducation #designstudents #objecttothinkwith #olivetti #graphisannual #1970sadvertising

▶ Original ad: https://www.flickr.com/photos/sandiv999/6709226435/
▶ Graphis: @graphis_inc
▶ Graphis Annual 73/74: https://www.theprintarkive.co.uk/products/1189?variant=42240218071217
▶ Associazione Archivio Storico Olivetti: @archiviostoricoolivetti
▶ Olivetti Advertising Posters 3D Virtual Tour: https://d7mntklkfre1v.cloudfront.net/virtual-exhibitions/?i=11952

For this project, I used code to recreate the Spri

For this project, I used code to recreate the Spring/Summer 2018 cover of Printed Pages magazine, designed by Cuban American artist and illustrator Edel Rodriguez. It features a dusty red backdrop with stylized, minimalistic eyeballs, all fixated on a tiny line of text: "Made You Look." It's a cheeky, clever exploration of visual attention and control. Perfect as an #objecttothinkwith for #creativecoding classes in #designschools.

Using Ricard Marxer's Fisica library for #Processing, I gave each eyeball a physical body, free to bounce around within the canvas. Their gaze locks onto the text using the atan2() function, while a custom gravitational pull draws them closer—its strength influenced by each eyeball's distance and size-driven density. To make them look away, I just made the pull negative and rotated their gaze by PI, instantly causing the flock to flip and flee. The result is a kind of kinetic surveillance: eyes responding to their environment, either swarming toward meaning or veering away from it.

As an exercise, recreating the cover in code teaches students how to set up a basic physics environment, layer custom behavior onto objects, use randomGaussian() to spawn eyeballs in varied sizes, and explore how behavior emerges through adjusting properties like density, restitution, damping, and friction.

In my humble opinion, this interactive recreation of the magazine's static cover really makes Rodriguez's original idea and illustration come alive.

#builtwithprocessing #p5js #creativecoding #madewithcode #graphicdesign #visualcommunication #generativedesign #designeducation #designstudents #objecttothinkwith #physics #particles #magazinecover #coverdesign #illustration #edelrodriguez

▶ Original cover: https://dk.pinterest.com/pin/156359418308069602/
▶ Edel Rodriguez: @edelrodriguezstudio
▶ Printed Pages SS18 magazine: https://www.itsnicethat.com/features/printed-pages-magazine-preorder-ss18-310518
▶ It's Nice That: @itsnicethat + https://www.itsnicethat.com/

⚠️ 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

Load More Follow on Instagram

Pinterest