Quando decidimos criar o novo site para a Bacae, não querÃamos que a primeira página tivesse algum trabalho comercial, mas alguma experiência visual que ilustrasse um pouco do trabalho desenvolvido por nós. Para isto, decidimos começar uma série de experimentos que envolvem eventos fÃsicos comuns no nosso dia-a-dia.
Para o movimento de onda, utilizo a seguinte equação:
/* JavaScript */
z = centro+Math.sin(angulo)*alcance;
angulo += velocidade;
A variável “centro†faz referência ao nÃvel do mar e o alcance limita o tamanho da onda. Como temos o valor do ângulo aumentado cada vez que a função é executada, o cálculo do seno oscilará em valores entre 1 e -1.
Para desenhar, utilizei o three.js, biblioteca open source para gerar e animar gráficos tridimensionais. Neste caso criamos uma malha tridimensional e, utilizando a equação apresentada, manipulamos o valor "z" em cada um dos vértices, veja no exemplo abaixo:
Codepen | Github
Como resultado final apresentado no site, variamos a velocidade e ângulo de cada um dos vértices com o objetivo de criar um efeito visual menos previsÃvel, fugindo um pouco da lógica natural do movimento de onda.
Este é um experimento para navegadores modernos com suporte ao elemento canvas.
