The Way Of Vibe Coding: From Sketch to Living 3D Ecosystem
As a "Tradigital" artist, my creative process is a balance between pure creativity and mastering the technical tools I choose to use. I like to experiment with new technologies and make new work to see what paths it leads to.
It can start with the soul and primal vision of a pencil sketch and can end with 3D models and the logic of code to add interactivity into the creations. My latest work in progress, the Flower Ecosystem, is more than just a 3D scene—it is an exploration of how organic life can be simulated in an immersive and interactive environment. I wanted to look at the viability of using interactivity in a web browser for future use in art pieces. I am pleased with how it looks for now too!
Click on the image below to have a try and then come back to t his page to read more about it. Please note, I have not optimized this 3D artwork for smartphones yet. Only desktop.
In this post, I will briefly look at how I built this interactive living systems, simulation the logic I use to structure them, and why I believe this "vibe coding" approach while not necessarily perfect,, a great gift for those of you, like me, who don't know code or don't know enough.
I used to really want to make interactive 3D in browsers. One of the best ways to do this at the moment is to use Three.js a library for Java language that is free to use which is always a good thing 🙂
I always tried learning it. Picking up a book or looking at tutorials online. It was fairly logical and clear. However, like me dabbling in Python code for creative art, my enthusiasm is not there. I just want the output as a visual artist/designer and focus on drawing.
Even with a large budget where I could afford to employ a coder, the amount of tweaking and iterations I would want to make would make the budget sky high. It reminds me of the early 2000s when internet designers would charge £50 to add some images to my site. That sounds so crazy now in the days of WordPress, Wix and all the other "user friendly" web content creation systems.
So now what people like Rick Rubin in his online experiential "The Way Of Code" termed Vibe Coding.
Now we can all prototype interactive applications, creative digital algorithm l art and so much more without having to know code or be an expert in coding.
Code Breakdown: The Bee & The Bloom
So you need to know a few things make vibe coding work. For example what programming language you want to use.
For example Three.js. I would say this is such a great language for you to get your work seen if it is 3D. Three.js will load on most browsers.
You then need to use LLM systems (large language models) . That is your ChatGpt , Claude and Gemini and all the other ones out there.
I wont go into how to use vibe coding in this post. I will do that later. However, you just need to tall it something like -
"make a pollination simulation with pollen coming out of some flowers and bees simulating pollination as a Three.js interactive browser base experience"
You will probably get some kind of 3D interactive result. After that you have to evolve it.
For me, I use 3D models. For example the flowers in the pollination scene. I made these in Blender. So I needed to then tell the LLMS that I needed to be able to upload my 3D models that would replace the very low poly flowers it was making.
And so on...
Many iterations later, and many bugs the final result, well work in progress emerged.
Speaking about bugs, if when you preview the application it gives you an error code. Copy and paste that and then tell the LLMS -
"Debug".
That can solve it. Often you may have to debug a lot.
At this stage, it is useful to know the basics of your programming language of choice. At least have an idea of the concepts. Getting the LLMS to debug often takes ages or it can even unravel the working application and make it, well ..... rubbish.
Have a go and let me know!
The Power of Expert Peer Review
Art is subjective, but code is functional. A beautiful "vibe-coded" scene can be ruined by performance bottlenecks.
If you really want to be sure of your code. Pay a coder to look at it. They may not want to have anything to do with you. Some coders will be insulted that you used AI to start with. Its similar to how an artist feels if someone takes AI generated images and ask them to review or tweak it.
I understand. For me, I am lazy in the way if the application works and the frame rates are ok. Well I think its ok, until someone tells me its not.
The Future?
I honestly think vibe coding will be so liberating for all creative disciplines from artist, designers and even coders.
I am constantly getting into this and I plan to try to integrate Three.js online 3D art to the real world with Arduinos.
Ready to learn how build your own digital garden or any interactive 3D browser scene you want? I can help with Three.js training with 3D environments and models...
Contact Me for a free 30 minute zoom trial at [email protected]
or sign up to my newsletter below to be the first to know where my exploration into the "tradigital" is going...
Resources
To master the intersection of design and code, bookmark these essential resources:
Pollination Interactive Simulation : The simulation I made with vibe coding mentioned in this blog post.
The Jenga Of Data: An art commission I made for Edinburgh University and The Realities Project.
Three.js Documentation: Your foundational manual.
Three.js Journey: The gold standard for moving from beginner to pro.
Discover Three.js: A fantastic free guide that explains the "why" behind the code.
CodePen (Three.js Tag): The best place to reverse-engineer how other artists handle interaction.
Three.js Discourse Forum: When you get stuck, the community here is unmatched.
The Way Of Code : Rick Rubin's free online book about vibe coding.
Space Simulations : by Inverness Design Studio
Claude :A strong AI LLM platform to vibe code with.
Z.ai : A lesser known one that is largely free. I have often taken the code from Claude to this when my tokens have ran out on Claude.
Google Gemini : Google's all encompassing LLM. Again good to copy the code to hear. I find especially helpful for debugging.
Blender: The 3D application I used to make the flowers and the 3D application I mostly use these days.
