When I decided to create the new Bacae’s website, I didn’t want to feature a commercial work in the first page, but a place to show visual experiments that illustrates a bit of the work I develop. So, why not start with a series of experiments involving common physical events?
For the wave movement, I use the following equation:
/* JavaScript */
z = center+Math.sin(angle)*range;
angle += speed;
The variable "center" refers to sea level and “range†limits the size of the wave. As we have increased the value of the angle each time the function is executed, the calculation of sine oscillate in values ​​between 1 and -1.
To draw this I chose three.js, a open source library written in javascript to render and animate tridimensional graphics. In this case, I first create a mesh and then manipulate the "z" value for each vertice. See the example below:
Codepen | Github
For the final result presented on the site, I defined the speed and angle randomly for each vertice with the purpose of creating a less predictable visual effect, different from natural wave motion logic.
This is a experiment for modern browsers with support to canvas element.
