Instagram story viewer> @nahuel.gerth> Posts
Nahuel Gerth(@nahuel.gerth)'s profile avatar HD Profile

Nahuel Gerth

@nahuel.gerth

15.9K
followers
2550
following
🗯️ Code is a universal language, allowing us to talk to machines.
🖍 Designer, researcher, creative technologist, storyteller.
📱Open for commissions.
POSTS STORIES REELS TAGGED
🫧 Look at this fun bubbly website header I made for @gradual.works 🫧 How does it work? ☞ one image layer per bubble .createGraphics() ☞ use bubbles to mask the layers .mask() ☞ bubbles bounce off of cursor shape Built on a softbody experiment by the ingenious @juhani.halkomaki. Play with it here: 🔗 https://nahuelgerth.de/tools/gradual/multiple-masks/ #creativecoding #flubber #bubble #design #design #fun #interaction #website #image #playground taken in Prague, Czech Republic by @nahuel.gerth
106
a year ago
Download
🐍 I continued playing with the letter snake and it evolved in an image snake now. There is a lot of parameters to tweak and play around with: ☞ distance of the snake elements ☞ size and animated growth of the snake elements ☞ amount of different images Basically we create an array of images and then use the modulo operator to create class objects on the current mouse position. The distance between the elements determines how often to draw new elements. #snake #fun #creativecoding #grid #p5.js #generativedesign #design #photography #coding #motiondesign #interactive #animation #smooth by @nahuel.gerth
22
a year ago
Download
🐠 Embodied fisheye perspective grid! Move your hand to distort reality and unlock some trippy fever dreams. Play with it here: 🔗 https://nahuelgerth.de/tools/embodied-fisheye-grid I’ve seen so many of these fun grids lately so I wanted to give it a try too. Here is the approach I came up with: ☞ draw a grid of cells ☞ cell size is determined by the distance from the mouse (closer = larger) ☞ get center point of each individual col and row ☞ normalize distance from center points to mouse from 0 to 1 ☞ add exponential falloff to this distance (Guassian bell curve) to get the smooth fisheye scaling ☞ use either col size or row size (whichever is smaller) to scale the letters ☞ then the added smoothing does all the rest #fisheye #bodytracking #creativecoding #grid #p5js #generativedesign #design #summer #fun #outdoors #green #coding #motiondesign #animation #smooth taken in Schauinsland by @nahuel.gerth
77
a year ago
Download
👁️🌈🟡🟣☀️ What do you see right before you wake up? When the sun beams shine warm through your closed eye lids? When dream and consciousness mix and you float in a warm state of lucid limbo? A place where everything is possible and melts into yet unshaped potential. Morning Dreams is a generative procedural tool. It is built with p5.js and uses gsap. Currently not working in Safari. The blur implementation is quite forward. You can switch it on and off during the canvas drawing: drawingContext.filter = ‚blur(4px)‘; // draw blurred stuff drawingContext.filter = ‚none‘; Hit `s` to save your favorite morning dreams. ☞ You can play here: https://nahuelgerth.de/tools/morning-dream/ ☞ Built with @p5xjs and @gsap_greensock #creativecoding #motiondesign #blur #graphicdesign #animation taken in Freiburg im Breisgau by @nahuel.gerth
0
9 days ago
Download
A flexible identity for a living archive. Earlier this year we were invited for a pitch to develop the new visual identity for ASAC (Archivo Storico Biennale Venezia). Our proposal wasn’t selected, but the process behind it was too good not to share. Rather than designing a fixed logo, we approached ASAC as what it actually is: an ecosystem holding art, architecture, music, cinema, theatre and dance — constantly growing, never static. So we built a flexible visual language instead of a mark: a generative system that can produce infinite, always-recognisable outputs across every format the archive needs, from exhibition graphics to social media. The starting point was a workshop analysis of how ASAC is perceived — its colours, textures, rhythms. One form kept resurfacing: the spiral. Non-linear time, sedimented memory, the pull between conservation and openness — all in a single gesture. We traced that gesture across a century of references, from Duchamp’s Rotoreliefs to Hilma af Klint’s snail studies, Saul Bass’s Vertigo, the Guggenheim, whirling dervishes — a shape that belongs equally to art history and to archives. To make the system usable in practice, we designed a generative tool: an application that lets anyone control the spiral’s structure, density, scale and motion, and export the result — static or animated — ready for print, exhibition, campaigns or social. The typeface, Season Variable, does the same job in type: a single variable font sliding from serif to sans along one continuous axis, letting „past“ morph into „future“ on the page. Proud of where this went, even unbuilt. ☞ ASAC — the Historical Archive of the Venice Biennale @labiennale ☞ Art direction & visual identity: @_lcbgn_ — Atelier Luca Bogoni ☞ Generative tool development: Nahuel Gerth @nahuel.gerth #ASAC #VeniceBiennale #VisualIdentity #GenerativeDesign #DesignProcess taken in Venice, Italy by @nahuel.gerth
20
19 days ago
Download
TRIO festival will launch its second edition soon! October 14th till 18th in Germany, France and Switzerland 🇩🇪🇫🇷🇨🇭 For the festival we reorganised the website and program. And of course we hid some easter eggs as well 🪺 TRIO is a festival celebrating inclusivity, music, performance, and arts without barriers. Initiated by Lebenshilfe Lörrach, its mission is to enable people with disabilities to actively participate in cultural life. ☞ https://trio-kultur.com/de/festival ☞ @trio_festival #creativecoding #motiondesign #webdesign #culture #inclusivity taken in Lörrach by @nahuel.gerth
1
23 days ago
Download
Squareheads. What’s up with the long faces? Friendly reminder to not put your face on Unsplash (whoever this is, I am so sorry) 😬 Built in p5.js on a fisheye distortion grid. ☞ draw a grid of cells ☞ cell size is determined by the distance from the mouse (closer = larger) ☞ get center point of each individual col and row ☞ normalize distance from center points to mouse from 0 to 1 ☞ add exponential falloff to this distance (Guassian bell curve) to get the smooth fisheye scaling ☞ use either col size or row size (whichever is smaller) to scale the letters ☞ then the added smoothing does all the rest #creativecoding #motiondesign #fisheye #funnyface #animation taken in Freiburg im Breisgau by @nahuel.gerth
18
2 months ago
Download
🫟 Video bubbles playground summer mode 🕶️ More iterating and playing with video masks and bubbles. Layering moving images is like cut out collages, only in motion. Performance can be limiting since everything is rendered live in the browser. There is a variety of adjusting screws to manipulate the behaviour of the bubbles and how they react to mouse poking. Playground here: ➔ https://nahuelgerth.de/tools/bubbles-playground/ #creativecoding #motiondesign #summer #graphicdesign #animation taken in Freiburg im Breisgau by @nahuel.gerth
0
3 months ago
Download
🗯 Organic Grid series submission for Graphic Days® in Torino See you soon in Italy 🍝🤌 📙 The series explores how traditional design grids can be set into motion. It is an updated take on static grids and visual structure with the tools of creative coding and motion design. ▶ 16-26.05.2024 ▶ @graphicdaystorino ▶ https://www.graphicdays.it #creativecoding #motiondesign #generativedesign #graphicdesign #p5js #torino #grid #pixel #typography #digitalarchive #bountyhuntersarchive #brandsinmotion #animation #motion #italy #graphicdays taken in Torino,Italy by @nahuel.gerth
14
2 years ago
Download
🔭 Experimenting with typographic distortion grids in p5.js. I discovered a feature of the image() function that I didn’t know before. Usually drawing an image is pretty straight forward: image(img, x, y, [width], [height]) Select the image source, pick a position and sizing, done. But there are actually more parameters available: image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight], [fit], [xAlign], [yAlign]) With the parameters of destination and subsection we can simply draw cut out pieces of the image source. It’s a bit like masking or playing with the copy() function. In my experiments I matched these cutout pieces to a responsive grid to create the distortion effect. By adding an offset to the image subsection we can mix up the grid a bit to elude the impression of an intertwined kalaidoscope. ➔ Font in use is ABC Diatype by @abcdinamo #creativecoding #typography #typeinmotion #graphicdesign #motiondesign taken in Freiburg im Breisgau by @nahuel.gerth
9
7 months ago
Download
🌷 It’s blooming season. I love the color variety of blooming tulips. Having fun with masks as a preparation for the upcoming Fleuron festival @fleuron.tf The tool is built by using animated rects to reveal flowers on a mask layer in p5.js. I added an interface with lil-gui to have more control over the parameters. #creativecoding #tulips #bloom #graphicdesign #motiondesign taken in Tulip Fields, Holland by @nahuel.gerth
14
7 months ago
Download
🍝 Twisted type explorations for @dia_studio Last year I had the opportunity to work with DIA, for me a pioneer studio in terms of generative motion branding. Together we iterated on a variety of series around motion, space, typography, waves and 3-dimensional building. It was a lot of fun 👾 🫀 Thank you @dia_mitch and margie_don for the trust and guidance. ➔ Built with @p5xjs and lil-gui #creativecoding #motionbranding #typography #animation #graphicdesign taken in Freiburg im Breisgau by @nahuel.gerth
9
6 months ago
Download

Download All

Save the photos and videos currently loaded on this page.

0Photos
0Videos
Ready to download 0 / 0

Keep this tab open until your download is ready.
back to up