An Introduction To Programming With Processing

Interacting with images

We're going to use what we've learned to have an image in a sketch react to our mouse's Y position, making the image move up and down accordingly. You might have seen this effect when viewing so called “high resolution” images that are larger than the window they are begin displayed in, on an online image gallery. Locate the image named doorsClosed.png and drag it into your sketch. We can then start by rendering the image at the origin with the following code:
PImage doors; //declare global variables

void setup(){                                                       
  size(800,600); //size() always first in setup
  doors = loadImage("doorsClosed.png"); /**use setup() for assignment wherever possible**/

void draw(){
  image(doors,0, 0); //draw the image 
When loading images into an active mode sketch, it's important that you declare the images object variable name outside of both setup() and draw(). This makes the object accessible as a global variable so that it is now within the scope of both setup() and draw(), this is important because we will need to access the new object variable from within both structures. It is advisable to use assignment in the setup() structure so that the image is loaded into the new object variable only once, placing the loadImage() function, within an assignment statement, for the new object inside the setup() structure, ensures this. Finally once we have set the image up for rendering we can use the image() function, as usual, to display the image in the sketch. It's worth noting that because the image is static, it is not possible to see that the image is in fact being redrawn to the Display Window approximately 60 times per second, when the sketch is run and although this might sound like a lot of excessive usage of system resources, most modern day computers should be able to handle this framerate for one image with relative ease. However, we will take a look at how to reduce the amount of times Processing cycles through the draw() structure per second, when we use start using the frameRate() function, a little later. Making the image follow the mouse's Y position is actually quite easy, modify the image statement to read:
image(doors, 0, mouseY);
Now when you run the sketch your image will start to move up and down in the Display Window because the value that the image() function is reading for it's Y parameter is the system variable mouseY. As you might recall mouseY stores the mouse's current Y position. If your mouse has moved, the new Y position of your mouse will replace the previous value that was stored in the mouseY system variable of the previous run-cycle, and as a result the image will be drawn in a new position. But why does the image appear to be streaking across the Display Window?
Undesirable Streaking Effect
We have told Processing to repeatedly draw the image by placing the image() function within the draw() structure, as a result the streaking effect is actually caused by the “ghosting” of the previous image having been drawn to the Display Window and not being erased before the image is redrawn in a new position for the current frame. To fix this effect we need to tell Processing to first clear the Display Window before drawing the image again in the current position. We can do this quite easily by adding the background() function before the image statement, thereby clearing the Display Window of the the image's previous rendering. Add the following statement before the image() statement in the draw() structure:
Now when you run the sketch it should act in a more predictable fashion. I've chosen black as a background color but you can choose any color. There are however several areas that can be improved on, Firstly the way in which the image moves in relation to the mouse is not very interesting to interact with. It would seem that the image appears to be stuck to the mouse. In order to fix this we will make the image lag slightly behind the mouse and then slowly catch up to the position of the mouse by creating a new variable that we can use to control the speed at which the image moves. This will create the impression of the image's movement being affected by friction. Secondly because the image's origin is it's top left hand corner, when we move the mouse down we tend to expose the background above the image, so we'll also make the image react to the mouse's Y position in relation to the center of the image and not it's top left hand corner. This reduces the possibility of exposing the background and makes the image more of a focal point. Finally we will constrain how far the image can move along the Y axis so as to completely eliminate the possibility of exposing the background.