Recreating Bauhaus Geometry with Code: Herbert Bayer & Max Bill in p5.js
Modernist design has always fascinated me because of how simple shapes can create powerful visual systems. Recently, I explored two…
Recreating Bauhaus Geometry with Code: Herbert Bayer & Max Bill in p5.js
Modernist design has always fascinated me because of how simple shapes can create powerful visual systems. Recently, I explored two artworks rooted in Bauhaus and Swiss modernist traditions — one inspired by Herbert Bayer and another based on a geometric composition by Max Bill.
Herbert Bayer & Max Bill (source: licensed by Google & Wikipedia)
Instead of only studying them visually, I wanted to recreate both pieces using p5.js and then extend them with interaction and motion with the help of Claude.ai.
The goal was simple: Translate modernist geometry into generative and interactive design.
Inspiration from Modernist Design
Both Bayer and Bill were deeply influenced by the ideas of the Bauhaus, which aimed to unify art, craft, and technology.
The Bauhaus philosophy emphasized:
- simplicity of form
- geometric structure
- minimal color palettes
- design systems rather than decoration
These principles translate surprisingly well into programming because code also relies on structure, repetition, and logic.
Herbert Bayer: Bauhaus Ausstellung Poster
The first piece is inspired by Herbert Bayer’s poster for the Bauhaus Ausstellung Weimar (1923). The design uses a grid of geometric modules with bold primary colors and diagonal black shapes. Despite the minimal elements, the repetition creates a strong visual rhythm.
Recreation of the Original artwork in p5.js
While recreating this in p5.js, I broke the design into a grid system with repeating squares and diagonal forms. To make the experience interactive, each colored square behaves like a clickable button. When pressed, the square briefly compresses like a keyboard key and plays a musical note, turning the static composition into a playful visual instrument.
**Link for the interactive artwork_Bayer**
Max Bill: Variations on a Single Theme
The second piece is based on *Variations on a Single Theme* by Max Bill. Bill was known for his belief in concrete art, where artworks are built from precise geometric and mathematical relationships.
The composition consists of overlapping circular rings of different colors. When translating this into p5.js, I recreated the circles using parameters like radius, position, and stroke thickness. To extend the piece digitally, I added a slow rotational motion, allowing the circles to continuously shift their relationships.
Recreation of the Original artwork in p5.js
A “Play Chimes” button triggers a soft sound, adding an auditory layer to the visual rhythm.
**Link for the interactive artwork_Max Bill**
Geometry Meets Code
What makes these recreations interesting is how naturally modernist design principles translate into programming logic:
- grids become coordinate systems
- repetition becomes loops
- shapes become geometric primitives
- rhythm becomes animation
By recreating these artworks with code, the pieces move from static images to interactive systems. In a small way, this continues the Bauhaus vision of combining art, design, and technology — now expressed through generative design and interaction.
Final Thoughts
Recreating these works by Herbert Bayer and Max Bill in p5.js made me realize how naturally modernist design translates into computational thinking. The Bauhaus emphasis on structure, geometry, and clarity aligns closely with how code operates — through grids, coordinates, repetition, and rules.
By translating these artworks into code, they shift from being static compositions to interactive experiences. The Bayer-inspired grid becomes something playful and responsive through clickable sound interactions, while the Max Bill composition evolves into a moving system where circles continuously rotate and interact.
In a way, this experiment feels like extending the original ideas of modernist design into a contemporary medium. If Bauhaus sought to merge art, craft, and technology, recreating these works through code continues that spirit — exploring how classic design principles can evolve within digital and interactive environments.
References
메타데이터
- post_id
- 5bdb3023670f
- slug
- recreating-bauhaus-geometry-with-code-herbert-bayer-max-bill-in-p5-js-5bdb3023670f
- url
- https://medium.com/@swati_s_53529/recreating-bauhaus-geometry-with-code-herbert-bayer-max-bill-in-p5-js-5bdb3023670f
- canonical_url
- https://medium.com/@swati_s_53529/recreating-bauhaus-geometry-with-code-herbert-bayer-max-bill-in-p5-js-5bdb3023670f
- author_url
- https://medium.com/@swati_s_53529
- status
- ok
- fetched_at
- 2026-06-20 20:29:01
