16x16-Punktanimation mit einfachen mathematischen Regeln erstellt

• Eine 16x16-Punktanimation wird durch einfache mathematische Regeln erzeugt
• Die Bewegung jedes Punkts basiert auf mathematischen Formeln und Operationen
• Mit minimalen Algorithmen und einfacher Logik lassen sich komplexe und faszinierende Muster erzeugen
• Auch ohne komplexe Rendering-Techniken sind visuell eindrucksvolle Ergebnisse möglich
• Dieser Ansatz hat großes Potenzial für kreative Visualisierung und Programmierunterricht

---

Überblick

• Diese Animation basiert auf einer Anordnung von 16x16 Punkten
• Position, Farbe oder Zustand jedes Punkts verändern sich fortlaufend nach einfachen mathematischen Regeln
• Diese Umsetzungsweise ist sowohl programmiertechnisch effizient als auch sehr intuitiv
• Auch ohne komplexe oder fortgeschrittene Techniken lassen sich attraktive und regelmäßige visuelle Effekte erzeugen
• Besonders geeignet ist sie für Visual Art, algorithmisches Gestalten und die Ausbildung von Einsteiger-Entwicklern

Wichtige Inhalte

• Die Animation erscheint als zweidimensionales 16x16-Raster
• Die Veränderung jedes Punkts beruht auf mathematischen Formeln oder bestimmten Regeln
• So können etwa grundlegende mathematische Operationen wie sin, cos, xor oder mod genutzt werden, um Bewegung und Farbe der Punkte zu bestimmen
• Für ausgefeilte visuelle Effekte sind weder komplexer Code noch externe Bibliotheken erforderlich
• Schon das wiederholte Anwenden einfacher Formeln ermöglicht die Erzeugung origineller Muster

Bedeutung und Einsatzmöglichkeiten

• Dieser Ansatz hat die Stärke, selbst mit minimalem Code eindrucksvolle Ergebnisse zu liefern
• Er ist nützlich, um algorithmisches Denken, mathematische Intuition und visuelle Kreativität zu trainieren
• Er ist ein gutes Beispiel dafür, wie Animation und Visualisierung programmatisch funktionieren
• Er lässt sich leicht für Lernzwecke, künstlerische Experimente oder kreative Projekte einsetzen
• Für Einsteiger-Entwickler und Kreative aller Altersgruppen ist er leicht zugänglich und vielseitig nutzbar

[xcutz]

Beeindruckend.

[ng0301]

Wow ...

[GN⁺]

Hacker-News-Kommentare

• Tixy ist wirklich erstaunlich, ich habe selbst etwas Ähnliches gebaut: https://muffinman.io/pulsar/ – ich wollte Animationen für LED-Matrix-Displays erstellen. Damals kannte ich tixy noch nicht und habe deshalb pulsar gebaut; erst später habe ich tixy wiederentdeckt. Ein ähnliches Projekt mit HTML-Slidern ist auch https://sliderland.blinry.org/. So etwas macht einfach Spaß.
• Als ich tixy vor ein paar Jahren zum ersten Mal entdeckt habe, war ich so begeistert, dass ich mit Erlaubnis des ursprünglichen Autors die Seite https://www.mathsuniverse.com/tixy erstellt habe. Ich habe dem tixy-Raster Rätsel hinzugefügt und nutze es im Informatikunterricht für Schüler. Die Schüler vertiefen sich stark in diese Rätsel.
  • Das erinnert mich an das kürzlich veröffentlichte 3D-Puzzle-Spiel Replicube, das dasselbe Prinzip in 3D umsetzt.
  • Diese Art ist wirklich eine großartige Methode für die Bildung. Ich war anfangs ebenfalls von diesen kleinen Funktionen fasziniert und habe zum Experimentieren einen Klon mit calculang gebaut. Ich habe eine F9-Auswertungsfunktion hinzugefügt, mit der man Teilausdrücke auswählen und die Ergebnisse sehen kann, was beim Verständnis von Mustern sehr geholfen hat. Dazu gibt es auch ein Video: https://www.youtube.com/watch?v=uXUd_-xrycs
  • Es funktioniert auch auf dem Handy gut, nur die Handy-Tastatur ist etwas unbequem, aber die Nutzung ist trotzdem kein Problem. Das ist eine Grenze des Telefons.
  • In der Computergrafik beginnt die Koordinate (0,0) oben links und nicht unten.
• Ich habe mit tixy verschiedene Animationen gemacht, das hier macht richtig Spaß: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , und ich habe auch ein Muster umgesetzt, bei dem weiße Blutkörperchen angreifen: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• Ich habe auch einen Feuerwerk-Effekt gemacht: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy ist eine sehr einfache Version einer Seite wie Shadertoy, und genau dieser einfache Ansatz passt perfekt zu meinem Geschmack.
• Der Autor von tixy ist Martin Kleppe (@aemkei), bekannt für Quines und JS-Tricks. Seine anderen großartigen Projekte sind ebenfalls sehenswert: https://aem1k.com/world/ , https://aem1k.com/qlock/
• Inspiriert von tixy habe ich eine Zeichen-App mit programmierbaren Pinseln erstellt: https://fig.sonnet.io. An dieser App ist spannend, dass sich die Pinselbewegung nicht nach Druck oder Winkel verändert, sondern nach der Zeit, sodass man im Rhythmus zeichnen muss. Wie das funktioniert und wie es umgesetzt wurde, kann man hier sehen: https://untested.sonnet.io/notes/fig-tree-brushes/
• Ich teile auch ein Beispiel für eine ungewöhnliche Funktion: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• Ich habe auch ein Pentagramm-Muster gemacht: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • Ich habe auch die Bewegung von zwei Schlangen umgesetzt: https://tixy.land/?code=exp%28-%28%28x-7%29**2%29%2F12%29sin%28%28y-7%29%2F2-t%29%09-sin%28%28h%3Dhypot%28x-%3D7%2Cy-%3D7%29-5%29%29exp%28-hh%2F9%29cos%28atan2%28y%2Cx%29%2Bt%29
• Man kann mit tixy einen sich ständig bewegenden und immer größer werdenden Kreis machen: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t