Patrik Huebner – Generative Design and Creative Coding https://www.patrik-huebner.com Real-time animations, programmed illustrations and audio-reactive art using generative algorithms and creative coding approaches Fri, 09 Nov 2018 09:03:10 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 BRUTE – Data driven wine brand https://www.patrik-huebner.com/portfolio-item/brute-data-driven-wine-brand/ https://www.patrik-huebner.com/portfolio-item/brute-data-driven-wine-brand/#comments Tue, 08 May 2018 11:04:18 +0000 https://www.patrik-huebner.com/?p=2063
Generative identity for a wine, crafted by the elements

Custom design-algorithm that generates uniquely branded visualizations based on weather-data

BRUTE is a data-driven wine brand that distills the core weather elements of wind, rain & sun into a holistic visual and sensual experience. It uses historic and real-time weather data to shape its identity. So, as each vintage evolves with the climate, so does the brand.

Cannes Lions Design Lions Finalist 2018 Patrik Hübner
German Design Brand Award Special 2019 Brute Wine Patrik Hübner
Red Dot Design Award 2018 Brute Wine Patrik Hübner

When renowned design agency LANDOR first approached me with their vision to use the very elements of nature as the driving force to develop a new and innovative brand of wine grown in the brutal climate of Hamburg, I was instantly intrigued by their pitch: Wine is a unique, irreproducible product in a sense. It is shaped by a diverse set of environmental factors and uncontrollable circumstances. Factors, that ultimately culminate in an exclusive sensual experience containing stories of the days and years that have passed.
This resonates with the core essence of what my work with generative design systems is all about: Using the very “spirit” of an idea to shape a form that can be experienced.

I was also intrigued by the background of a brand that was developed “against all odds”: Wine does require lots of sun and a good climate. Growing wine in Hamburg seemed like an odd, almost daring choice and required a fresh story to get people to abandon their expectations of what a “good wine” should be like. So the disadvantage of the rough climate became the defining element of the story. A story of the brutal Hanseatic elements and the people who grow this wine against all odds.

And the story of a wine that is branded by its defining ingredients of wind, rain, sun and… an algorithm.

Shortlisted at the 2018 Cannes festival in the Brand Identity category, Brute won a Red Dot Design Award for Brand Design and a “Special Mention”in the Brand Identity category at the German Design Award. Brute also recently captured Gold in the WPPed cream award in the Packaging/Brand category.

The brand’s visual system and subsequent packaging is based on a real-time particle simulation with tens of thousands of individual elements. It can generate infinite interpretations of the core weather elements and how the sun, rain and wind influence each year’s vintage.

Over the course of the project’s first weeks – our exploratory phase – I developed a WebGL-based, generative, interactive 3D-particle-weather simulation that allowed for an unforeseen level of visual exploration and interpretation. The system was used as a web-based custom design software during and after the brand’s development stage.

↑ Each year’s vintage is paper-wrapped in a unique design that tells the story of the compiled weather factors that the vineyard and wine endured. It consists of thousands of illustrated data-points and millions of particle-positions.

Exemplary data points are marked in the illustration above for clarity.

These elements are set into motion by the defining weather factors and can be explored in 3D and even “frozen” in time.

The web-based design system can be employed as both a user-facing experience and a custom design-software that in-house designers use to generate high resolution stills and key visuals within the production pipeline.

The brand’s interactive and explorable visual identity is also accesible to both brand editors and users alike to generate unique and striking social media fragments. Individual, highly personal pieces that can be shared and remixed.

Finally, to take the brand’s story to new sensory levels and to add a tactile experience, empty bottles are stored out in the vines throughout the year, cultivating a unique patina from exposure to the elements, completing the story of a brand “crafted by the elements”.

Commissioned by LANDOR, Hamburg office.

Brand & Design by LANDOR
Hamburg office

Idea, Concept & Design: Jack Osborne
Executive Creative Director: Markus Blankenburg
Client: Schatoh Feldmark

3D, interactive branding system
Additional Concept & Design
Dynamic weather-simulation
Website development

by Patrik Hübner

To make the brand’s identity explorable and to allow the design to constantly evolve, I developed the official BRUTE-website to retreive the vineyard’s weather-data in real-time, changing the design the second the weather changes.

As a tribute to the elements, the site’s color scheme changes depending on if the sun has set or not.

brute_data-driven-generative-branding-wineBottle
]]>
https://www.patrik-huebner.com/portfolio-item/brute-data-driven-wine-brand/feed/ 2
DIESEL Go With The Flaw https://www.patrik-huebner.com/portfolio-item/diesel-go-with-the-flaw/ Sun, 11 Mar 2018 19:20:28 +0000 https://www.patrik-huebner.com/?p=2029

Commissioned by DIESEL for the “Berlin Leuchtet Festival” 2017.
Additional details will be added shortly.

]]>
Schwanensee – Dynamic Identity https://www.patrik-huebner.com/portfolio-item/schwanensee/ Fri, 13 Oct 2017 08:00:24 +0000 https://www.patrik-huebner.com/?p=1738
Generative identity project for an expressive cultural brand

Custom algorithm that feeds generative shapes with pre-captured motion-data

Schwanensee explores human dance-movements and digitally captured expressions as the primary force to create and propel dynamic and interactive identity-systems.

It distills the very essence of its subject to create individual and uniquely branded design-variations for the famous ballet composed by Pyotr Tchaikovsky. It is a comment on and exploration of how modern design-systems can express their subjects in a way that detaches the designer from the actual process by using generative design-approaches, allowing for unforeseen and autonomous design-decisions.

This dynamic visual identity-system uses motion-capture data to combine visual algorithms with the personal expression of human dancers, creating intricate forms and mesmerizing snapshots of motion in the process.

It is also a means to liberate small theatres and cultural institutions by giving them a system they can use without any design-expertise and a minimal budget to create unlimited design-variations for their needs right from within their webbrowser.

» It is a means to liberate small theatres and cultural institutions by giving them a system they can use without any design-expertise and a minimal budget to create unlimited design-variations for their needs right from within their webbrowser. «

This dynamic visual identity-system uses motion-capture data to combine visual algorithms with the personal expression of human dancers, creating intricate forms and mesmerizing snapshots of motion in the process.

So, in a way, the very essence of Schwanensee is emerging visually.

Schwanensee-Corporate-Design-variations

Design-assets created can range from key-visuals to posters, invitations, tickets, websites, interactive visuals to whatever may be required. These assets are consistent in all forms of media and can be created at virtually no cost once established.

Developed using web-technologies, this 3D-system can be used in every browser. It is a comment on and exploration of how modern design-systems can express their subjects in a way that detaches the designer from the actual process by using generative design-approaches, allowing for unforeseen and autonomous design-decisions.

Developed using Three.js, a WebGL library.
Motion-capture data courtesy CMU Graphics Lab Motion Capture Database

]]>
Bach Prelude in C https://www.patrik-huebner.com/portfolio-item/bach-prelude-in-c/ Tue, 15 Aug 2017 17:13:29 +0000 https://www.patrik-huebner.com/?p=1717

Johann Sebastian Bach

Prelude in C

A visual exploration of music through generative means
Johann Sebastian Bach
Prelude in C
A visual exploration
The Prelude No.1 in C Major is arguably the most famous of Johann Sebastian Bach’s movements for the Well-Tempered Clavier and quite certainly one of the most influential and defining musical texts in history altogether. To this date, its inherent ideas, patterns and structures are continuing to shape modern music and the way we perceive and create musical compositions. Its harmonic, monophonic progression is almost mathematical in construction and of a timelessness only few composers have achieved. This is why its deceptive simplicity and inherent beauty lends itself to be appreciated and rediscovered in this series of interactive, audio-visual explorations.

My name is Patrik and I am an interdisciplinary artist and designer using generative design systems and algorithmically driven, interactive experiences to explore new spaces in art and design. Over the course of the next months I will be using the „data-set“ that is the Prelude No.1 in C Major -a sequence of 545 consecutive notes to be exact- as the basis to illuminate its content, patterns, form and inherent beauty. Join me on this journey of rediscovery and know that you are more than welcome to join the discussion.

The idea and initial proposal for this series was thought up by my good friend Tim Rodenbröker who is working on an explorative series based on the same data-set. We are quite excited to see where our different backgrounds and personalities are piloting those individual series while constantly exchanging ideas and thoughts in the process. You should definitely check out his work!

Please note that this website will include synthesized audio-output.

Chapter 1
Exploring
Visual
Structure
 
The visual grid of the Prelude
The monophonic, evenly spaced and mathematically structured notes are a beautiful start to dive right into visualizing the Prelude. Using a grid-structure as a common ground of laying out both music (i.e. notes) in time as well as pixels on a screen, this construction helps to express and emphasize the inherent pattern of the Prelude.

The height of the rectangles, circles or triangles in this sketch is defined by the pitch of the note: The bigger the shape, the lower the note. The notes are then arranged in a grid of 16 notes each as this reflects the basic progression of the Prelude.

prelude in C
The interactive sketch comes in four visual styles and with two separate modes: A mode which plays a synthesized sound of each note as it is inserted into the system to clarify the underlying principles of the sketch. And a sped up version which generates the grid-pattern much quicker.

If you hover your mouse over or touch one of the nodes, the sketch highlights matching relations of the selected note to help explore patterns and repetitive structures - a functionality, that I hope to build upon for more detailed insights into the underlying musical theory.

Use this area to interact with the sketch
This is an interactive element. Use your mouse or fingers to interact.
Chapter 2
Designing
Time
 
Circular aspects of music and design
The very fabric of music, in many of its instances, is based upon layers of repeating patterns that play out over time. So it seems only natural to further explore the gestalt of the Prelude in C by steering the next set of visualizations to circular models: Universally understood, highly accurate and easily computable objects that help visualize the nature of music and time like no other geometric shape.

This set of chronologic representations explores how the passage of time can be mapped to visual systems while carving out the very essence and character of the music it represents.

While these interactive visualizations are still in a very playful state of slowly converging towards deeper insights that are hidden in the 545 consecutive notes which make up the Prelude in C. Notice how recognizable shapes and patterns start to appear in the circular shapes and how they are coherently bound together by the individual beat-progression of 16 notes each (highlighted by the circles and bars marked in red)

Also notice, how towards the end of the Prelude, the tonality of the piece changes and how this is visually reflected by the larger circles/bars that are mapped to individual notes: The bigger the representation of the shape, the lower the note/octave.

If you hover your mouse on on the shapes (or touch it with your finger) the system extracts a visual representation of a full beat consisting of 16 notes each.

Use this area to interact with the sketch
This is an interactive element. Use your mouse or fingers to interact.
The content of this project will be updated on a regular basis - so check back soon!
]]>
DDD Milan 2017 https://www.patrik-huebner.com/portfolio-item/ddd-milan-2017/ Sat, 17 Jun 2017 07:46:14 +0000 https://www.patrik-huebner.com/?p=1599
loading DDD-experiment

Loading DDD-experiment...

+
Design and code by Patrik Huebner
Audio by Cabled Mess

Interactice visual experiment for the Digital Design Days, Milan 2017

Initiated by the fine folks over at Monogrid on the topic of “Pixel”, this webGL-based animation was featured and exhibited during the Digital Design Days (DDD) DevX-experiment.

]]>
Adventura https://www.patrik-huebner.com/portfolio-item/adventura-w-mike-gao/ Thu, 09 Mar 2017 19:38:47 +0000 https://www.patrik-huebner.com/?p=1492

Loading...

Loading - stand by...

Whitestone Three.js contest. Music by Mike Gao. Animation and design by Patrik Hübner

Loading...

Touch to start the animation

Mike Gao Cover
Mike Gao - Adventura
Pause | Mute

Whitestone.io coding-challenge to create an audio reactive art piece using Mike Gao’s track Adventura.

Whitestone is an initiative to reinvent online music through visuals and interactivity. It’s a place to discover music in a different way – through visuals, motion and interactivity. Find out more here.

adventura-promo-02
adventura-promo-04
]]>
Generative Collage Synthesizer https://www.patrik-huebner.com/portfolio-item/generative-collage-synthesizer/ https://www.patrik-huebner.com/portfolio-item/generative-collage-synthesizer/#respond Mon, 19 Dec 2016 16:16:17 +0000 http://localhost:8888/patrikHuebner/?p=1

Collages are an age-old and multilateral medium of expression. This procedural system deliberately objectifies the beautiful and often emotionally charged process, detracting the assessing element of thought, creating unlimited amounts of visual variations and messages that bear no intention and thus, in a sense, the ultimate message – free to just be…

The system uses a structured, algorithmic approach to combine elements of public domain photos, dynamically generated visual elements -like grids or shapes- and pre-defined text-elements in a dynamic and unpredictable manner. A weighted decision-approach controls the flow of elements
.

Developed using Processing, a JAVA-based visual environment.

]]>
https://www.patrik-huebner.com/portfolio-item/generative-collage-synthesizer/feed/ 0
No Move https://www.patrik-huebner.com/portfolio-item/no-move-audio-reactive-experiment/ Thu, 14 Jul 2016 16:32:56 +0000 http://localhost:8888/patrikHuebner/?p=336
preloading spinner

Loading

This interactive animation requires a modern browser with WebGL-support. If you can't see this animation, don't worry - there's a video of the whole thing if you scroll down (:

Touch to start the animation

“No Move” is a 3D, audio-reactive music visualization that I created for the upcoming INJUVIK Collective live-set. This real-time, browser-based animation will be part of the live electronic music- and projection-performances Stefan, Tim and I will share at different festivals and gigs all over Germany.

]]>
Piano https://www.patrik-huebner.com/portfolio-item/piano-3d-audio-reactive-typography/ https://www.patrik-huebner.com/portfolio-item/piano-3d-audio-reactive-typography/#comments Thu, 07 Jul 2016 16:38:04 +0000 http://localhost:8888/patrikHuebner/?p=257
preloading spinner

Loading

This interactive animation requires a modern browser with WebGL-support. If you can't see this animation, don't worry - there's a video of the whole thing if you scroll down (:

Music: "Time" by INJUVIK Collective

Touch to start the animation

Form. Space. Music. Interaction. „Piano“ invites the observer to be a playful part of the liaison of generative design, audio-reactive interaction and three-dimensional animation – exploring the unpredictable performances generated during those unique moments in the process.

Originally developed for the live-VJ’ing component of the electronic trio INJUVIK Collective, this interactive browser-based system by designer Patrik Hübner unites three-dimensional typography-elements with algorithmically propelled animations and the freedom to explore and influence every movement and every reaction of the system in real-time.

Created with Three.js and P5.js
“Piano”, as performed by Tim Rodenbröker / INJUVIK Collective
Idea, design and programming: Patrik Hübner / INJUVIK Collective

Piano was on exhibition for one week from August 15th through 18th 2016 as part of the Platine Festival in Cologne. A MIDI-controller was placed in front of a well frequented shopping window onto which the interactive animation was projected.

Visitors and passers-by of all ages were invited to play and explore the interactive world of Piano and its myriad of possible visual states. The installation ended up being a colorful meeting ground for people starting to explore the festival and finding their way around the exhibitions.

Click on the video above to see the MIDI-based interaction demonstrated.
]]>
https://www.patrik-huebner.com/portfolio-item/piano-3d-audio-reactive-typography/feed/ 1
Wooden Drum https://www.patrik-huebner.com/portfolio-item/wooden-drum-audio-reactive-live-projection/ Sun, 03 Jul 2016 13:49:58 +0000 http://localhost:8888/patrikHuebner/?p=131

„Wooden Drum“ is a generative mixed-media installation which is propelled by real-time audio-reactive algorithms, creating unique and irreproducible visual outputs based on the ambient sound of the space surrounding it.

Music by INJUVIK Collective
Light-table photography by Tim Rodenbröker
Model: Alina Schäfer
Videography: Philipp Wachowitz, Negativetrend
Idea, concept & programming: Patrik Hübner

Originally developed for the live-VJ’ing component of the electronic trio INJUVIK Collective, this interactive browser-based system unites a massive 3D particle-system with analog lighttable-footage and generatively created shapes.

]]>
Time https://www.patrik-huebner.com/portfolio-item/time-audio-reactive-live-projection/ Thu, 30 Jun 2016 20:04:45 +0000 http://localhost:8888/patrikHuebner/?p=351
preloading spinner

Loading

This interactive animation requires a modern browser with WebGL- and video-support. If you can't see this animation, don't worry - there's a video of the whole thing if you scroll down (:

Music: "Time" by INJUVIK Collective

“Time” is an audio-reactive music visualization that I created for the upcoming INJUVIK Collective live-set. This real-time, browser-based 3D-visualization will be part of the live electronic music- and projection-performances Stefan, Tim and I will share at different festivals and gigs all over Germany.

This version has been slightly modified for a simplified user-experience. Additionally, to panning with your mouse, you can interact with the sketch by right-clicking and dragging your mouse or by using three fingers to swipe on touch-based devices.

]]>
The Koi Session https://www.patrik-huebner.com/portfolio-item/the-koi-session/ Mon, 27 Jun 2016 23:34:40 +0000 http://localhost:8888/patrikHuebner/?p=1256

One playground of applied generative design that has proven to be especially thrilling is my collaboration with my good friend Tim Rodenbröker who creates incredibly awesome live-electronic music using a one-track looper under the pseudonym Injuvik.

In the summer of 2015 we had the chance to document some of these moments in a temporary space for art and creativity called Zwischenstand. The entire session was completely improvised and caught on tape by the talented videographers Philipp Wachowitz of Negativtrend and Alina Schäfer in an honest documentation of what moments this combination of unscripted electronic music and generative, audio-reactive design-systems can create.

The setup of the shoot was pretty minimalistic: A mostly empty space, two talented videographers, a musician and yours truly controlling the real-time audio-reactive design-systems that I created during the course of the previous gigs with Tim. The session generated a total of five tracks/videos. Sadly, it was only until the last two videos that we realized that our projection space was pretty small. So the (in my opinion anyway) most impressive design systems using real-time Kinect-based 3D-depth visualizations ended up not looking as impressive as they could have.

To create his music, Tim combines his profound instrumental skills with a self-imposed minimal electronic setup – allowing him to capture the mood of the moment, channeling his spontaneous thoughts and sharing it with his audience.

KoiSession-1920-04
]]>
EX8 https://www.patrik-huebner.com/portfolio-item/ex8/ https://www.patrik-huebner.com/portfolio-item/ex8/#comments Mon, 02 May 2016 18:27:04 +0000 http://localhost:8888/patrikHuebner/?p=355

Generative typographic experiments, based on a simulated 2D physics models.

All of these animations are based on a simulation of a physics-based particle systems. Those system’s initial state is the result of a randomized configuration of digital particles that are inserted into the physics “world” with dynamic properties – including, but not limited to, spin, speed and initial direction.

The playful interaction of simulated boundaries and simulated particles generates virtually limitless combinations of typographic variations, negative space-impressions and attractive visual states, demonstrating that physics and the visual arts can unite in the digital realm to create charming results.

]]>
https://www.patrik-huebner.com/portfolio-item/ex8/feed/ 1
Chindogu https://www.patrik-huebner.com/portfolio-item/chindogu/ Mon, 02 May 2016 18:00:38 +0000 http://localhost:8888/patrikHuebner/?p=394

The art of intentionally useless machines.

Chindōgu (珍道具) is the Japanese art of inventing ingenious everyday gadgets that are sometimes described as “unuseless” – that is, they cannot be regarded as “useless” in an absolute sense, since they do actually solve a problem; however, in practical terms, they cannot positively be called “useful”.

The animations in the “Chindōgu”-series are inspired by this unique approach to communication and design as they are based on practical algorithms to determine possible configurations and deployments of objects in space – but are put to no actual use other than smooth motion.

]]>
Benevolent https://www.patrik-huebner.com/portfolio-item/benevolent/ Mon, 02 May 2016 15:06:12 +0000 http://localhost:8888/patrikHuebner/?p=407

Benevolent-series – an exploration of the clash of physics and digital generative art. A typographic simulation created with computer-code.

All of these animations are based on a simulation of a physics-based particle systems. Those system’s initial state are is result of a randomized configuration of digital particles that are inserted into the physics “world” with dynamic properties – including, but not limited to, spin, speed and initial direction. In some simulations, an initial event triggers the chain of reactions while in others, the movement of the particles is only confined by a simulated “wall”, creating invisible typographic shapes and interactions.

The playful interaction of simulated boundaries and simulated particles generates virtually limitless combinations of typographic variations, negative space-impressions and attractive visual states, demonstrating that physics and the visual arts can unite in the digital realm to create charming results.

]]>
Famous Lifesavers https://www.patrik-huebner.com/portfolio-item/famous-livesavers/ Mon, 02 May 2016 14:50:06 +0000 http://localhost:8888/patrikHuebner/?p=490

“Famous lifesavers” is a series of nonsense animation-exercises in 3D-space to explore generative typographic vertex-geometry calculations.

Every animation is based on a single input string that can be defined by the user. The software then extracts the individual characters, calculates their vertices in 3D-space and returns the coordinates to the animation-pipeline. In addition to Processing‘s vector-functions, this animation is based on Geomerative, a toolkit for advanced typographic vector-calculations that extends Processing’s 2D geometry operations.

]]>
Creative Coding Days https://www.patrik-huebner.com/portfolio-item/creative-coding-days/ Sun, 10 Apr 2016 17:56:12 +0000 http://localhost:8888/patrikHuebner/?p=540

We wish everyday could be a creative coding day. But sometimes life happens, you have to feed your cat, go to work, socialize with friends and family… all kinds of irritating stuff that keeps you from your laptop.

We are a bunch of creative coders from all over Europe. We like to go into the woods and make awesome stuff for a few days, in the inspiring company of like-minded people, a fireplace, some serious food, a few beers and preferably an unspecified amount of frolicking lambs outside (where we sometimes venture to clear our heads and face our all-encompassing fear of the day-star).

The logo-animations on this page were created to commemorate the amazing days I’ve spent with my fellow coding friends and to express the fun and creativity that we shared. In the spirit of our time, they were purely created with modular code and typographic geometry (built with Processing). Creative Coding Days Nijemirdum, Netherlands 2016 – generative logo designs

]]>
How Scanners Work https://www.patrik-huebner.com/portfolio-item/how-scanners-work/ Fri, 08 Apr 2016 15:42:04 +0000 http://localhost:8888/patrikHuebner/?p=1294

A video-experiment that visually explores the cacophonies of subtle impressions and often unfiltered streams of information that encompass our digital selves at an ever increasing rate.

Created in a joint effort with designer and musician Tim Rodenbröker, this audio-reactive music video was created using a wide variety of visual techniques centered around the idea of having autonomous entities (i.e. generative systems) scan and interpret large amounts of visual information with little to no human influence – triggered only by the factors of music and randomness.

I contributed various animated scenes and shots created by two custom-built generative algorithms which were developed using Processing:

  • A sketch that horizontally scans public domain videos at randomized time-, size and opacity-values, resulting in a stretched or compressed spatial representation of the video at different states in time. The resulting images were then combined into a stop-motion video.
  • A sketch that analyzes the video of Alina (the amazing lady featured in this shot), creating audio-reactive 3D-cubes on top of the brightness-values of the analyzed image. Additionally, the RGB-channels were split and then shifted horizontally.

These scenes were later mixed with additional 4K portrait-footage of Alina and Tim’s animated collages.

howScannersWork-widescreen-03

Music: Injuvik
Model: Alina Schäfer
Camera: Philipp Wachowitz
Generative Visuals: Patrik Hübner
Directed by: Tim Rodenbröker

]]>
Ploitering https://www.patrik-huebner.com/portfolio-item/ploitering/ Thu, 31 Mar 2016 21:12:38 +0000 http://localhost:8888/patrikHuebner/?p=603

“Ploitering” is a series of nonsense animation-exercises to explore possible applications of object-based 2D-easings and geometry-calculations.

ploitering-highRes-01
]]>
Quasar https://www.patrik-huebner.com/portfolio-item/quasar/ Wed, 30 Mar 2016 16:36:35 +0000 http://localhost:8888/patrikHuebner/?p=643

Quasar: A massive object in space that emits a tremendous amount of energy

Data-driven generative animation based on pre-computed mesh-data: “Quasar” extracts dynamic datasets and Bezier-data from object-files, calculates their vertices in 3D-space and returns the coordinates to the animation-pipeline. Created with code, built with Processing.

]]>
3D Interactive Wave https://www.patrik-huebner.com/portfolio-item/3d-interactive-wave/ Mon, 07 Mar 2016 10:42:43 +0000 http://localhost:8888/patrikHuebner/?p=689

Interactive 3D wave. A visual experiment on animating a dynamic particle system using WebGL.

]]>
Generative floating shape https://www.patrik-huebner.com/portfolio-item/generative-floating-shape/ Thu, 03 Mar 2016 15:31:10 +0000 http://localhost:8888/patrikHuebner/?p=716

A visual experiment with webGL-based 3D-geometry. Specifically: Animating vertex-based displacement with textured surfaces and swapping textures in real-time.

]]>
This Is The Moment https://www.patrik-huebner.com/portfolio-item/this-is-the-moment/ Fri, 26 Feb 2016 22:08:01 +0000 http://localhost:8888/patrikHuebner/?p=735

This Is The Moment – interactive, audio-reactive music video experiment, based on music by INJUVIK.

Following up to my prior experiment with audio-reactive, web-based music-visualizations, this interactive WebGL-animation broadened my horizon in quite a couple of profound ways, moving my focus away from P5.js and towards the realms of Three.js. These topics were of special interest to me while developing/designing the animation:

  • Streaming and analyzing XHR-WebAudioContent
  • Implementing three.js
  • Generative shape-generation with toxiclibs
  • Adding fully featured mouse-/multi-touch-support with rotate- and zoom-controls
  • Keyframing camera- and environment-variables while matching the analyzed sound-data
  • Routing canvas-data through numerous post-processing shaders
]]>
Interactive audio-reactive loop #1 https://www.patrik-huebner.com/portfolio-item/interactive-audio-reactive-loop-1/ Tue, 09 Feb 2016 10:03:04 +0000 http://localhost:8888/patrikHuebner/?p=761

Move mouse or touch to interact

To me, the most beautiful aspect of generative design is its inherent infinite amount of unique details that can be discovered in each and every system and its iterations.

Sadly, my previous work with Processing and its underlying Java-Applet-structure left this aspect of interactive discovery and exploration untapped due to the fact that modern browsers just don’t allow this kind of technology to be executed anymore (and for very good reasons, I might add).

After developing over a dozen interactive, audio-reactive generative design-systems for my AV-performances with my good friend INJUVIK, I felt the need to move those ideas beyond the projector and allow those generative outputs to be explored by everyone.

What you see here is my first approach to bringing those interactive systems to the web. But before greatness can arise, there’s technologies to be conquered (:

This experiment thus focusses on some primary areas of interest:

  • (Pre-)Loading and playing back sound in the browser
  • Analyzing both the amplitude and (smoothened) spectrum in real-time
  • Using the analyzed audio-data to create and animate objects and particle-systems in 3D-space
  • Creating a level of interactivity for both mouse- and touch-input (this area certainly needs a bit more work)
  • Creating global controls for manipulating (and layering) the audio-loops

The underlying framework I initially chose for this WebGL-experiment (due to my prior work with Processing) is P5.js and while it has many great aspects to it, I feel like I need to move more towards the realms of three.js for an even more defined framework. To be continued…

Audio-loops by INJUVIK

]]>
Generative Physics Systems https://www.patrik-huebner.com/portfolio-item/generative-physics-systems/ Wed, 03 Feb 2016 13:53:26 +0000 http://localhost:8888/patrikHuebner/?p=772

Generative animations based on simulated physical behavior and autonomous particle-interactions.

In school, I never really got into physics and the impression that this matter had no real-world applications for my everyday life lasted until I started employing physics-based particle-systems in my generative experiments. The three animations you see here show the dynamic results of a rather simple set of rules that quickly become complex (and in some sense “alive”) once you increase the number of “actors” involved.

The basic set of rules for every particle (an autonomous part of the software that is both separated in terms of code and integrated in the way that it can interact with other particles) can be described like this:

  1. Follow a global vector of attraction (gravity)
  2. Adhere to set physical constants like friction and restitution
  3. If you collide with another particle, move into the opposite direction
  4. If you collide with a set boundary, move into the opposite direction

The three animations also show how some of my sketches gradually evolve as I continue experimenting with the system: The initial sketch (the one called “down”) gave me an impression of how particles would behave within the set rules and I came up with the basic idea of creating a set of boundaries that were somewhat permeable. The second sketch (called “up”) inverts the gravity while employing smaller particles and adds a more accentuated motion-trail that creates geometric shapes if the particle crosses its own trail. The third sketch (the one below this section of text) combines those experiments with additional blended graphical elements and removes the visible boundaries for a more dramatic effect.

All animations were purely created with code using Processing.

]]>
Generative Star Wars Shapes https://www.patrik-huebner.com/portfolio-item/generative-star-wars-shapes/ Thu, 28 Jan 2016 23:09:44 +0000 http://localhost:8888/patrikHuebner/?p=797

Generative, masked Bezier-path-transformations using SVG-based geometry.

To me, the most beautiful aspect of generative design is its inherent infinite amount of unique details that can be discovered in each and every system and its iterations. These posters serve as a fine example of the incredibly intricate designs that generative design systems can create, showcasing a level of complexity that would be hard to recreate manually.

Based on Star Wars-icon-vectors. Created with code, built with Processing.

]]>
Generative Logo Synthesizer https://www.patrik-huebner.com/portfolio-item/generative-logo-synthesizer/ Thu, 21 Jan 2016 16:03:58 +0000 http://localhost:8888/patrikHuebner/?p=1317
Logoname
This is a subline
Generative Logo Synthesizer

Generative logo synthesizer: A visual system to create almost infinite amounts of unpredictable, abstract forms and shapes

Corporate identity development aided by dynamic algorithmic emissions

Creating a visual identity is one of the most intricate and challenging tasks a designer can face and it is one of those very special realms that uniquely blur the lines between art and design. Aiding and promoting instant public recognition of a brand is a both timeless and singularly contemporary task that has a long-standing history of innovation and disruption.

To create the largest amount of possible logo-variations this specific algorithm uses randomness and chance as its main source of input. Future variations of this algorithm can however easily be modified to use different types of data as input – ranging from text-analysis over corporate data to even music to create more specific and (if desired) repeatable results.

Loosely building on the idea of Apophenia (the tendency to perceive meaningful patterns within randomness) this system is able to create a strikingly large amount of visually pleasing abstract logos.

This system establishes a proper groundwork for future experiments and iterations that build on these abstract forms and will hopefully allow me to extend the algorithm to more specific, non-abstract shapes and forms that draw on different data-sources ranging from local data to API-based data. And while it will (not yet) replace the intricate skills of a seasoned designer, it can be used as both a tool for initial brainstorming and „brute-forcing“ ideas.

Generative Vertex-Shapes

To create the two primary shapes of the logo, the algorithm uses a prototype-object that autonomously creates connected points in space (also known as vertices). Based on unique decisions, the vertices are calculated by creating a varying amount of points around a circle, distributed along different magnitudes. To further increase the amount of possible variations, the algorithm can use one of four possible styles of connecting the vertices.

Dynamic Color Palettes

Good logos work in black and white. But to extend upon the basic exploration of shapes, the algorithm is also able to calculate random matching color palettes by freely choosing a base-color and calculating which colors complement it using triade-computations.

Generative Typography

The algorithm uses a set (of easily extendable) pre-defined logo-names and -taglines, freely modifying certain properties like font-family, -size, -spacing and -transformation.

Dynamic Frameborder

Based on certain pre-defined thresholds of likeliness the algorithm adds and calculates dynamic frame-borders for both the vertices and the typography. To extend the amount of possible variations, frameborders can be drawn using different visuals styles and sizes.

Generative Pattern- Overlay

Based on certain pre-defined thresholds of likeliness the algorithm adds and calculates dynamic decorative elements that can overlay the vertex-shapes. Those elements are ordered in a dynamic grid-layout and can vary between square- and circular-shapes.

Dynamic Animations

To bring all elements together the algorithm determines one of 30 possible animation-styles to reveal the logo. The timeline of the animation and possible variations are determined on the fly and change for every iteration.

generativeLogo-02
generativeLogos-promo-parallax
]]>
MCCC December https://www.patrik-huebner.com/portfolio-item/mccc-december/ Thu, 21 Jan 2016 14:08:01 +0000 http://localhost:8888/patrikHuebner/?p=830

Monthly Creative Coding Collaboration, December.
Theme of the month: “A line, a line”

Each and every element that make up these animations is inserted into the system as an autonomous object: A prototype of software-code with a common set of rules and behaviors, yet free to act out its life on the screen in a distinct and unique form.

Animations based on a common theme and color palette as defined by the rules of MCCC. Created with code, built with Processing.

mccDecember-generative-challenge-1
]]>
Experiments in the third dimension https://www.patrik-huebner.com/portfolio-item/experiments-in-the-third-dimension/ Thu, 21 Jan 2016 13:44:38 +0000 http://localhost:8888/patrikHuebner/?p=873

Experiments in creating and animating objects with algorithms in the third dimension.

These nonsense animations are a collection of research-projects and code-explorations I executed to familiarize myself with basic and advanced techniques focusing on creating, calculating and animating pixels in the third dimension. All animations were created with code and built with Processing.

experiments-third-dimension-1
]]>
Recursive animations https://www.patrik-huebner.com/portfolio-item/recursive-animations/ Thu, 21 Jan 2016 13:31:42 +0000 http://localhost:8888/patrikHuebner/?p=909

Recursion occurs when a thing is defined in terms of itself or of its type – where a defined function is applied within its own definition.

This series of animations explores recursion as a means to create, visualize and animate dynamic design systems. All animations were created with code, built with Processing.

recursion-cover2
]]>
RGB-shift loops https://www.patrik-huebner.com/portfolio-item/rgb-shift-loops/ Thu, 21 Jan 2016 13:09:32 +0000 http://localhost:8888/patrikHuebner/?p=932

Visual research on applying post-processing color-shift and pixel-modifications to animated generative design-systems.

These experiments focus on accessing and modifying color- and channel-properties of animated design system in Processing in real-time. Specifically, shifting color-values and multiplying pixel information. Not everything you see in the animation is actually drawn in the core algorithm as some information are extracted and duplicated from the color- and pixel-values.

rgbShiftedLoops-cover-2
]]>
Geometric Loops https://www.patrik-huebner.com/portfolio-item/geometric-loops/ Thu, 21 Jan 2016 13:05:45 +0000 http://localhost:8888/patrikHuebner/?p=967

Visual research on geometric, multi-layered animations with animation-sequences and generative form-building.

These animations focus on sharpening my skills of controlled geometry-animations with keyframes, defined animation-sequences and smooth motion that employs easing-algorithms and time-constants. Created with code, built with Processing.

geometricLoops-cover-6
]]>
Morphing Vector Particles https://www.patrik-huebner.com/portfolio-item/morphing-vector-particles/ Thu, 21 Jan 2016 12:43:57 +0000 http://localhost:8888/patrikHuebner/?p=1009

Visual research on animated, object-based point-morphing with vector-geometry.

These animations focus on sharpening my skills of controlling the morphing of vector geometry to multiple keyframes/scenes with smooth motion that employs easing-algorithms and time-constants. Animated elements are created as particle-objects within the scene. Created with code, built with Processing.

createdWithCode-mockup
]]>
Generative Shapes #1 https://www.patrik-huebner.com/portfolio-item/generative-shapes-1/ Tue, 19 Jan 2016 18:20:25 +0000 http://localhost:8888/patrikHuebner/?p=1028

Visual research on autonomous, object-based poster generation using generative algorithms that build abstract shape-combinations.

These animations focus on sharpening my skills of using generative algorithms, object-based shape-prototypes and chance to create intricate and abstract poster designs. Created with code, built with Processing.

]]>
A different lamp https://www.patrik-huebner.com/portfolio-item/a-different-lamp/ Tue, 19 Jan 2016 18:16:51 +0000 http://localhost:8888/patrikHuebner/?p=1206

Light. It forms the very essence of what our visual perception is based upon. Its path, right from its inception, being catapulted against the myriad of particles it bounces off of, right until it strikes our retinas has always left me wondering about how incredibly complex everything around us is.

It was one of those daydreams that had me thinking about light, it’s form and how it can be manipulated but never really stopped that formed the generative experiment I so mundanely called “a different lamp”.

There’s this little miracle hidden inside all of our houses and flats that everyone just stopped to admire or even really think about once it became so ubiquitous: Lamps. Maybe it’s just my IKEA-inspired, minimal interior decoration talking but it seems that, for most of the lamps I own or see around me, they have been degraded to simple tools, illuminating our everyday lives, going unnoticed besides its potential to inspire and awe us.

So I set out to re-imagine the forms of our bright companions, to give them the freedom to manifest themselves and their playful interaction with light, itself and the things around us in the most diverse possible way.

a-different-lamp-generative-product-design-2

But how do you go about that?

Naturally (because, well, who in their right mindset wouldn’t… right?) I turned to another miracle of our modern days, my beloved MacBook, to develop a generative design system that would allow me to create a virtually unlimited amount of three-dimensional forms that could be used as shades. As I wanted this system to be controllable but at the same time unpredictable, I decided to create an approach that uses a simple two-dimensional coordinate-system as the starting point to generate three-dimensional points in space. Those points make up what us nerds call “meshes”. The “essence” of the script feeds various simple mathematical functions like sine and cosine with those two-dimensional coordinates to create natural forms in an almost unlimited amount of variations.

If that sounds complicated: It’s really not – but have a look for yourself:

The animation above depicts one possible result of the generative system. The parameters for the underlying mathematical functions change every iteration so no two results will be alike. The x-,y- and z-coordinates are calculated as follows:

float u = map(iu, 0, uCount, uMin, uMax);
float v = map(iv, 0, vCount, vMin, vMax);
float x = v;
float y = sin(u)*cos(v);
float z = cos(u)*cos(v);

The mesh you saw above is not just limited to that rather boring wireframe visualization but can also be further exported into 3D-formats that allow a more realistic visualization of what lamps generated by this system would look like.

I decided to pick four variations that I most definitely would trade my trusted old IKEA MAGNARP-lamp in for and rendered them in the most photorealistic way my humble 3D-skills would allow me to.

a-different-lamp-generative-product-design-4
]]>
Generative Characters #1 https://www.patrik-huebner.com/portfolio-item/generative-characters-1/ Tue, 19 Jan 2016 18:13:04 +0000 http://localhost:8888/patrikHuebner/?p=1045

Visual research on autonomous, object-based poster generation using generative algorithms that build abstract typographic character-combinations.

These animations focus on sharpening my skills of using generative algorithms, object-based character-prototypes and chance to create intricate typographic poster designs. Created with code, built with Processing.

generativeShapePoster-gallery
]]>
MCCC Revisited https://www.patrik-huebner.com/portfolio-item/mccc-revisited/ Mon, 18 Jan 2016 22:03:32 +0000 http://localhost:8888/patrikHuebner/?p=1065

Freestyle follow-up to a monthly Creative Coding Collaboration with unfettered parameters.

Each and every element that make up these animations is inserted into the system as an autonomous object: A prototype of software-code with a common set of rules and behaviors, yet free to act out its life on the screen in a distinct and unique form.

Animations based on a common theme and color palette as defined by the rules of MCCC. Created with code, built with Processing.

]]>
Generative Characters #2 https://www.patrik-huebner.com/portfolio-item/generative-characters-2/ Mon, 18 Jan 2016 22:00:45 +0000 http://localhost:8888/patrikHuebner/?p=1078

Visual research on autonomous, object-based poster generation using generative algorithms that build abstract typographic character-combinations.

These animations focus on sharpening my skills of using generative algorithms, object-based character-prototypes and chance to create intricate typographic poster designs. Created with code, built with Processing.

]]>
MCCC November https://www.patrik-huebner.com/portfolio-item/mccc-november/ Mon, 18 Jan 2016 21:42:27 +0000 http://localhost:8888/patrikHuebner/?p=1093

Monthly Creative Coding Collaboration, December. Theme of the month: “Dots”

Each and every element that make up these animations is inserted into the system as an autonomous object: A prototype of software-code with a common set of rules and behaviors, yet free to act out its life on the screen in a distinct and unique form.

Animations based on a common theme and color palette as defined by the rules of MCCC. Created with code, built with Processing.

]]>
Fuego https://www.patrik-huebner.com/portfolio-item/fuego/ Mon, 18 Jan 2016 20:30:26 +0000 http://localhost:8888/patrikHuebner/?p=1116

Fuego – a collaborative, abstract audio-reactive music video

This audio-reactive music video, featuring the wonderful song “Fuego” by Injuvik, was created in a single afternoon-session using generative algorithms -visualized in Processing– and real-time FFT-audio analysis before being cut into it’s final form in Premiere Pro.

After having performed a couple of live-gigs with my good friend and electronic-musician Tim Rodenbröker (aka Injuvik) we were intrigued by the idea of creating more generative and algorithm-based music videos. This initial video showcases some of our early experiments with this medium and will hopefully just be the start of many more audio-visual experiments to come.

Directed by: Tim Rodenbröker
Generative Visuals: Patrik Hübner
Music: Injuvik
fuegoDemo-1
]]>
Generative Creatures https://www.patrik-huebner.com/portfolio-item/generative-creatures/ Mon, 18 Jan 2016 18:00:35 +0000 http://localhost:8888/patrikHuebner/?p=1184

Visual research on using generative algorithms to create an unlimited amount of randomized and loveable vector-based creatures.

See all those loveable guys (and gals, I suppose) on this page? All of these were created within mere seconds using a generative algorithm that determines the creature’s parameters – including (but not limited to) the size, amount of eyes, mood, haircut, presence of feet (or tails?), etc.

To me, the most beautiful aspect of generative design is its inherent infinite amount of unique details and “happy accidents” that can be discovered in each and every system and its iterations. This series of creature designs showcases some of the incredibly unexpected outputs such a generative system can produce.

Every creature is created from the same prototypical decision-tree that uses a weighed algorithmic approach to combining chance and dependence to set the rules that determine its form.

generativeCreatures-visual-poster
]]>
Wandering Through Dark Places https://www.patrik-huebner.com/portfolio-item/wandering-through-dark-places/ Mon, 18 Jan 2016 17:45:32 +0000 http://localhost:8888/patrikHuebner/?p=1133

Visual research on 3D vertex-geometry extrapolation, dynamic camera keyframing and generative form-building.

To me, the most beautiful aspect of generative design is its inherent infinite amount of unique details that can be discovered in each and every system and its iterations. This series of animations showcases some of the incredibly unexpected outputs such a generative system can create.

]]>
Random Movement https://www.patrik-huebner.com/portfolio-item/random-movement/ Sat, 16 Jan 2016 12:43:15 +0000 http://localhost:8888/patrikHuebner/?p=1146

The following sketches are still based on a purely random movement but do so in a more controlled way as I tried to get a hang of circular motion, dynamic line-animations and different animation-states.

After getting to grips with some of the basic Processing animation-concepts, I started to explore somewhat more controlled random movement-ideas.

]]>
Generative Triangles https://www.patrik-huebner.com/portfolio-item/generative-triangles/ Sat, 16 Jan 2016 12:21:32 +0000 http://localhost:8888/patrikHuebner/?p=1175

Using generative algorithms to define forms and shapes in the design-process is an unbelievably creative and liberating experience once you realize it’s potential.

This set of illustrations resulted from my experiments on getting a more tight control over dynamic shape-aggregations using Processing. The basic goal I set for myself was to come up with a generative system that would allow me to quickly create dynamic shape-variations that were independent of each other in terms of position, size and additional animation-parameters but also shared a single point of connection across all iterations.

scatterLetters-poster
]]>