Animação de pixels 16x16 criada com regras matemáticas simples

• A animação de pixels 16x16 é criada por meio de regras matemáticas simples
• O movimento de cada pixel se baseia em fórmulas e operações matemáticas
• Com algoritmos mínimos e lógica simples, é possível gerar padrões complexos e atraentes
• Mesmo sem técnicas complexas de renderização, é possível produzir resultados visualmente impressionantes
• Esse método tem alto potencial de uso em visualização criativa e ensino de programação

---

Visão geral

• Esta animação é feita com base em uma grade de pixels no tamanho 16x16
• A posição, a cor ou o estado de cada pixel muda constantemente de acordo com regras matemáticas simples
• Essa forma de implementação é eficiente do ponto de vista da programação e, ao mesmo tempo, muito intuitiva
• Mesmo sem técnicas complexas ou avançadas, é possível oferecer efeitos visuais atraentes e regulares
• Tem grande potencial de aplicação em arte visual, criação algorítmica, ensino para desenvolvedores iniciantes etc.

Principais pontos

• A animação aparece na forma de uma grade bidimensional 16x16
• A mudança de cada pixel se baseia em expressões matemáticas ou regras específicas
• Por exemplo, operações matemáticas básicas como sin, cos, xor ou mod são usadas para determinar o movimento e a cor dos pixels
• Não são necessários código complexo nem bibliotecas externas para criar efeitos visuais elaborados
• Apenas aplicando fórmulas simples de forma repetida já é possível gerar padrões originais

Significado e possibilidades de uso

• Esse método se destaca por produzir resultados impressionantes mesmo com código minimalista
• É útil para praticar pensamento algorítmico, intuição matemática e criatividade visual
• É um bom exemplo para aprender como animações e visualizações funcionam de forma programática
• Pode ser facilmente adotado para fins educacionais, experimentos artísticos ou projetos criativos
• Tem alta acessibilidade e versatilidade para desenvolvedores iniciantes e criadores de todas as idades

[xcutz]

Que legalzinho

[ng0301]

Uau...

[GN⁺]

Comentários do Hacker News

• Tixy é realmente impressionante; fiz algo parecido por conta própria: eu queria criar animações para uma tela de matriz de LED com o site https://muffinman.io/pulsar/; na época não encontrei o tixy, então fiz o pulsar, e só depois reencontrei o tixy; também existe o https://sliderland.blinry.org/, um projeto semelhante que usa sliders de HTML; esse tipo de coisa é muito divertido
• Quando descobri o tixy pela primeira vez, alguns anos atrás, gostei tanto que, com a permissão do autor original, criei o site https://www.mathsuniverse.com/tixy ; adicionei puzzles à grade do tixy e uso isso com meus alunos nas aulas de ciência da computação; eles ficam completamente envolvidos com esses puzzles
  • Isso me faz lembrar do jogo de puzzle 3D Replicube, lançado recentemente, que implementa o mesmo princípio em 3D
  • Essa abordagem é realmente incrível para educação; eu também fiquei impressionado com aquelas pequenas funções no começo e experimentei fazendo um clone em calculang; adicionei um recurso de avaliação com F9 para selecionar subexpressões e ver os resultados, e isso ajudou muito a entender os padrões; também dá para ver o vídeo: https://www.youtube.com/watch?v=uXUd_-xrycs
  • Funciona bem no celular também; o teclado do celular é um pouco incômodo, mas fora isso não há problema para usar; essa é uma limitação do telefone
  • Em computação gráfica, a coordenada (0,0) começa no canto superior esquerdo, não embaixo
• Fiz várias animações com tixy; isso aqui é muito divertido: https://tixy.land/?code=sin%28x%29cos%28y%29%2Bcos%28x%29sin%28y%29%2Bsin%28t2%29 , e também implementei um padrão de glóbulos brancos atacando: https://tixy.land/?code=sin%28x%2Bt%29%2Fcos%28y%2Bi%29%2Bcos%28yt%29%2Bt%2F0.7
• Também fiz um efeito de fogo: https://tixy.land/?code=Math.sin%28%28y%2F3%5Ex%7Ci%29%2Bt%29
• O tixy é uma versão super simples de um site como o Shadertoy; esse jeito mais simples combina perfeitamente comigo
• O autor do tixy é Martin Kleppe (@aemkei), conhecido por quines e truques de JS; também vale ver outros projetos legais dele: https://aem1k.com/world/ , https://aem1k.com/qlock/
• Inspirado pelo tixy, criei um app de desenho com pincéis programáveis: https://fig.sonnet.io ; a parte interessante é que o movimento do pincel muda com o tempo, e não com pressão ou ângulo, então você precisa desenhar no ritmo; aqui dá para ver como funciona e como foi implementado: https://untested.sonnet.io/notes/fig-tree-brushes/
• Também compartilho um exemplo de função curiosa: https://tixy.land/?code=%281%2Ft%258%29+%2F+tan%28t+%2F+%28y*x%2Ft%29%…
• Também fiz um padrão de estrela de cinco pontas: https://tixy.land/?code=sin%285*atan2%28y-7.5%2Cx-7.5%29-t%29
  • Também implementei o movimento de duas cobras: 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
• Dá para fazer no tixy um círculo que continua se movendo e vai crescendo aos poucos: https://tixy.land/?code=%28x-10t%2521%29**2%2B%28y-10t%2521%29**2-t