|
|
|
|
Chapter:
Interacting with images
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?
The 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:
background(0);
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.
|
|
|
|
|
|
Previous
