How could I make waving text on a canvas element similar to what is found on this page?
+5
A:
EDIT: @Ben, forget about the downvotes for no reason on your question, and... BE MY GUEST! :)
I never coded with <canvas> before, it was very fun. At this point, there is no bilinear interpolation. I might rework it and add more bells and whistles.
If you want to achieve such an effect in javascript, you'll effectively have to use the <canvas> tag.
The principle consists in precalculating a distortion function in a buffer that is larger than the source image dimension.
Have a look at the old Flipcode Art of Demomaking column: Bitmap Distortion. This is a good old gem :) The paragraph about the cache might not be relevant for a <canvas> based implementation though.
There are many Processing resources out there, so it's also a good idea to have a look at Processing.js.
Gregory Pakosz
2010-01-13 18:31:28
That's wonderful, thank you :)
Ben Shelock
2010-01-14 06:42:23
@Ian > I didn't downvote you (I'm telling you as I'm the only commenter)
Gregory Pakosz
2010-01-13 22:55:22
@Gregory: I think the person who downvoted me was the creator of this site: http://www.animatedgif.net/
Ian Silber
2010-01-13 23:01:44
@Ian, that said, I agree with you. I'm always having tons of browser windows opened with many tabs (right now 19 windows, 67 tabs) and all the javascript and flash put my laptop to its knees. Still, it was cool to spend time learning canvas
Gregory Pakosz
2010-01-13 23:03:49