1

I'm planning on building some fancy notebook page tear animation effect with HTML5 Canvas. I'm not new to Javascript, though I'm new to HTML5 Canvas. It doesn't seem complicated at all. After browsing a lot of tutorials, I couldn't figure out was how to get similar functionality like Photoshop's Free Transform Warp. My idea was to paint the complete page, and then, for each animation frame, translate this differently using some kind of warp. Is this possible with a transform method or do I have to write my own method for this? See this screenshot of the warp I'm quickly drew:

You are probably wondering why not paint a custom shape using the Quadratic Curves? Well, I want the grad pattern to be wrapped as well. So I had in mind to paint a plain page, and after that transform it using some kind of warping, warping the grid as wel..

Mohsen Safari
  • 6,669
  • 5
  • 42
  • 58
Rebel Designer
  • 235
  • 4
  • 12
  • I've been thinking of taking the bezier curve algorithm and apply that to every line of pixels using get/create/putImageData methods, but on a second thought, that would be extremely slow, because for every frame of the animation, every pixel has to be calculated. Also, there is no way for me to use the hardware acceleration features. At least not to my knowledge. – Rebel Designer Aug 13 '12 at 16:03
  • 1
    As expected, this method of transforming was way to slow. If anyone is interested, I can put my demo online. Does anyone have an idea on how to do this? I'm thinking more and more of using a DOM element for every vertical line of pixels and positioning them using the same bezier curve. Although I have no idea how some browsers will react on 800+ DOM elements being transformed.. – Rebel Designer Aug 13 '12 at 22:01
  • @rebel-desginer this q/a is very old, have you had any luck with this? After a couple of years, and still there are no decent examples on the web for this, not even with webgl. – Hooman Askari Feb 08 '17 at 13:43

0 Answers0