---
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-Systeme"]
draft: true
---

# Einführung

Plantarium ist wohl das Hobby Projekt, mit dem ich am meisten Zeit verbracht habe. Als Waldorfschüler und Dorfkind ein bisschen Klischeemäßig, ich weiß, aber der Aufbau und die Ästhetik von Pflanzen haben mich schon immer begeistert. Außerdem bin ich bekennender [Blender](https://blender.org) (das 3D Programm) Fan und aus diesen beiden Interessen entstand dieses Projekt.

Plantarium ist eine WebApp mit der Nutzer 3D Model von Pflanzen generieren können. Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:

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 ImageGallery from "@components/ImageGallery.svelte"

<ImageGallery client:load/>

<Leaves client:load/>

<ImageSlider title="Erster Prototyp" 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>


Schon gar nicht schlecht, aber wie das mit Prototypen so ist gab es noch einiges zu verbessern. Also eine Kurze Historie der größten Änderungen bis heute:

## Refactors

### Svelte Rewrite

Der erste Prototyp war handgeschriebenes ungetestes Javascript. Das kann man sich etwa so vorstellen als ob man ein Auto nur aus Zahnstochern und Ducttape bauen muss.
Man kriegt es eventuell hin, ist vielleicht sogar ganz begeistert von seiner Kreation, wenn man sich das ganze aber dann ne Woche später nochmal anschaut oder schlimmer noch Verbesserungen daran machen will wird es recht schnell schwierig. Das hieß es war Zeit für die Lieblingsbeschäftigung eines jeden Web Entwicklers; herausfinden was gerade der heiße Scheiß in der Welt der Webentwicklung ist. Sobald man sich dann für eine der tausenden möglichen Technologien entschieden hat, macht man diese zu seiner persönlichen Religion und verteidigt sie mit religiösem Fanatismus. Ganz einfach, oder?

Also hab ich mich für das einfachste, schnellste und rundherum beste Framework entschieden: ["Svelte"](https://svelte.dev).

Im Grunde helfen einem Frameworks die Daten einer App, also zum Beispiel Nutzernamen, Loginstatus usw. in HTML und CSS zu verwandeln, was der Browser dann anzeigt.


### Node-Systeme

Das Interface war in 4 verschiedene Stufen aufgeteilt, "Stamm", "Äste","Blätter" und "Import/Export". 
Die Idee war gar nicht schlecht da jeder Teil an der Pflanze eine eigene Ansicht hatte und man recht schnell die richtigen Einstellungen fand, wenn man etwas ändern wollte. 
Leider werden dadurch die Nutzer extrem eingeschränkt und man kann nur Pflanzen bauen die dem Schema Stam->Ast->Blatt entsprechen. Was ist aber wenn ich mehrere Ebenen von Ästen haben will oder unterschiedliche Blätter an Stamm und Ast? Das war mit dem Model nicht möglich also wie man so schön sagt:
"Back to the drawing board."
Im Hinterkopf hatte ich eigentlich schon die Lösung für das Problem, war mir nur nicht ganz sicher, ob ich die nötigen Skills hatte um es zu implementieren.

Die Lösung sind Node-Systeme! Hmm, was ist das denn?

![Node-Systeme](./images/nodes.svg)

Node-Systeme bestehen aus Nodes und Connections. Nodes haben inputs und outputs und man kann diese miteinander verbinden.

In der Beispielgrafik haben wir zwei `input-color` nodes die jeweils eine Farbe produzieren und eine `mix-color` node die farben miteinander vermixt.

Das coole ist das man dieses System sehr generisch gestalten kann und zum beispiel eine `generate-stem`, `generate-branches` oder eine `add-leaves` node programmieren kann. Aufgrund der 

<img src="/projects/plantarium/screenshot-plantarium.png" alt="Plantariums uses nodes to create plants"/>
  
<ImageSlider title="Beispiele von Node Systemen" client:load>
  <Image src={screenshot_geometry_nodes} alt="Blenders 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="Davinvi uses nodes for vfx"/>
</ImageSlider>

### Svelte-Kit Rewrite

## Architektur

## Design

## Zukunft

## Abschluss

Aktuell sieht die Architectur in etwa so aus:

![Architecture](./images/architecture.svg)

