feat: some stuff

src/content/projects/karl/index.mdx

@@ -4,6 +4,7 @@ date: 2021-04-01
 cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
 comments: true
+featured: true
 links:
   [
     ["live", "https://max-richter.dev/karl"],
@@ -11,30 +12,34 @@ links:
   ]
 ---
 
+import Crosswalk from "./images/crosswalk.jpg"
+import CrosswalkMask from "./images/crosswalk_mask.png"
+import Image from "@components/Image.astro"
+import Distorion from "./images/Indicatrices_of_Distortion.png"
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
 *[Header by Justin Kunimune - Own work, CC BY-SA 4.0](https://commons.wikimedia.org/w/index.php?curid=66467577*)*
 
 
-{{<toc>}}
-
-```
-K.A.R.L ist eine WebApp die einem dabei hilft 360Grad Panoramas in Sektionen einzuteilen, (Himmel, Boden, Bäume usw...) und dann den Anteil der einzelnen Sektionen am Gesamtbild festzustellen.
-```
+> K.A.R.L ist eine WebApp die einem dabei hilft 360Grad Panoramas in Sektionen einzuteilen, (Himmel, Boden, Bäume usw...) und dann den Anteil der einzelnen Sektionen am Gesamtbild festzustellen.
 
 ## Einleitung
 
 Das Projekt ist aus der Zusammenarbeit mit zwei Freunden entstanden. Der eine steckt gerade mitten in der Konzeptionsphase seiner Bachelorarbeit (Geographie), die sich mit der Auswirkung von Vegetation auf das Stadtklima beschäftigt. Dazu hat er an verschiedenen Orten in Köln Albedo Messungen vorgenommen, also quasi "wieviel Licht kommt vom Himmel, und wieviel davon wird vom Boden reflektiert". Um diese Messungen in den richtigen Kontext zu setzen hat er von jedem Messort 360 Panoramas angelegt, diese sehen ungefähr so aus:
 
-{{<figure src="images/crosswalk.jpg" alt="Image of a crosswalk" caption="bild von hdrihaven.com">}}
+<Image src={Crosswalk} alt="Image of a crosswalk" caption="bild von hdrihaven.com" />
 
 Dazu brauchte er jetzt Angaben wieviel Prozent der Sicht zum Beispiel Vegetation, Himmel und Boden sind. Um das zu messen hat er in Gimp per Hand eine Segmentationsmap erstellt, eine Segmentationsmap sieht etwas so aus:
 
-{{<figure src="images/crosswalk_mask.png" alt="Segmentationsmap">}}
+<Image src={CrosswalkMask} alt="Segmentationsmap" />
 
 ## Problemstellung
 
 Wenn wir jetzt einfach naiv hingehen und die Pixel der einzelnen Farben zählen und daraus eine prozentuale Verteilung machen kriegen wir das klassische Problem mit der Verzerrung das die Menschheit schon seit Jahrhunderten mit Karten hat. Undzwar lassen sich Kugeln nur sehr ungern zwei dimensional darstellen, dabei kommt es immer zu Verzerrungen, wie folgendes Bild visualisiert.
 
-{{<figure src="images/Indicatrices_of_Distortion.png" alt="Image of a crosswalk" caption="by Justin Kunimune - Own work, CC BY-SA 4.0">}}
+<Image src={Distorion} alt="Indicatrices of Distortion" caption="by Justin Kunimune - Own work, CC BY-SA 4.0" />
 
 Zum Glück passiert diese Verzerrung nur in der Breite, wir brauchen also eine Formel die uns für die Höhe eines Pixels eine Gewichtung gibt um diese Verzerrung auszugleichen. Nach vielen Versuchen sind wir bei dieser Formel gelandet:
 
@@ -55,7 +60,7 @@ Diese Formel ist eigentlich dafür gedacht für einen bestimmten Breitengrad den
 
 Hier noch einiger der ersten Versuch in Desmos (fantastisches Tool btw):
 
-{{<iframe "https://www.desmos.com/calculator/52ph4thjah?embed" >}}
+<iframe src="https://www.desmos.com/calculator/52ph4thjah?embed"/>
 
 ## Die Technologien
 
@@ -96,7 +101,7 @@ Das Tool funktioniert ungefähr so:
 
 Ich fand es immer kompliziert State über mehrere Komponenten hinweg zu regeln. Ein Beispiel wäre der Editor, er besteht aus drei einzelnen Komponenten (Toolbar, Topbar, PaintArea) die alle wissen müssen welches Farbe und welches Werkzeug gerade aktiv sind. Man könnte diesen State in einen globalen Store schreiben und in jedem der einzelnen Komponenten darauf zugreifen, aber eigentlich ist das aktive Werkzeug nur in dem Editor Kontext wichtig. Also liegt dieser State jetzt in dem Editor Komponent der in per binding an seine Unterkomponenten weitergibt, das ganze sieht dan ungefähr so aus:
 
-```html
+```svelte
 <!-- Editor.svelte -->
 <script lang="ts">
   import TopBar from "./TopBar.svelte";
@@ -117,7 +122,6 @@ Ich fand es immer kompliziert State über mehrere Komponenten hinweg zu regeln.
 </script>
 
 {{activeColor}}
-
 ```