Gere partículas, corpos elásticos, colisões e campos gravitacionais interativos em tempo real com Canvas.
Gere partículas neon que caem, quicam nas bordas e colidem com o Alpa. Clique ou toque no Alpa e arraste para arremessá-lo; a expressão e o balão de fala dele reagem a batidas fortes, ao arraste e ao modo de gravidade. Na gravidade zero, mantenha o mouse pressionado para atrair as partículas próximas.
Gere partículas, corpos elásticos, colisões e campos gravitacionais interativos em tempo real com Canvas. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.
Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.
Este é um sandbox de física 2D que roda no navegador e usa um canvas para simular em tempo real partículas neon brilhantes e uma grande partícula com o mascote Alpa. Você pode ajustar a gravidade e o quique, alternar entre modos de gravidade ou pegar o Alpa e arremessá-lo pela tela para vê-lo quicar nas paredes e empurrar as partículas. Ele serve para relaxar um pouco e também como demonstração prática de aceleração da gravidade, coeficiente de restituição e colisões simples, sem instalar nada.
A força da gravidade vai de 0 a 1,5 e o coeficiente de restituição de 0,1 a 1,0: quanto maior, mais velocidade o objeto mantém depois de bater na parede. A simulação também aplica uma leve resistência do ar, então mesmo com 1,0 tudo acaba parando. «Adicionar 20 partículas» solta 20 partículas no topo da tela. São mantidas no máximo 400 e, ao passar disso, as mais antigas são removidas. O botão de limpar apaga todas de uma vez. Pressione e arraste o Alpa com o mouse ou o dedo e solte para arremessá-lo.
Há quatro modos de gravidade. O padrão funciona como a gravidade da Terra. «Gravidade zero» desliga a gravidade e, enquanto você mantém o botão do mouse pressionado, atrai para o ponteiro as partículas a até cerca de 300 pixels. «Buraco negro central» puxa o Alpa para o centro da tela enquanto todas as partículas são atraídas para ele; a força acompanha o controle de gravidade, então em 0 não há atração. «Controle por giroscópio» faz a gravidade seguir a inclinação do celular, e no iPhone a permissão é solicitada primeiro.
Para rodar com fluidez no celular, as partículas pequenas só colidem com o Alpa e com as bordas da tela, não umas com as outras. A física avança em um ritmo fixo de 60 passos por segundo, então a velocidade é a mesma em telas com taxas de atualização diferentes, e o painel mostra ao vivo os quadros por segundo, o número de partículas e a velocidade do Alpa. Quando o Alpa bate forte na parede, muda de expressão, toca um som curto e soltam-se algumas faíscas; os rastros luminosos atrás das partículas são um efeito visual desenhado no canvas. Toda a simulação roda no seu aparelho e não coleta dados.
Para que centenas de partículas rodem com fluidez no celular, o sandbox só calcula as colisões das partículas com o Alpa e com as bordas da tela. Verificar cada partícula contra todas as outras faria o cálculo crescer com o quadrado do número de partículas e logo causaria travamentos, então as partículas simplesmente atravessam umas às outras.
Esse modo precisa de um celular ou tablet com sensor de orientação; a maioria dos computadores de mesa e notebooks não tem. No iPhone e no iPad, ao escolher esse modo aparece um pedido de permissão de movimento e orientação que você precisa aceitar. Se recusou antes, recarregue a página e tente de novo. Verifique também se o controle de gravidade não está em 0.
A força do buraco negro é multiplicada pelo valor do controle de força da gravidade, então em 0 não há atração nenhuma. Mova o controle para a direita e o Alpa será puxado para o centro da tela enquanto as partículas são atraídas para ele; quanto maior o valor, mais forte a atração.
Não. Um quique de 1,0 significa que nenhuma velocidade é perdida ao bater na parede, mas o sandbox também tem uma leve resistência do ar que desacelera tudo um pouco a cada passo, então os objetos acabam parando. Para ver quiques mais longos, experimente diminuir um pouco a gravidade.
Ver esta categoria: Design e cores
Adicione pontos de ancoragem, arraste as alças de Bézier em uma tela de 500×500 e gere na hora o atributo d do caminho SVG e uma regra CSS clip-path: path().
Coloque prints de tela dentro de uma moldura de navegador estilo macOS com sombra e fundo gradiente e baixe em PNG de alta resolução.
Crie letreiros luminosos personalizando cores, pulsação e sombras brilhantes com exportação de código CSS.
Extraia cores exatas pixel a pixel de qualquer imagem com lupa de alta precisão e veja a paleta dominante.
