Eine Web-Uhr zum verträumten Blick ins All: „Orbit of Night“
(orbit.ggoban.com)Hallo!
Ich möchte heute ein Side-Project vorstellen, das ich seit heute Morgen zusammen mit AI per „Vibe Coding“ gebaut habe: die schöne Uhr mit Weltraum-Hintergrund „Orbit der Nacht (Orbit of Night)“.
Eigentlich war es nur eine einzelne Seite innerhalb einer Web-Funktion, an der ich gearbeitet habe. Aber ich dachte mir, es wäre irgendwie schade, sie einfach nur als Einzelseite stehen zu lassen, also habe ich begonnen, etwas Eigenständiges daraus zu machen. Ziel war ein Erlebnis, bei dem man beim Zuschauen kurz gedankenverloren abschalten möchte.
Wichtigste Merkmale
- Lebendiger Hintergrund: Sterne, Nebel und Sternschnuppen bewegen sich fortlaufend im Hintergrund
- ISS-Tracking in Echtzeit: eine stabile, sinusförmige Flugbahn auf dem Bildschirm, die auf realen ISS-Positionsdaten basiert und entsprechend korrigiert wird
- Interaktive Elemente: Planeten anklicken und virtuell scannen, dazu kleine spielerische Extras wie UFOs und Black-Hole-Effekte
- Benutzereinstellungen: Elemente wie Planeten, UFOs und ISS lassen sich je nach Geschmack ein- und ausschalten, außerdem gibt es 3 Themes
Umgesetzt wurde das ohne separates Framework nur mit reinem JavaScript und CSS-Animationen (auch wenn es die AI umgesetzt hat und mich beim Review wohl für ziemlich pingelig hielt). Vor allem die ISS-Flugbahn habe ich als Hybridansatz gebaut, der eine stabile Simulation mit Korrekturen anhand von Echtzeitdaten kombiniert.
TMI: Wie ein Typ in den Vierzigern mit AI zu entwickeln begann
Tatsächlich bin ich inzwischen ein Vater in den Vierzigern mit Sohn und Tochter.
Kurz zu mir: Ich gehöre zu einer Generation, die noch mit text- und MUD-basierten Spielen aufgewachsen ist, und ich bin auch ein Gamer mit viel Liebe für Webgames.
Ich habe zwar Informatik studiert und arbeite im IT-Bereich, war aber eher auf der Seite des Server Engineerings unterwegs. Dadurch habe ich mir als ganz normaler Angestellter auch Middleware, Backend und Frontend in gewissem Maß angeeignet.
Schon lange hatte ich aber den Traum, einmal ein Spiel zu machen. Nachdem ich erlebt habe, wie stark sich AI weiterentwickelt hat, dachte ich mir: „Jetzt ist die Zeit gekommen!“ Seit Oktober letzten Jahres nutze ich deshalb meine Freizeit vor allem für das, was man heute Vibe Coding mit AI nennt.
Aktuell arbeite ich an meinem dritten Webgame-Toy-Project. Dabei habe ich zwischendurch für eine Funktionsseite einen Bildschirm mit etwas mehr Liebe zum Detail gebaut, ganz spontan aus einer Eingebung heraus. Irgendwann kam mir dann der Gedanke, dass es zu schade wäre, ihn nur dort zu verwenden. So ist dieses Projekt entstanden.
Wie wäre es, wenn Sie einmal vorbeischauen und ein wenig den Blick ins All schweifen lassen?
Feedback ist jederzeit willkommen!
21 Kommentare
Das ist ein tolles Projekt.
Vielen Dank für Ihr Interesse!
Sieht toll aus!
Vielen Dank für Ihr warmes Interesse!
Als Browser-Hintergrundbild ist das richtig toll! Es fühlt sich ähnlich an, als hätte man den Weltraum als iPhone-Hintergrundbild eingestellt.
Vielen Dank für das herzliche Interesse! Ich werde es wohl auf einem älteren Tablet anzeigen, das ich zu Hause nicht mehr benutze, mit einem einfachen Rahmen versehen und als Uhr verwenden, haha!
Gefällt mir~
Wenn man die Planeten anhand dessen ebenfalls verbessert, wäre es noch besser.
https://codepen.io/jamesfinn180/pen/VwzENbR
Wow! Es gibt wirklich unglaublich viele beeindruckende Menschen auf der Welt. Vielen Dank für das Interesse. Da es sich um die Perspektive von der Erde aus handelt, wird die Erde selbst wohl nicht unverändert dargestellt, aber ich werde versuchen, das weiterzuentwickeln und ein Upgrade umzusetzen!
Es war wirklich heilsam und hat mich glücklich gemacht.
Vielen Dank, dass Sie so ein wunderbares Werk geschaffen haben. :)
Vielen Dank für die herzliche Antwort T_T Das gibt mir noch mehr Kraft.
Ich habe die von Ihnen genannten Anmerkungen berücksichtigt und entsprechend überarbeitet! 1. Planeten haben bei ihrer Erstellung festgelegte Informationen. 2. Die Option für Meteorschauer kann in den Einstellungen dem persönlichen Geschmack angepasst werden. (Auftretenshäufigkeit, Geschwindigkeit, Anzahl) 3. Der Nebel sowie – auch wenn es kaum auffällt – die Milchstraße und das Sternenlicht wurden angepasst. 4. Wenn die Black-Hole-Option deaktiviert ist, funktioniert sie jetzt nicht mehr. 5. Ich habe als Hommage einen Effekt hinzugefügt, der dem Warp aus St*r W*rs ähnelt. 6. Auf den Planeten tauchen gelegentlich ungewöhnliche Freunde auf. Vielen Dank an alle für das große Interesse!
Das ist zwar nur eine Kleinigkeit, aber selbst wenn man den Black-Hole-Effekt deaktiviert, bleibt er trotzdem aktiv. ^^ Ein tolles Projekt~!
Ja, danke^^ Wir planen, in Kürze eine verbesserte Version bereitzustellen, die diese Bugs und das Feedback anderer berücksichtigt. Vielen Dank für Ihr Interesse!
Das erinnert an das Design, das ich früher auf einer Pomodoro-Website gesehen habe. Wie wäre es, wenn verschiedene Planeten angezeigt würden?
Ach, wie erwartet: Es heißt ja, unter diesem Himmel gibt es nichts wirklich Neues ...! Ich dachte daran, nur einen Planeten zu zeigen und den Spaß dadurch zu erhöhen, dass darauf einzigartige Elemente erscheinen, aber ich werde auch testen, wie es wirkt, wenn mehrere Planeten auftauchen. Vielen Dank.
Ich hatte auch erwartet, dass es eher zum entspannten Vor-sich-hin-Starren gedacht ist und tatsächlich wie echte Langzeitbelichtungen aus dem All aussieht ... aber es war wohl ziemlich anders, als ich es mir vorgestellt hatte.
Vielen Dank für Ihre wertvolle Rückmeldung. Auch über diesen Punkt werden wir gemeinsam mit der KI nachdenken! Haha. Unser Konzept ist allerdings so angelegt, dass wir möglichst alles über CSS oder SVG umsetzen wollen, daher werde ich mir dazu passende Fotos ansehen und mich davon inspirieren lassen!
Es wäre schön, wenn ein etwas ruhigeres und realistischeres Weltall erscheinen würde~
Wir werden es so erweitern, dass man neben Farbthemen auch verschiedene Welten auswählen kann. Vielen Dank für Ihr wertvolles Feedback!
Vielen Dank, dass Sie ein so bedeutungsvolles Projekt vorgestellt haben. Es ist großartig und bewundernswert, dass Sie auch mit der Zeit Ihre Träume nicht verlieren und sich weiter Herausforderungen stellen. Ich glaube, Ihren Kindern wird es auch gefallen! Ein paar Rückmeldungen hätte ich dazu: 1) Der Meteorregen ist etwas zu schnell und zu häufig, sodass er zum verträumten Hinausschauen fast ein wenig zu aufregend wirkt. Wenn die Meteore etwas blasser, seltener und langsamer fallen würden, könnte das eine ruhigere und stimmungsvollere Atmosphäre schaffen. 2) Wie wäre es beim Planetenscan damit, für denselben Planeten immer dieselben Informationen anzuzeigen? 3) Bezieht sich der Black-Hole-Effekt in den Einstellungen auf den Klickeffekt? Selbst wenn man ihn auf Off stellt, wird dieser Effekt nicht deaktiviert. 4) Bei Random Color in den Einstellungen ist mir nicht ganz klar, welche Farbe sich dadurch ändert.
Vielen Dank für das Feedback. Bei den Sternschnuppen ziehe ich eine Option in Betracht, mit der sich die Häufigkeit per Slider anpassen lässt. Dass bei den Planeten bei jedem Klick unterschiedliche Informationen angezeigt werden, ist ebenfalls ein Punkt, den ich überarbeiten werde T_T. Seufz.
Random Colorist eine Option, bei der die Farbe des erscheinenden Planeten jedes Mal zufällig gewählt wird. Da sich die Planeten selbst nur langsam bewegen, können Sie zum Überprüfen die darüberliegende OptionPlanetaus- und wieder einschalten; dann sehen Sie, dass ein Planet in einer anderen Farbe erscheint haha. Beim Schwarzen Loch wollte ich ursprünglich einen Effekt einbauen, bei dem umliegende Sterne und Raumschiffe beim Klicken hineingezogen werden, aber das nur mit Browser und JavaScript umzusetzen, war nicht gerade einfach, deshalb habe ich nur das Gefühl umgesetzt, dass separate Partikel hineingezogen werden T_T. Dass es sich mitoffnicht ausschalten lässt, werde ich ebenfalls noch korrigieren. Vielen Dank für Ihre wertvollen Anregungen!