Inspiration

My inspiration for coding a digital version of a zen garden came from browsing the Generative Gestaltung book. Trying out various p5.js sketches provided on the book's GitHub account, I particularly liked the behavior and aesthetics of the P_2_1_1_04 sketch.

Something about it reminded me of a zen garden, so I started thinking about how a digital version might look and behave.

→ Try it out yourself

Ideation & Research

The semester project allowed for free implementation. This meant that existing code could be used and adapted to one’s own project.

After researching code templates for a zen garden on the web, particularly on stack overflow and coming up empty handed, the only way to accomplish the project was to do it myself.

Still new to the world of code (and anxious to fail yet again) I decided to work together with my former coding tutor. Going together through the ideation process and getting a deep insight into the very mathematical language of the machines I was able to make informed decisions about how I would build up the project.

Concept

The final concept pursued the goal of creating an interactive zen garden. The users should be given the opportunity to interactively create their own garden on a screen. The experience was to allow for a free positioning of five stones, any number of sand lines around each stone and the specification of a favorite stone color. The format is a simple one page website with integrated controls.

Implementation: code

Despite all efforts and long days of work, the code quickly became difficult for me to comprehend. If I were to take the course again I would, no doubt, take on a much less complex project.

In its present form, I could not reproduce the code on my own.

But for me personally, the gain and success lie in the fact that I was able to learn to understand the programming workflow in the first place. No longer do I shy away from long searches and dialogs on stack overflow, and now I can estimate much better the effort that an entire idea or just a single aspect requires.

Furthermore I learned how mathematical the world of programming is and why it is essential to know and be able to apply mathematical formulas in order to design parametrically.

We started the code with a pseudoalgorithm to get a clear idea of what exactly we wanted the code to do. This approach to code worked well for me. The code for stones that look as natural and organic as possible was borrowed from another project in Generative Gestaltung. 

One line of idea „a stone is created“ turned into 63 lines of code.

Implementation: design

For the visual part, I based my work on images of real zen gardens. For example, it was important to me that the stones look as natural as possible and have different sizes. Ideally, they should have gentle curves that do not look too constructed.

The color scheme needed to be subtle and harmonious in subtle gradations of warm beige-grey tones and light to deep green. And should someone like it rather shrill, the color of the stones can be adjusted individually by controls.

The implementation of the layout was done in many small, iterative steps. The most important decision was to move away from an embedded space to a zen garden background. In the final version, the stones can be placed anywhere on the website surface, even in the bleed of the page or behind the texts.

→ Try the Digital Zen Garden experience yourself

→ Project code on GitHub

Contemplation & Conclusion

From the moment I began studying Interface Design at the FHP in 2018, I've always put a lot of effort into learning how to code. Since I understand code as a tool to design with – a contemporary brush, if you will. At times the effort was so great that creative techniques like illustration or UX had to be completely neglected by me.

This personal journey of „learning how to code“ included many experiences such as being told that you can't teach code anyway because everything changes too fast, that I should “just do it” instead of asking, or simply being directed to “google it”. And so my biggest programming success until now was to complete step-by-step HTML/CSS courses at codecademy, alongside university courses and work, self-financed. HTML of course being just a markup language ;).

It was only in Parametric Design that I found what I had been looking for all this time, a teacher who listened to and answered all my questions in an approachable, patient and skilled way. This kind of education finally enabled me to work more independently. Trusting that code problems which arose week after week would be solved together, the usual overwhelming workload was eliminated and a good project could emerge.

By satisfying my need to learn how to code, a space opened up to think about what exactly I want to do with this skill. And so I can finally begin to shape my own voice as a designer. For this and everything else a huge Thank You to Sebastian Meier.