Tatsächlich muss ich Zugeben, dass es mir sogar eine Menge Spaß gemacht hat. Zum Designen ist Copilot wirklich zu gebrauchen. Ich es hat mir sogar so viel Spaß gemacht, dass ich bestimmt geschmacklich übers Ziel hinausgeschossen bin. Aber hey, es ist mein Blog.

Es ist schon beeindruckend, was sich AI an Styling und auch Animationen aus dem Handgelenk schüttelt. Das Verständnis von dem Effekt, den ich erzielen wollte konnte selbst aus meinen sehr vagen Beschreibungen herausgelesen werden. Zwar nicht immer, aber oft habe ich meine Ideen einfach überworfen und den Vorschlag übernommen oder durch weitere Prompts verfeinert. Erstaunen erzeugte mir später nur, wie viele Ressourcen die Animationen verbrauchten und genau hier beginnt dann doch die Arbeit eines Entwicklers. Selbst wenn auf den ersten Blick alles funktioniert und super aussieht, steckt der Teufel im Detail. Man bekommt halt was man beschreibt. 10% CPU Usage für den Hintergrund einer Webseite waren mir aber dann doch zu viel um es so stehen zu lassen. Also Hirn an. Der Hintergrund besteht aus mehreren Teilen. Partikeln, einem Nebel, Sternbildern und einem Planeten im Vordergrund. Ich habe alle Teile separat aus- und eingeschaltet um zu ermitteln, welcher Part wie viel Leistung verbraucht. Es stellte sich heraus, dass die Partikel der größte Ressourcenfresser waren. 1000 Partikel waren doch etwas viel. Edge/Chromium ist nicht gut darin, viele Elemente zu bewegen. Also habe ich die Anzahl der Partikel drastisch reduziert und sie in zwei Gruppen aufgeteilt. Jede Gruppe erscheint nur auf einer Seite des Bildschirms. In der Mitte des Bildschirms ist der Contentbereich und Effekte sind gegebenenfalls eh nicht sichtbar. Nebenbei habe ich den generierten Code für die Effekte neu strukturiert und in kleinere Funktionen aufgeteilt. Das hilft tatsächlich den Code zu verstehen und zu optimieren. Beim Nebel und den Sternbildern habe ich ebenfalls die Anzahl der Elemente reduziert und die Animationen vereinfacht. Die Ressourcenauslastung konnte ich so 1/4 senken.

Weil mir am Ende Performance doch wichtiger war als eine Spielerei mit der Optik habe ich mir Controls generieren lassen um die Animationen und die Komplexität des Weltraums zu steuern. Beim Aufrufen der Seite wird keine Animation ausgeführt. Aber bei jedem Aufruf ein neue Welt generiert und das ist auch schön. Die Animationen kann man als Spielerei aktivieren und so gedanklich durch den Weltraum reisen. Sehr schön.

Wen die Technik interessiert, kann sich den Code natürlich auf iBrotNano/ibrotnano.github.io: My blog. anschauen, kopieren oder kritisieren. Viel Spaß damit.