17 Responses to “HTML5 Canvas Tutorial: Creating a 2-dimensional wave”  

  1. 1 Zeno Rocha

    Hey, take i look what i did http://beerblogging.org/ =]

  2. 2 jpezzetti

    Nice application Zeno!

    Backlinks are always appreciated =) —

  3. 3 Charles

    Need to modify it some more but its nice

    Have any good ideas on how to make it twitch on it own?

  4. 4 jpezzetti

    You can call it on anything you like Charles, I have it called when the mouse hovers over a trigger. You can change this to anything you like. You can have it flow all day long if you want but you’d have to change the function so it doesn’t degrade.

  5. 5 konstantinos

    Awesome! Keep up the good work.

  6. 6 arturohm

    HI it’s great your work. Is possible the same effect with jquery only ? without HTML

  7. 7 arturohm

    … without Html5

  8. 8 jpezzetti

    While I’m sure it could be done with jQuery alone it would be pretty damn messy…this code relies upon the HTML5 Canvas element.

  9. 9 adm351

    Has anyone tried to make the water level vertical? I tried but to no avail…

  10. 10 jpezzetti

    @adm351: Doable, but it will take some work on your part. Good luck, let me know how it goes.

  11. 11 Ben

    Hi, nicely done. I’ve been having fun with this and got a bit stuck, I am trying to change it to a timer based event, not on mouse hover. Any hints on how to remove the hover?

  12. 12 jpezzetti

    @Ben: Haven’t looked at this source code in awhile, but what you’re proposing shouldn’t be too difficult. The script uses the x value of the mouse cursor to define the centerpoint of the wave, my guess is that’s where you’re stuck, as you’ll need to hard code that value or come up with it somewhere else. Good luck!

  13. 13 Ben

    Thanks John, that was where I was stuck. I have changed the midPointX to a changing random value (within the page width) and it’s working great, it appears as a almost continuous ripple. The is only a very short moment of flat line as the ripple restarts.

  14. 14 Felix

    Hey John,
    This is a great tutorial!
    I’m trying to make the wave move on their on with no hover, something like an animation can you help me on that? I’m not that great with this

  15. 15 Felipe Haack Schmitz

    Hello, so cool this effect 😉

    I try to add an image in the bottom the wave, (this image: http://shinyuufansub.com.br/felipehs/agua2.png), but I don’t have any idea how I can to do it.

    Can u help me?

  16. 16 jpezzetti

    Hi Felipe,

    If you’re trying to animate that particular image then this tutorial won’t help you much. Your best bet using a version of my code would be to create multiple overlayed waves and try to achieve a more photo realistic effect, as in your image. Otherwise you’re better off looking for code that will create a ripple effect on a bitmap, which I’m sure you can find with a google search. Good luck.

  17. 17 йосеф

    points[(midPointIndex-pt)+midPointIndex] lol points[-pt]

Leave a Reply