Processing Hack

  HI. I looked at the orthographic and sequential examples and combined elements from both to create an animation controlled by the mouse position, using some ink in water footage I had left over from another project.

The orthographic example uses a feature called map(), which takes an input variable (in this case the mouse's X position) and reformats it for a specified range (the % of the cube that is revealed).

The sequential example uses separate image files to create an animation by stringing them together. If you go to  sketch > show sketch folder > data, you can add image files for the processing file to use. Image files are put into the PImage object by using the loadImage("filename.type") function. Sequential uses an array of PImage objects, and cycles through them by changing the frame number each time the program completes a loop. The frameRate is set to 24 in the setup, which allows this process of cycling through frames to happen at a visible speed as opposed to instantly.

I took the image array from sequential and connected it to a mapped mouse x position, so that my program would allow me to scrub back and forth through an animation by moving my mouse.

Here, the progress variable maps my mouse position, which could be any number of the pixels in the window of the program, to the much smaller number of frames in my animation (30). The number is then used to call which frame is being displayed given the mouse position in "image(images[progress],0,0)."

I used the same progress variable as the content of a text() function, so you can see the number of the frame being displayed  on the mouse cursor.