Switchee | Switch/case control structure for ExpressionEngine templates | Authorization library

The questioner is focusing on the problem of getting an actual image to look like material being moved with the wind.

The code presented to do this divides a canvas into small rectangular elements and moves each of those as required by the 'physics' given (value of gravity/wind for example).

The original just draws grid lines for each of these areas. What we need is for the equivalent rectangle in the original image to be copied to that point.

This snippet achieves this by adding a origx/y to the info kept about each point so that we know where to find the original rectangle.

It brings the image into an img element (it is important to wait until this is loaded before doing more with it) then copies it to an off-screen canvas that has the same dimensions as the one which will hold the material. This canvas is inspected when we need the 'mini image' to put at a given point.

WARNING: this code (even without the introduction of an image) is pretty processor intensive. On a farily powerful laptop with good GPU it was taking around 19% of CPU and not much less of GPU and the fan was whirring. This is even when there is no movement of the mouse. The code could do with a thorough look through, for example to stop the timer when user activity is completed, and perhaps putting the frame rate down (it's 60fps in the given code). I would not recommend it be put in a webpage and left there running - it will be a battery drainer.