Ocean Waves

Screenshot of sketch

Goal: Using a flocking steering behavior to stimulate ocean foam

As temperatures rise in NY, I have been excitedly anticipating the summer season and going to the beach. I was inspired by the image below to recreate the circular shapes formed from each crashing wave.


To establish my color palette, I used the following image as my reference:

Color Palette

Each wave consists of 2 custom shapes with a row of growing circles to act as the sea foam along the edges of the wave. The background is generated by using Perlin noise on the canvas’s pixels to create a nebulous texture. This texture is meant to mimic the clouded waters in the ocean as sand is disturbed with the current. Lastly, I tinkered with the parameters of Dan Shiffman’s flocking example to help me mimic the circular rings formed after a wave disperses.

Overall, I enjoyed the exploration of steering algorithms. However, I wish that the image produced in the sketch was cleaner and less laggy. I feel that the realistic water texture contrasts with the simplistic shapes of the waves and circular rings. One possibility for the final I am curious to explore is creating a simplified Galaga game using steering behaviors for the enemies’ projectiles.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s