feat: some shit

This commit is contained in:
2024-04-03 14:27:48 +02:00
parent d4128840b9
commit 93baa3b6b0
67 changed files with 2513 additions and 703 deletions

View File

@ -5,7 +5,19 @@ headerImg: "images/Render.png"
comments: true
---
Die Inspiration diesen Render zu machen kam von einem Bild was 2013 auf dem Weg nach Italien entstanden ist.
<ImageGallery client:load/>
<Image
loading="eager"
src={ValleyView}
alt="ValleyView"
/>
import Image from "@components/Image.astro";
import ImageGallery from "@components/ImageGallery.svelte";
import ValleyView from "./images/Render.png";
import DSC_1601 from "./images/DSC_1601.jpg";
import Unbenannt1 from "./images/Unbenannt-1.jpg";
@ -13,15 +25,8 @@ import Render4 from "./images/Render4.png";
import UntitledPng from "./images/untitled1-1.png"
import Render6 from "./images/Render6.png";
<Image
src={ValleyView}
alt="ValleyView"
/>
Die Inspiration diesen Render zu machen kam von einem Bild was 2013 auf dem Weg nach Italien entstanden ist.
<Image
loading="eager"
src={DSC_1601}
alt="DSC_1601"
/>

View File

@ -1,9 +1,13 @@
---
title: "Random Renders NO°2"
date: 2023-05-11
headerImg: "images/render_05.png"
headerImg: "images/palma.png"
featured: true
comments: true
---
Last month I felt like creating some renderings again. I also found a few old renderings that haven't ended up on my blog yet.
import Image from "@components/Image.astro"
import Palma from "./images/palma.png"
import Render05 from "./images/render_05.png"
@ -13,7 +17,6 @@ import Cabin_new from "./images/Cabin_new.png";
import Home from "./images/Home.png";
import Workroom from "./images/Workroom.png";
Last month I felt like creating some renderings again. I also found a few old renderings that haven't ended up on my blog yet.
## Palma
<Image src={Palma} alt="Duude" />

View File

@ -1,38 +1,41 @@
---
title: "Random Renders NO°2"
date: 2023-05-11
headerImg: "images/render_05.png"
headerImg: "images/palma.png"
featured: true
comments: true
---
Im letzten Monat hatte ich wieder Lust, einige Renderings zu erstellen. Außerdem habe ich noch ein paar alte Renderings gefunden die noch nicht auf meinem Blog gelandet sind.
import ImageGallery from "@components/ImageGallery.svelte"
import Image from "@components/Image.astro"
import Palma from "./images/palma.png"
import Render05 from "./images/render_05.png"
import Poster_var2 from "./images/Poster_var2.jpg";
import Cabin_old from "./images/Cabin_old.jpg";
import Cabin_new from "./images/Cabin_new.png";
import Home from "./images/Home.png";
import Workroom from "./images/Workroom.png";
Im letzten Monat hatte ich wieder Lust, einige Renderings zu erstellen. Außerdem habe ich noch ein paar alte Renderings gefunden die noch nicht auf meinem Blog gelandet sind.
<ImageGallery client:load/>
## Palma
<Image
src={Palma}
alt="Duude"
/>
<Image src={Palma} alt="Duude" />
## [Sudoku.nvim](https://github.com/jim-fx/sudoku.nvim)
<Image
src={Render05}
alt="Duude"
/>
<Image src={Render05} alt="Duude" />
![](./images/Poster_var2.jpg)
<Image src={Poster_var2} alt="Poster_var2" />
## Super old renders:
![](./images/Cabin_old.jpg)
<Image src={Cabin_old} alt="Cabin_old" />
![](./images/Cabin_new.png)
<Image src={Cabin_new} alt="Cabin_new" />
![](./images/Home.png)
<Image src={Home} alt="Home" />
<Image src={Workroom} alt="Workroom" />
![](./images/Workroom.png)

View File

@ -1,11 +1,13 @@
---
title: "Wie ich mein Server-Setup komplett neu aufbaue."
title: "Mein neues Server-Setup"
date: 2020-06-09
comments: true
---
import Image from "@components/Image.astro"
import ServerSetup from "./images/new-server.svg"
Dieses Thema beschäftigt mich also schon seit längerem. Und in den letzten zwei Wochen ist es mir endlich klar geworden. Dieser Blogbeitrag ist nicht als Leitfaden gedacht, sondern als Möglichkeit für mein zukünftiges Ich, die Entscheidungsprozesse meines jetzigen Ichs zu verstehen.
> **Mein Plan ist es, die Leitfäden später als separate Beiträge zu veröffentlichen:**
@ -44,7 +46,7 @@ In meinem vorherigen Setup habe ich eine Mischung aus externen Diensten verwende
## My new Setup
<img src="./images/new-server.svg"/>
<Image src={ServerSetup} alt="Server Setup" />
Eine Frage, die man sich jetzt stellen könnte wäre: „Warum benutzt du Cloud und lokale Server?“ Beide haben einige Nachteile und einige Vorteile. Cloud-Server bieten schnelle Netzwerkgeschwindigkeiten und statische öffentliche IPs, aber die Speicherung großer Datenmengen ist recht teuer. Der Festplattenspeicher ist bei lokalen Servern vergleichsweise günstig. Ich habe etwa 60 € für meine 1-TB-Festplatte bezahlt, die speziell für NAS-Situationen entwickelt wurde, bei denen die Laufwerke rund um die Uhr laufen. Außerdem gefällt mir die Idee sehr gut, physischen Zugriff auf meine eigenen Daten zu haben und diese nicht einem Dritten anvertrauen zu müssen. Ein weiterer Vorteil des physischen Zugriffs auf meinen eigenen Server besteht darin, dass ich an Hardwareaspekten wie Netzwerk, Laufwerken und Kühlung herumbasteln und physische Messungen wie Raumtemperatur und Luftfeuchtigkeit vornehmen kann.

View File

@ -2,6 +2,7 @@
import { onMount } from "svelte";
import createFishes from "./fishes/webgl-fishes";
import { Color } from "ogl";
import { rgbToHex } from "@helpers/colors";
let canvasBottom: HTMLCanvasElement;
@ -26,20 +27,7 @@
fishCanvasBack.resize();
};
// function to turn css rgb() strings to hex
function rgbToHex(rgb: string) {
let hex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (!hex) return rgb;
return (
"#" +
hex
.slice(1)
.map((x) => {
return ("0" + parseInt(x).toString(16)).slice(-2);
})
.join("")
);
}
let loaded = false;
onMount(async () => {
const background = window.getComputedStyle(document.body);
@ -56,6 +44,7 @@
speed *= 0.99;
render && fishCanvasBack.update(t, timeOffset);
}
loaded = true;
});
</script>
@ -69,7 +58,7 @@
}}
/>
<canvas id="bottom" bind:this={canvasBottom} />
<canvas id="bottom" bind:this={canvasBottom} class:loaded />
<!-- <canvas id="top" bind:this={canvasTop} /> -->
<style>
@ -80,6 +69,11 @@
top: 0px;
left: 0px;
z-index: -1;
opacity: 0.5;
opacity: 0;
transition: opacity 0.5s;
}
canvas.loaded {
opacity: 0.2;
}
</style>

View File

@ -1,7 +1,6 @@
---
title: "Zentralwerk_2051"
date: 2021-01-07
_layout: "transparent"
links: [["PDF", "/Zentralwerk_2051.pdf"]]
license: "CC-BY-SA:4.0"
comments: true

View File

@ -5,8 +5,11 @@ const blogCollection = defineCollection({
title: z.string(),
date: z.date(),
headerImg: z.string().optional(),
description: z.string().optional(),
icon: z.string().optional(),
draft: z.boolean().optional(),
featured: z.boolean().optional(),
tags: z.array(z.string()).optional(),
_layout: z.enum(['normal', 'transparent']).optional(),
})
});

View File

@ -1,7 +1,7 @@
---
title: "Bilder Bigge Changes"
date: 2020-11-23
headerImg: "images/Image6.jpg"
headerImg: "images/6_1.jpg"
---
import Image from "@components/Image.astro"
@ -21,22 +21,13 @@ Der Sommer '18 war einer der trockensten der letzten Jahre _(irgendwie scheint d
Zurück zur Trockenheit, durch den fehlenden Regen ist der Zulauf der Bigge fast komplett versiegt; und so war der See bist fast auf den Grund ausgetrocknet. Das war ein seltsamer trauriger und schöner Anblick zugleich. Im Laufe der Zeit habe ich viele Bilder gemacht, viele auch bei einer Wanderung mit meinem Papa zusammen.
<Image src={Image6} alt=""/>
<Image src={Image7} alt=""/>
<Image src={Image11} alt=""/>
<Image src={Image14} alt=""/>
<Image src={Image20} alt=""/>
<Image src={Image27} alt=""/>
<Image src={Image35} alt=""/>
<Image src={Image39} alt=""/>
<Image src={MAX_0511} alt=""/>
<Image src={MAX_0513} alt=""/>

View File

@ -1,10 +1,23 @@
---
title: "Bilder Caen-OGrove"
date: 2017-04-07
headerImg: "images/Thumb.jpg"
headerImg: "images/HameuxDeLaMer_03.jpg"
---
import Image from "@components/Image.astro"
import Zumaia_01 from "./images/Zumaia_01.jpg";
import HameuxDeLaMer_04 from "./images/HameuxDeLaMer_04.jpg";
import Barqueiro_01 from "./images/Barqueiro_01.jpg";
import untitled_panorama1 from "./images/untitled_panorama1.jpg";
import untitled_panorama5 from "./images/untitled_panorama5.jpg";
import pointedupenhir_02 from "./images/pointedupenhir_02.jpg";
import Lannion_01 from "./images/Lannion_01.jpg";
import untitled_panorama2 from "./images/untitled_panorama2.jpg";
import HameuxDeLaMer_03 from "./images/HameuxDeLaMer_03.jpg";
import PointeDuPenhir_01 from "./images/PointeDuPenhir_01.jpg";
import RandomHotel from "./images/RandomHotel.jpg";
import SoulacSurMer01 from "./images/SoulacSurMer_01.jpg"
import UntitledChairs1 from "./images/Untitled_Chairs1.jpg"
import Untitled_Panorama10 from "./images/Untitled_Panorama10.jpg"
@ -25,18 +38,6 @@ Ich fand die Fassade amüsierend, da sie offensichtlich gedacht ist um dem Kohle
Zumaia in Spanien, die Felsformation heißt Flysch und angeblich können Geologen hier das Aussterben der durch einen Meteorit begründen, und die Erderwärmung in ganz großen Masstab verfolgen. Außerdem soll hier das Intro für die neue Staffel Game of Thrones gedreht worden sein.
import Zumaia_01 from "./images/Zumaia_01.jpg";
import HameuxDeLaMer_04 from "./images/HameuxDeLaMer_04.jpg";
import Barqueiro_01 from "./images/Barqueiro_01.jpg";
import untitled_panorama1 from "./images/untitled_panorama1.jpg";
import untitled_panorama5 from "./images/untitled_panorama5.jpg";
import pointedupenhir_02 from "./images/pointedupenhir_02.jpg";
import Lannion_01 from "./images/Lannion_01.jpg";
import untitled_panorama2 from "./images/untitled_panorama2.jpg";
import HameuxDeLaMer_03 from "./images/HameuxDeLaMer_03.jpg";
import PointeDuPenhir_01 from "./images/PointeDuPenhir_01.jpg";
import RandomHotel from "./images/RandomHotel.jpg";
<Image src={HameuxDeLaMer_04} alt=""/>
Eigentlich gehört das Foto eher in den letzten Blogbeitrag aber irgendwie habe ich es damals nicht dazugefügt. Die Nachbearbeitung ist sehr von dem MadMax Grading inspiriert. Der Ort ist Les Hameux de la Mer ein super schöner Ort.

View File

@ -1,85 +1,87 @@
---
title: "Erasmus Valencia"
date: 2022-09-02
headerImg: "images/MAX_8218 - MAX_8230.jpg"
---
import Image from "@components/Image.astro";
import Image from "@components/Image.astro"
import MAX_8126 from "./images/MAX_8126.jpg"
import MAX_8133 from "./images/MAX_8133.jpg"
import MAX_8154 from "./images/MAX_8154.jpg"
import MAX_8194 from "./images/MAX_8194.jpg"
import MAX_8416_NEF_shotwell from "./images/MAX_8416_NEF_shotwell.jpg"
import MAX_8197_NEF_shotwell from "./images/MAX_8197_NEF_shotwell.jpg"
import MAX_8212_NEF_shotwell from "./images/MAX_8212_NEF_shotwell.jpg"
import MAX_8404_NEF_shotwell from "./images/MAX_8404_NEF_shotwell.jpg"
import MAX_8249 from "./images/MAX_8249.jpg"
import MAX_8310_NEF_shotwell from "./images/MAX_8310_NEF_shotwell.jpg"
import MAX_8342 from "./images/MAX_8342.jpg"
import MAX_8360 from "./images/MAX_8360.jpg"
import MAX_8361 from "./images/MAX_8361.jpg"
import MAX_8366 from "./images/MAX_8366.jpg"
import MAX_8386 from "./images/MAX_8386.jpg"
import MAX_8396 from "./images/MAX_8396.jpg"
import MAX_8551_NEF_shotwell from "./images/MAX_8551_NEF_shotwell.jpg";
import MAX_8218_MAX_8230 from "./images/MAX_8218 - MAX_8230.jpg";
import MAX_8276 from "./images/MAX_8276.jpg";
import MAX_8426 from "./images/MAX_8426.jpg";
import MAX_8527 from "./images/MAX_8527.jpg";
import MAX_8547_NEF_shotwell from "./images/MAX_8547_NEF_shotwell.jpg";
import MAX_8561 from "./images/MAX_8561.jpg";
import MAX_8570 from "./images/MAX_8570.jpg";
import MAX_8582 from "./images/MAX_8582.jpg";
import MAX_8781 from "./images/MAX_8781.jpg";
import MAX_8791 from "./images/MAX_8791.jpg";
import MAX_8794 from "./images/MAX_8794.jpg";
import MAX_8887 from "./images/MAX_8887.jpg";
import Panorama_01 from "./images/Panorama_01.jpg";
import Panorama_02 from "./images/Panorama_02.jpg";
In 2022 I had the privilege of studying in Valencia for 5 months with the support of Erasmus, here are the pictures that were taken.
## Hiking in Chullila
import MAX_8126 from "./images/MAX_8126.jpg";
<Image src={ MAX_8126 } alt="Single tree on the side of a mountain, foggy light"/>
import MAX_8133 from "./images/MAX_8133.jpg";
<Image src={ MAX_8133 } alt="Side of a mountain with a single road, large lake in the distance"/>
import MAX_8154 from "./images/MAX_8154.jpg";
<Image src={ MAX_8154 } alt="Guy is standing on a street under a bridge that is very big"/>
<Image src={MAX_8126} alt="Single tree on the side of a mountain, foggy light"/>
<Image src={MAX_8133} alt="Side of a mountain with a single road, large lake in the distance"/>
<Image src={MAX_8154} alt="Guy is standing on a street under a bridge that is very big"/>
## Valencia Harbour
import MAX_8194 from "./images/MAX_8194.jpg";
<Image src={ MAX_8194 }/>
import MAX_8416_NEF_shotwell from "./images/MAX_8416_NEF_shotwell.jpg";
<Image src={ MAX_8416_NEF_shotwell }/>
<Image src={MAX_8194} alt=""/>
<Image src={MAX_8416_NEF_shotwell} alt=""/>
## Dogs
import MAX_8197_NEF_shotwell from "./images/MAX_8197_NEF_shotwell.jpg";
<Image src={ MAX_8197_NEF_shotwell }/>
import MAX_8212_NEF_shotwell from "./images/MAX_8212_NEF_shotwell.jpg";
<Image src={ MAX_8212_NEF_shotwell }/>
import MAX_8404_NEF_shotwell from "./images/MAX_8404_NEF_shotwell.jpg";
<Image src={ MAX_8404_NEF_shotwell }/>
<Image src={MAX_8197_NEF_shotwell} alt=""/>
<Image src={MAX_8212_NEF_shotwell} alt=""/>
<Image src={MAX_8404_NEF_shotwell} alt=""/>
## Botanical
import MAX_8249 from "./images/MAX_8249.jpg";
<Image src={ MAX_8249 }/>
import MAX_8310_NEF_shotwell from "./images/MAX_8310_NEF_shotwell.jpg";
<Image src={ MAX_8310_NEF_shotwell }/>
import MAX_8342 from "./images/MAX_8342.jpg";
<Image src={ MAX_8342 }/>
import MAX_8360 from "./images/MAX_8360.jpg";
<Image src={ MAX_8360 }/>
import MAX_8361 from "./images/MAX_8361.jpg";
<Image src={ MAX_8361 }/>
import MAX_8366 from "./images/MAX_8366.jpg";
<Image src={ MAX_8366 }/>
import MAX_8386 from "./images/MAX_8386.jpg";
<Image src={ MAX_8386 }/>
import MAX_8396 from "./images/MAX_8396.jpg";
<Image src=src={ MAX_8396 } caption="Hand made vase"/>
import MAX_8551_NEF_shotwell from "./images/MAX_8551_NEF_shotwell.jpg";
<Image src={ MAX_8551_NEF_shotwell }/>
<Image src={MAX_8249} alt=""/>
<Image src={MAX_8310_NEF_shotwell} alt=""/>
<Image src={MAX_8342} alt=""/>
<Image src={MAX_8360} alt=""/>
<Image src={MAX_8361} alt=""/>
<Image src={MAX_8366} alt=""/>
<Image src={MAX_8386} alt=""/>
<Image src={MAX_8396} alt="Hand made vase"/>
<Image src={MAX_8551_NEF_shotwell} alt=""/>
## Landscapes
<Image src={MAX_8218_MAX_8230} alt=""/>
<Image src={MAX_8276} alt=""/>
<Image src={MAX_8426} alt=""/>
<Image src={MAX_8527} alt=""/>
<Image src={MAX_8547_NEF_shotwell} alt=""/>
<Image src={MAX_8561} alt=""/>
<Image src={MAX_8570} alt=""/>
<Image src={MAX_8582} alt=""/>
<Image src={MAX_8781} alt=""/>
<Image src={MAX_8791} alt=""/>
<Image src={MAX_8794} alt=""/>
<Image src={MAX_8887} alt=""/>
<Image src={Panorama_01} alt=""/>
<Image src={Panorama_02} alt="Dude standing inside huge concrete room, moody lighting"/>
## landscapes
import MAX_8218_MAX_8230 from "./images/MAX_8218 - MAX_8230.jpg";
<Image src={ MAX_8218_MAX_8230 }/>
import MAX_8276 from "./images/MAX_8276.jpg";
<Image src={ MAX_8276 }/>
import MAX_8426 from "./images/MAX_8426.jpg";
<Image src={ MAX_8426 }/>
import MAX_8527 from "./images/MAX_8527.jpg";
<Image src={ MAX_8527 }/>
import MAX_8547_NEF_shotwell from "./images/MAX_8547_NEF_shotwell.jpg";
<Image src={ MAX_8547_NEF_shotwell }/>
import MAX_8561 from "./images/MAX_8561.jpg";
<Image src={ MAX_8561 }/>
import MAX_8570 from "./images/MAX_8570.jpg";
<Image src={ MAX_8570 }/>
import MAX_8582 from "./images/MAX_8582.jpg";
<Image src={ MAX_8582 }/>
import MAX_8781 from "./images/MAX_8781.jpg";
<Image src={ MAX_8781 }/>
import MAX_8791 from "./images/MAX_8791.jpg";
<Image src={ MAX_8791 }/>
import MAX_8794 from "./images/MAX_8794.jpg";
<Image src={ MAX_8794 }/>
import MAX_8887 from "./images/MAX_8887.jpg";
<Image src={ MAX_8887 }/>
import Panorama_01 from "./images/Panorama_01.jpg";
<Image src={ Panorama_01 }/>
import Panorama_02 from "./images/Panorama_02.jpg";
<Image src={ Panorama_02 } alt="Dude standing inside huge concrete room, moody lighting"/>

View File

@ -41,7 +41,6 @@ import Panorama_02 from "./images/Panorama_02.jpg";
## Wandern in Chullila
<Image src={MAX_8126} alt="Einzelner Baum auf der Seite eines Berges, nebliges Licht"/>
<Image src={MAX_8133} alt="Seite eines Berges mit einer einzelnen Straße, großer See in der Ferne"/>
<Image src={MAX_8154} alt="Typ steht auf einer Straße unter einer Brücke die sehr groß ist"/>
@ -70,19 +69,18 @@ import Panorama_02 from "./images/Panorama_02.jpg";
<Image src={MAX_8551_NEF_shotwell} alt=""/>
## Landschaften
<Image src={MAX_8218_MAX_8230} alt=""/>
<Image src={MAX_8276} alt=""/>
<Image src={MAX_8426} alt=""/>
<Image src={MAX_8527} alt=""/>
<Image src={MAX_8547_NEF_shotwell} alt=""/>
<Image src={ MAX_8561 } alt=""/>
<Image src={ MAX_8570 } alt=""/>
<Image src={ MAX_8582 } alt=""/>
<Image src={ MAX_8781 } alt=""/>
<Image src={ MAX_8791 } alt=""/>
<Image src={ MAX_8794 } alt=""/>
<Image src={ MAX_8887 } alt=""/>
<Image src={ Panorama_01 } alt=""/>
<Image src={ Panorama_02 } alt="Dude standing inside huge concrete room, moody lighting"/>
<Image src={ MAX_8561} alt=""/>
<Image src={ MAX_8570} alt=""/>
<Image src={ MAX_8582} alt=""/>
<Image src={ MAX_8781} alt=""/>
<Image src={ MAX_8791} alt=""/>
<Image src={ MAX_8794} alt=""/>
<Image src={ MAX_8887} alt=""/>
<Image src={ Panorama_01} alt=""/>
<Image src={ Panorama_02} alt="Dude standing inside huge concrete room, moody lighting"/>

View File

@ -7,10 +7,7 @@ headerImg: "images/PointDeLIsle.jpg"
import Image from "@components/Image.astro";
import PointDeLIsle from "./images/PointDeLIsle.jpg";
import svelte from "./images/svelte.jpg";
<Image src={PointDeLIsle} alt=""/>
This is currently my absolute favourite picture. The weather was especially interesting this morning, fast clouds sometimes the sunlight breaking through forming spots of light running across the ocean. In stark contrast to the last days, which where just sunshine a pleasant change. I find it very hard to capture such a dramatic lighting in a way that doesnt make it look dull and lose all its depth. So i tried to edit this picture just in B/W, my poor laptop really had to work hard because the picture is with 18000x8000 Pixel the largest one i took. But i am very happy with the result.
<Image src={svelte} alt=""/>

View File

@ -4,13 +4,14 @@ date: 2017-03-29
headerImg: "images/PointDeLIsle.jpg"
---
import ImageGallery from "@components/ImageGallery.svelte";
import Image from "@components/Image.astro";
import PointDeLIsle from "./images/PointDeLIsle.jpg";
import svelte from "./images/svelte.jpg";
<ImageGallery client:load/>
<Image src={PointDeLIsle} alt=""/>
Das ist bis jetzt mein absolutes Lieblingsbild. Besonders an diesem morgen war dass Wetter, besonders spannend, rasend schnelle Wolken die von der Sonne durchbrochen wurden. Im Gegensatz zu den letzten Tagen voller Sonnenschein eine wilkommende Abwechslung.  Ich finde es immer schwer eine dramatische Lichtstimmung so einzufangen dass sie nicht ihren Reitz verliert und "flach" wirkt. Also habe ich diesmal dass Foto einfach in schwarz weiß bearbeitet, mein Laptop musste ganz schön ächzen das Foto ist mit 18000x8000 Pixel bis jetzt mein größtes Panorama, aber mit dem Endergebnis bin ich mehr als froh.
<Image src={svelte} alt=""/>

View File

@ -5,42 +5,44 @@ headerImg: "images/Unbenanntes_Panorama-3.jpg"
---
import Image from "@components/Image.astro";
import ImageGallery from "@components/ImageGallery.svelte";
import MAX_6400 from "./images/MAX_6400.jpg";
<Image src={MAX_6400} alt="">
import MAX_6406 from "./images/MAX_6406.jpg";
<Image src={ MAX_6406 }>
import MAX_6529 from "./images/MAX_6529.jpg";
import MAX_6530 from "./images/MAX_6530.jpg";
import MAX_6536 from "./images/MAX_6536.jpg";
import MAX_6538 from "./images/MAX_6538.jpg";
import MAX_6550 from "./images/MAX_6550.jpg";
import MAX_6552 from "./images/MAX_6552.jpg";
import MAX_6553 from "./images/MAX_6553.jpg";
import MAX_6554 from "./images/MAX_6554.jpg";
import MAX_6556 from "./images/MAX_6556.jpg";
import MAX_6571 from "./images/MAX_6571.jpg";
import Unbenanntes_Panorama_1 from "./images/Unbenanntes_Panorama-1.jpg";
import Unbenanntes_Panorama_2 from "./images/Unbenanntes_Panorama-2.jpg";
import Unbenanntes_Panorama_3 from "./images/Unbenanntes_Panorama-3.jpg";
import Unbenanntes_Panorama_6 from "./images/Unbenanntes_Panorama-6.jpg";
<ImageGallery client:load/>
<Image src={MAX_6400} alt="A parked motorcycle by a blue and white building on a cobblestone street in a misty and overcast setting."/>
<Image src={ MAX_6406 } alt="Rusty industrial silo with pipe against a cloudy sky."/>
## Plants
import MAX_6529 from "./images/MAX_6529.jpg";
<Image src={ MAX_6529 }>
import MAX_6530 from "./images/MAX_6530.jpg";
<Image src={ MAX_6530 }>
import MAX_6536 from "./images/MAX_6536.jpg";
<Image src={ MAX_6536 }>
import MAX_6538 from "./images/MAX_6538.jpg";
<Image src={ MAX_6538 }>
import MAX_6550 from "./images/MAX_6550.jpg";
<Image src={ MAX_6550 }>
import MAX_6552 from "./images/MAX_6552.jpg";
<Image src={ MAX_6552 }>
import MAX_6553 from "./images/MAX_6553.jpg";
<Image src={ MAX_6553 }>
import MAX_6554 from "./images/MAX_6554.jpg";
<Image src={ MAX_6554 }>
import MAX_6556 from "./images/MAX_6556.jpg";
<Image src={ MAX_6556 }>
<Image src={ MAX_6529 } alt="a small bushy plant on Sand"/>
<Image src={ MAX_6530 } alt="verdant shrubbery overlooking a sandy terrain."/>
<Image src={ MAX_6536 } alt="close-up of white shrubbery in natural light."/>
<Image src={ MAX_6538 } alt="a close up of plants"/>
<Image src={ MAX_6550 } alt="a close up of a plant"/>
<Image src={ MAX_6552 } alt="a green plant growing in the sand"/>
<Image src={ MAX_6553 } alt="a small green plant growing out of sand"/>
<Image src={ MAX_6554 } alt="a small bush in the sand"/>
<Image src={ MAX_6556 } alt="a small plant growing out of the sand"/>
## Panoramas
import MAX_6571 from "./images/MAX_6571.jpg";
<Image src={ MAX_6571 }>
import Unbenanntes_Panorama_1 from "./images/Unbenanntes_Panorama-1.jpg";
<Image src={ Unbenanntes_Panorama_1 }>
import Unbenanntes_Panorama_3 from "./images/Unbenanntes_Panorama-3.jpg";
<Image src={ Unbenanntes_Panorama_3 }>
import Unbenanntes_Panorama_6 from "./images/Unbenanntes_Panorama-6.jpg";
<Image src={ Unbenanntes_Panorama_6 }>
<Image src={ MAX_6571 } alt="a sandy beach with water in the background"/>
<Image src={ Unbenanntes_Panorama_1 } alt="a tree on a hill"/>
<Image src={ Unbenanntes_Panorama_2 } alt="a path through a grassy area with trees and a few white pillars"/>
<Image src={ Unbenanntes_Panorama_3 } alt="a beach with houses and a body of water"/>
<Image src={ Unbenanntes_Panorama_6 } alt="a rocky beach with water and cliffs"/>

View File

@ -1,7 +1,10 @@
---
title: "Argenti"
date: 2023-08-21
icon: "/projects/argenti.png"
draft: true
description: "A central database for things I enjoy stored in Markdown/Redis"
tags: ["deno", "fresh", "redis"]
links:
[
["live", "https://invoice.app.max-richter.dev"],

View File

@ -2,6 +2,8 @@
title: "Invoice"
date: 2023-08-21
headerImg: "bg.jpg"
icon: "/projects/invoice.svg"
tags: ["sveltekit", "unocss", "prisma", "sqlite"]
draft: true
links:
[

View File

@ -0,0 +1,10 @@
---
date: 2019-06-10
title: "Isyncrasy"
draft: false
icon: "/projects/isyncrasy/favicon.ico"
description: "A small fun virtual OS build with svelte"
tags: ["svelte", "web", "os"]
---
# Isyncrasy

View File

@ -0,0 +1,23 @@
precision highp float;
precision highp int;
uniform vec3 uBackground;
varying vec3 vNormal;
varying vec2 vUv;
varying float fog;
void main(){
vec3 normal=normalize(vNormal);
float lighting=dot(normal,normalize(vec3(-.3,.8,.6)));
vec3 col = (vec3(.308*vUv.x,.712,.5)+lighting*.5)-.25;
/* gl_FragColor.rgb=vec3(vUv.x,vUv.y,vNormal.x); */
gl_FragColor.rgb=mix(col, uBackground,fog);
gl_FragColor.a=1.;
}

View File

@ -0,0 +1,49 @@
attribute vec2 uv;
attribute vec3 position;
// Add instanced attributes just like any attribute
attribute vec3 offset;
attribute vec3 random;
attribute vec3 normal;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 normalMatrix;
uniform float uTime;
uniform float uRot;
varying vec2 vUv;
varying vec3 vNormal;
varying float fog;
void rotate2d(inout vec2 v, float a){
mat2 m = mat2(cos(a), -sin(a), sin(a), cos(a));
v = m * v;
}
void main() {
vUv = uv;
vNormal = normal;
/* vNormal = normalize(normalMatrix * normal); */
// copy position so that we can modify the instances
vec3 pos = position;
// scale first
fog = (offset.z+1.0)/2.0;
pos *= 0.4 + (1.0-fog) * 0.6;
// rotate around y axis
rotate2d(pos.xz, random.x * 6.28 + 1.0 * uTime * (random.y - 0.5));
rotate2d(pos.xy, random.y * 6.28 + 1.0 * uTime * (random.y - 0.5));
// rotate around x axis just to add some extra variation
rotate2d(pos.zy, random.z * 0.5 * sin(uTime * random.x + random.z * 3.14));
pos.y += sin(uRot/500.0+random.y*50.0)/5.0+(1.0-fog)*uRot;
pos += offset;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

View File

@ -0,0 +1,44 @@
<script lang="ts">
import { onMount } from "svelte";
import { createLeaves, setRotation } from "./leaves";
let canvas: HTMLCanvasElement;
let loaded = false;
function handleScroll() {
setRotation(window.scrollY / window.innerHeight);
}
onMount(() => {
createLeaves({ canvas, num: 20, minZ: 0, maxZ: 1 });
setTimeout(() => {
loaded = true;
}, 100);
});
</script>
<svelte:window on:scroll={handleScroll} />
<canvas bind:this={canvas} class:loaded />
<style>
:global(body) {
z-index: 1;
}
canvas {
width: 100vw !important;
height: 100vh !important;
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 2s;
}
.loaded {
opacity: 0.2;
}
</style>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,88 @@
import { Camera, Color, Geometry, GLTFLoader, Mesh, Program, Renderer, Transform } from 'ogl';
import { rand, randMinMax } from "./random";
import fragment from "./Leaf.frag";
import vertex from "./Leaf.vert";
import { rgbToHex } from '@helpers/colors';
let rotation = 0;
export function setRotation(r: number) {
rotation = r;
}
export function createLeaves({ canvas, num = 20, alpha = false, minZ = -1, maxZ = 1 }: { canvas: HTMLCanvasElement, num?: number, alpha?: boolean, minZ?: number, maxZ?: number }) {
const renderer = new Renderer({ dpr: 1, canvas, alpha: true });
const gl = renderer.gl;
const background = window.getComputedStyle(document.body);
const d = new Color(rgbToHex(background.backgroundColor));
const camera = new Camera(gl, { fov: 15 });
camera.position.z = 5;
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
}
window.addEventListener('resize', resize, false);
resize();
const scene = new Transform();
const program = new Program(gl, {
vertex,
fragment,
cullFace: gl.NONE,
depthTest: true,
uniforms: {
uTime: { value: 0 },
uRot: { value: 0 },
uBackground: { value: d },
},
});
let mesh: Mesh;
loadModel();
async function loadModel() {
const model = await GLTFLoader.load(gl, "/models/leaf.glb");
const data = model.nodes[0].children[0].geometry.attributes;
let offset = new Float32Array(num * 3);
let random = new Float32Array(num * 3);
for (let i = 0; i < num; i++) {
offset.set([rand(8), rand(4), randMinMax(minZ, maxZ)], i * 3);
// unique random values are always handy for instances.
// Here they will be used for rotation, scale and movement.
random.set([Math.random(), Math.random(), Math.random()], i * 3);
}
const geometry = new Geometry(gl, {
...data,
// simply add the 'instanced' property to flag as an instanced attribute.
// set the value as the divisor number
offset: { instanced: 1, size: 3, data: offset },
random: { instanced: 1, size: 3, data: random },
});
mesh = new Mesh(gl, { geometry, program });
mesh.scale.set(0.2, 0.2, 0.2)
mesh.setParent(scene);
}
requestAnimationFrame(update);
function update(t: number) {
requestAnimationFrame(update);
program.uniforms.uTime.value = t * 0.001;
program.uniforms.uRot.value = rotation;
renderer.render({ scene, camera });
}
}

View File

@ -0,0 +1,3 @@
export const rand = (r = 1) => (Math.random() * 2 - 1) * r;
export const randMinMax = (min = 0, max = 1) => min + Math.random() * (max - min)

BIN
src/content/projects/plantarium/images/plantarium.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -1,7 +1,7 @@
---
title: "Plantarium"
date: 2022-08-31
headerImg: "/projects/plantarium/plantarium.png"
headerImg: "images/plantarium.png"
featured: true
links: [["website", "https://plant.max-richter.com"], ["git", "https://github.com/jim-fx/plantarium"]]
draft: true

View File

@ -1,7 +1,7 @@
---
title: "Plantarium"
date: 2022-08-31T20:46:26+02:00
headerImg: "/projects/plantarium/plantarium.png"
headerImg: "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"]
@ -14,14 +14,31 @@ Plantarium ist wohl das Hobby Projekt, mit dem ich am meisten Zeit verbracht hab
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:
<svelte component="image-slider" title="Prototype Design">
<img src="./images/page01-0.jpg" alt="Stem Page"/>
<img src="./images/page01-1.jpg" alt="Branches page"/>
<img src="./images/page01-2.jpg" alt="Leaves page"/>
<img src="./images/page01-3.jpg" alt="Import/Export page"/>
<img src="./images/page01-5.jpg" alt="Design of UI Components"/>
<img src="./images/page01-6.jpg" alt="Data flow inside app"/>
</svelte>
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"
<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:
@ -56,13 +73,13 @@ In der Beispielgrafik haben wir zwei `input-color` nodes die jeweils eine Farbe
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"/>
<svelte component="image-slider" title="Beispiele von Node Systemen">
<img src="images/screenshot-geometry-nodes.jpg" alt="Blenders uses nodes to create geometry"/>
<img src="images/screenshot-houdini.jpg" alt="Houdini uses nodes for vfx/simulations"/>
<img src="images/screenshot-unreal.jpg" alt="Unreal uses nodes for game logic"/>
<img src="images/screenshot-davinci.jpg" alt="Davinvi uses nodes for vfx"/>
</svelte>
<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