# Waves

## In physics, a wave is a disturbance or oscillation that travels through space and matter, accompanied by a transfer of energy.

By Cláudio Marinho on

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.