---
title: "Plantarium"
date: 2022-08-31T20:46:26+02:00
cover: ./images/plantarium.png
featured: true
links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
tags: ["Web", "3D", "Svelte", "Node Systems"]
icon: /projects/plantarium/favicon.svg
draft: false
toc: true
---

# Introduction

Plantarium is the intersection of two things I find fascinating: plants and 3D modeling.  
It is a web app that allows users to create and export plants.  
Users define the plant’s appearance through a node system, and Plantarium generates a 3D model from it.

<Image src={plantarium_screenshot} alt="Plantarium Screenshot"/>

# The Beginnings and Challenges

The first prototype was ready within two weeks of intense work and looked something like this:

import ImageSlider from "@components/ImageSlider.svelte"
import Leaves from "./_components/Leaves.svelte"
import Image from "@components/Image.astro"
import page01_0 from "./images/page01-0.jpg"
import page01_1 from "./images/page01-1.jpg"
import page01_2 from "./images/page01-2.jpg"
import page01_3 from "./images/page01-3.jpg"
import page01_5 from "./images/page01-5.jpg"
import page01_6 from "./images/page01-6.jpg"
import screenshot_geometry_nodes  from "./images/screenshot-geometry-nodes.jpg"
import screenshot_houdini  from "./images/screenshot-houdini.jpg"
import screenshot_unreal  from "./images/screenshot-unreal.jpg"
import screenshot_davinci from "./images/screenshot-davinci.jpg"
import plantarium_screenshot from "./images/plantarium-screenshot.png"
import Plantarium from "./images/plantarium.png"
import ImageGallery from "@components/ImageGallery.svelte"

<ImageGallery client:load/>

<Leaves client:load/>

<ImageSlider title="First Prototype" client:load>
  <Image src={page01_0} alt="Stem Page"/>
  <Image src={page01_1} alt="Branches Page"/>
  <Image src={page01_2} alt="Leaves Page"/>
  <Image src={page01_3} alt="Import/Export Page"/>
  <Image src={page01_5} alt="Design of UI Components"/>
  <Image src={page01_6} alt="Data Flow inside App"/>
</ImageSlider>

Not bad, but as with prototypes, there was still a lot to improve.  
So here’s a brief history of the biggest changes so far:

# Refactors

## Svelte Rewrite

The first prototype was handwritten, untested JavaScript.  
That’s like trying to build a car out of toothpicks and duct tape.  
You might get it to work, and you might even be proud of your creation,  
but if you revisit it a week later—or worse, try to improve it—it quickly becomes a nightmare.  
So, it was time for every web developer’s favorite activity:  
figuring out what’s currently the hottest thing in web development.  
Once you pick one of the thousands of possible technologies,  
you make it your personal religion and defend it with fanatical devotion.  
Easy, right?

So, I went with the simplest, fastest, and overall best framework: ["Svelte"](https://svelte.dev).  

In essence, frameworks help turn an app’s data (e.g., usernames, login status) into HTML and CSS,  
which the browser then displays.

### Node Systems

The interface was divided into four different sections: "Stem," "Branches," "Leaves," and "Import/Export."  
The idea wasn’t bad since each part of the plant had its own view,  
making it easy to find the right settings when making changes.  

However, this structure severely limited users.  
You could only build plants following the Stem → Branch → Leaf model.  
But what if you wanted multiple layers of branches or different leaves for stems and branches?  
This model didn’t allow for that.  
So, as they say:  
"Back to the drawing board."

I already had a solution in mind,  
but I wasn’t sure if I had the skills to implement it.

The solution? **Node Systems!**  
Hmm, what’s that?

<div class="center my-4">
![Node Systems](./images/nodes.svg)
</div>

Node systems consist of nodes and connections.  
Nodes have inputs and outputs, which can be connected.

In the example graphic, we have two `input-color` nodes that each produce a color,  
and a `mix-color` node that blends them.

The cool thing is that this system is highly flexible.  
You can program nodes like `generate-stem`, `generate-branches`, or `add-leaves`.  

<ImageSlider title="Examples of Node Systems" client:load>
  <Image src={screenshot_geometry_nodes} alt="Blender uses nodes to create geometry"/>
  <Image src={screenshot_houdini} alt="Houdini uses nodes for VFX/simulations"/>
  <Image src={screenshot_unreal} alt="Unreal uses nodes for game logic"/>
  <Image src={screenshot_davinci} alt="DaVinci uses nodes for VFX"/>
</ImageSlider>

### Svelte-Kit Rewrite

# Architecture

After experimenting with different approaches, I settled on an event-based architecture.  
This fits well with node systems since individual components can communicate via events.

<div class="center my-4">
![Architecture](./images/architecture.svg)
</div>

# Design

# Future

# Conclusion

Currently, the architecture looks something like this:
