Animación de píxeles 16x16 creada con reglas matemáticas simples

• La animación de píxeles 16x16 se crea mediante reglas matemáticas simples
• El movimiento de cada píxel se basa en fórmulas y operaciones matemáticas
• Con algoritmos mínimos y lógica simple, es posible generar patrones complejos y atractivos
• Es posible lograr resultados visualmente impactantes incluso sin técnicas de renderizado complejas
• Este enfoque tiene un alto potencial de uso en visualización creativa o educación en programación

---

Descripción general

• Esta animación está construida a partir de una matriz de píxeles de 16x16
• La posición y el color o estado de cada píxel cambian constantemente según leyes matemáticas simples
• Esta forma de implementación es eficiente a nivel de programación y al mismo tiempo muy intuitiva
• Incluso sin técnicas complejas o avanzadas, puede ofrecer efectos visuales atractivos y regulares
• Tiene un alto potencial de aplicación en arte visual, creación algorítmica, educación para desarrolladores principiantes, etc.

Puntos principales

• La animación se presenta en forma de una cuadrícula bidimensional de 16x16
• Los cambios de cada píxel se basan en fórmulas matemáticas o reglas específicas
• Por ejemplo, operaciones matemáticas básicas como sin, cos, xor o mod se usan para determinar el movimiento y el color de los píxeles
• No se necesitan código complejo ni bibliotecas externas para crear efectos visuales elaborados
• Solo con aplicar fórmulas simples de manera repetida, es posible generar patrones originales

Significado y posibilidades de uso

• Este enfoque destaca por producir resultados impresionantes incluso con código minimalista
• Es útil para practicar pensamiento algorítmico, intuición matemática y creatividad visual
• Es un buen ejemplo para aprender cómo funcionan programáticamente la animación y la visualización
• Puede incorporarse fácilmente en fines educativos, experimentos artísticos o proyectos creativos
• Tiene alta accesibilidad y utilidad para desarrolladores y creadores principiantes de todas las edades

[xcutz]

Qué curioso.

[ng0301]

Vaya...

[GN⁺]

Comentarios de Hacker News

• Tixy es realmente sorprendente; hice algo parecido por mi cuenta: quería crear animaciones para una pantalla de matriz LED con un sitio llamado https://muffinman.io/pulsar/, en ese momento no encontré tixy, así que hice pulsar, y recién después volví a descubrir tixy; también existe un proyecto similar que usa sliders HTML: https://sliderland.blinry.org/, este tipo de cosas son muy divertidas
• Cuando descubrí tixy por primera vez hace unos años, me encantó tanto que, con permiso del autor original, hice el sitio https://www.mathsuniverse.com/tixy y le agregué acertijos a la cuadrícula de tixy para usarlo con estudiantes en clases de ciencias de la computación; a los estudiantes les fascinan estos acertijos
  • Esto me recuerda al juego de acertijos 3D Replicube, lanzado recientemente, que implementa el mismo tipo de idea en 3D
  • Este enfoque es realmente genial para la educación; a mí también me impresionaron esas pequeñas funciones al principio, así que hice un clon con calculang para experimentar, agregando una función de evaluación con F9 para poder seleccionar subexpresiones y ver los resultados, y eso ayudó mucho a entender los patrones; también se puede ver este video: https://www.youtube.com/watch?v=uXUd_-xrycs
  • También funciona bien en el celular; el teclado del teléfono es un poco incómodo, pero aun así se puede usar sin problema; esa es una limitación del móvil
  • En gráficos por computadora, la coordenada (0,0) empieza en la esquina superior izquierda, no abajo
• He hecho varias animaciones con tixy; esto es muy divertido: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , y también implementé un patrón de ataque de glóbulos blancos: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• También hice un efecto de fuego: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• tixy es como una versión muy fácil de un sitio como Shadertoy; ese enfoque sencillo me queda perfecto
• El autor de tixy es Martin Kleppe (@aemkei), conocido por Quine y trucos de JS; también pueden ver otros proyectos geniales suyos: https://aem1k.com/world/ , https://aem1k.com/qlock/
• Inspirado por tixy, hice una app de dibujo con brushes programables: https://fig.sonnet.io ; lo interesante de esta app es que el movimiento del brush cambia con el tiempo en lugar de depender de la presión o el ángulo, así que hay que dibujar siguiendo el ritmo; aquí se puede ver cómo funciona y cómo fue implementado: https://untested.sonnet.io/notes/fig-tree-brushes/
• También comparto un ejemplo de una función curiosa: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• También hice un patrón de estrella de cinco puntas: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • También implementé el movimiento de dos serpientes: 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
• Se puede hacer en tixy un círculo que siga moviéndose y vaya creciendo poco a poco: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t