Canvas Waves
Michael Nutt has created this excellent tutorial on how to create a wave effect using canvas. By the nature of a wave effect, this means the tutorial covers drawing lines, curves, animation and transparencies.
Now you can also make waves!
Each of the 15 steps contains a comment about what has been changed, the source code, a preview of what has been created so far, and the differences in code.
Comments
k
hey, this site doesn’t work anymore, shut it down
Posted on March 4, 2010
Don Smith
I could not get this to work in the latest versions of Firefox or Chrome.
Posted on July 1, 2010
Nick
Works for me.
Awesome tutorial. Very calming waves.
Also, the tutorial format with the github diff is very cool.
Posted on November 21, 2010
Dan
works great in firefox 4.0b8
Posted on January 8, 2011
Gerry Straathof
site is not working. can we get the source code at all? (I siphoned it off a twitter feed but the original tutorial would be nice)
Posted on April 14, 2011
Eric Kigathi
In case anyone is still looking for the code, Michael Nutt was gracious enough to add it to Git:
Here: https://github.com/mnutt/canvas-waves
&
Here: https://github.com/mnutt/canvas-waves/raw/master/index.html
Posted on April 19, 2011
Related demos