Antes de começar
- Agente com a skill Algorithmic Art disponível
- Ambiente capaz de criar arquivos HTML e JavaScript
- Navegador atual
Descreva uma regra visual, não uma referência para copiar
Escolha um comportamento: pontos que seguem curvas, linhas que reagem ao cursor ou formas que se afastam umas das outras. Defina duas ou três cores e o destino do material.
Neste exercício: um campo de pontos que forma correntes suaves, com fundo escuro e dois tons de destaque. O objetivo é experimentar a composição e exportar uma imagem para uma capa.
Peça um visualizador com poucos controles
Use este pedido: com Algorithmic Art, crie um visualizador p5.js para correntes de pontos. Inclua controles de quantidade, velocidade, tamanho e semente; adicione pausar, reiniciar e exportar PNG. Mostre os controles com rótulos claros e mantenha uma opção de pouco movimento.
A skill fornece o processo de criação. A direção visual e os critérios deste exemplo são sugestões editoriais da Agentspedia.
Exija uma semente reproduzível
Peça para o agente usar a semente nos valores aleatórios, recorrendo à função randomSeed do p5.js. Se a composição também usar ruído, peça que o agente confira a documentação correspondente e controle essa parte de forma consistente.
Teste a mesma semente com os mesmos parâmetros depois de reiniciar. O estado inicial deve poder ser recuperado; a imagem em um instante da animação também depende do tempo decorrido.
Explore uma variável por vez
Comece com poucos pontos. Ajuste quantidade e tamanho antes de aumentar a velocidade. Guarde três combinações de parâmetros que tenham resultados diferentes.
Se o navegador ficar lento, reduza a quantidade de elementos e efeitos. Abra a página em uma tela estreita e confira se os controles continuam acessíveis. O fundo é útil quando continua funcionando no dispositivo do público.
Confira a pausa e a exportação
Pause em uma composição interessante e use o botão de PNG. A função saveCanvas salva o canvas atual como imagem; a animação em si continua no projeto HTML/JavaScript.
Abra o PNG fora do navegador e confirme dimensões, contraste e recorte. Se precisar de um vídeo, será necessário um fluxo de gravação ou renderização adicional.
Guarde a versão que você consegue editar
Salve o HTML, o JavaScript e uma nota com semente, parâmetros e finalidade. Para uma capa com texto, mantenha uma região visualmente tranquila e adicione o texto em uma etapa separada.
Se publicar o visualizador, inclua pausa e uma alternativa para quem prefere menos movimento. Revise também as dependências externas exigidas para a página abrir.
O que você terá ao final
Um visualizador generativo com controles, variações recuperáveis e exportação de quadros em PNG.
Vale conferir
- A exportação de PNG é estática; não promete um arquivo de vídeo.
- Movimento contínuo e muitos elementos podem afetar conforto e desempenho.
- Tutorial conferido na documentação; nenhum visualizador deste exercício foi executado pela Agentspedia.