Animation en pixels 16x16 créée avec de simples règles mathématiques

• Une animation en pixels 16x16 est générée à l’aide de règles mathématiques simples
• Le mouvement de chaque pixel repose sur des formules et opérations mathématiques
• Avec un algorithme minimal et une logique simple, il est possible de créer des motifs complexes et captivants
• Il est possible d’obtenir un résultat visuellement impressionnant sans techniques de rendu complexes
• Cette approche présente un fort potentiel pour la visualisation créative et l’enseignement de la programmation

---

Vue d’ensemble

• Cette animation est réalisée à partir d’une grille de pixels de taille 16x16
• La position, la couleur ou l’état de chaque pixel évoluent en permanence selon des règles mathématiques simples
• Cette méthode d’implémentation est à la fois efficace sur le plan programmatique et très intuitive
• Même sans techniques avancées ou complexes, elle permet de produire des effets visuels attrayants et réguliers
• Elle offre un fort potentiel d’application dans l’art visuel, la création algorithmique, la formation des développeurs débutants, etc.

Points clés

• L’animation se présente sous la forme d’une grille bidimensionnelle 16x16
• Les variations de chaque pixel reposent sur des formules mathématiques ou des règles spécifiques
• Par exemple, des opérations mathématiques de base comme sin, cos, xor ou mod servent à déterminer le mouvement et la couleur des pixels
• Il n’est pas nécessaire d’utiliser du code complexe ni des bibliothèques externes pour produire des effets visuels élaborés
• La simple application répétée de formules suffit à générer des motifs originaux

Intérêt et cas d’usage

• Cette approche a l’avantage de produire des résultats impressionnants avec un code minimal
• Elle est utile pour exercer la pensée algorithmique, l’intuition mathématique et la créativité visuelle
• C’est un bon exemple pour comprendre comment l’animation et la visualisation fonctionnent de manière programmatique
• Elle peut être facilement adoptée à des fins éducatives, expérimentales ou pour des projets créatifs
• Elle est accessible et facile à exploiter pour les développeurs débutants et les créateurs de tous âges

[xcutz]

C'est fascinant.

[ng0301]

Waouh...

[GN⁺]

Commentaires sur Hacker News

• Tixy est vraiment étonnant, j’ai même créé quelque chose de similaire moi-même : je voulais faire des animations pour un écran à matrice LED avec un site appelé https://muffinman.io/pulsar/, je n’avais pas trouvé tixy à l’époque et j’ai donc créé pulsar, puis ce n’est que plus tard que j’ai redécouvert tixy ; il y a aussi un projet similaire utilisant des sliders HTML : https://sliderland.blinry.org/, ce genre de chose est vraiment amusant
• Quand j’ai découvert tixy pour la première fois il y a quelques années, j’ai tellement adoré que j’ai créé le site https://www.mathsuniverse.com/tixy avec l’autorisation de l’auteur original, en ajoutant des puzzles à la grille tixy pour l’utiliser avec mes élèves en cours d’informatique, et ils deviennent complètement accros à ces puzzles
  • Ça me fait penser au jeu de puzzle 3D Replicube, sorti récemment, qui applique le même principe en 3D
  • C’est vraiment une méthode géniale pour l’enseignement ; moi aussi, au début, j’étais fasciné par ces petites fonctions, au point d’en faire un clone expérimental avec calculang, en y ajoutant une fonction d’évaluation avec F9 pour sélectionner des sous-expressions et voir leur résultat, ce qui aide énormément à comprendre les motifs ; on peut aussi voir la vidéo : https://www.youtube.com/watch?v=uXUd_-xrycs
  • Ça fonctionne bien aussi sur téléphone, même si le clavier mobile est un peu inconfortable ; malgré ça, ça reste tout à fait utilisable, c’est juste une limite du téléphone
  • En infographie, la coordonnée (0,0) commence en haut à gauche et non en bas
• J’ai essayé de créer diverses animations avec tixy, c’est très amusant ici : https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , et j’ai aussi reproduit un motif d’attaque de globules blancs : https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• J’ai aussi créé un effet de flammes : https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy est une version très simple de sites comme Shadertoy, et cette simplicité correspond parfaitement à mes goûts
• L’auteur de tixy est Martin Kleppe (@aemkei), connu pour Quine et les astuces JS ; on peut aussi jeter un œil à d’autres projets impressionnants : https://aem1k.com/world/ , https://aem1k.com/qlock/
• Inspiré par tixy, j’ai créé une appli de dessin avec des pinceaux programmables : https://fig.sonnet.io ; ce qui est amusant dans cette appli, c’est que le mouvement du pinceau varie avec le temps plutôt qu’avec la pression ou l’angle, donc il faut dessiner en rythme ; son fonctionnement et son implémentation sont expliqués ici : https://untested.sonnet.io/notes/fig-tree-brushes/
• Je partage aussi un exemple de fonction étrange : https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• J’ai aussi créé un motif d’étoile à cinq branches : https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • J’ai aussi reproduit le mouvement de deux serpents : 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
• On peut créer avec tixy un cercle qui continue de bouger et grossit progressivement : https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t