|
Chapter:
Interacting with images
Planning and Pre-Debugging
We'll start by making an assignment within the setup() structure that
sets the yPos value to the center of the Display Window. This has not
effected the position of the image yet, because we have not linked the
yPos variable to the image yet. Add the following statement at the end
of the setup() structure, before it's closed braces:
yPos = height/2;
If we wanted to make sure that yPos is returning the value we are
expecting it to return then we could add a println() statement within
the draw() structure to test it. The statement would look like this:
println(yPos);
If the program was run at this stage it should print a value that is
representative of the center of the Display Window's height. Using this
method of tracking variables is a common technique for debugging a
program and provides an easy and convenient method of understanding how
the program is changing and updating values internally. When you are
happy that the program is returning the results you were expecting you
can simply comment out the println() statement and resist deleting the
statement until the program is fully completed, tested, documented and
functional.
In order to render the image at the correct position we need to:
Determine what the Y position of the users mouse is (mouseY) and from
this value subtract the sum of the Y position of the image (yPos) and
half of it's height (doors.height/2). The latter value (yPos +
doors.height/2) describes the position of the image with relation to
it's center.
The image's
movement will react to the mouse's relative position to the images
center.
Once we have the mouseY – (yPos + doors.height/2) value we will assign
it to difY, then in the following statement we'll divide difY by the
frict variable. This is important because we're then going to take that
value (that is the answer of difY divided by frict) and add it to the
yPos variable, meaning that if the value of difY was initially returned
as 90 dividing it by frict would return a value of 3 (because 90/30 =
3) which is subsequently the value that we add to the image's current Y
position to cause it to move down by a value of 3 (plus moves down the
Y axis minus is moves up the Y axis). On the other hand if difY
returned a value of -90, this would mean that the users mouse is above
the center of the image and the value of -3 would be added to the
images Y position causing the image to move up by 3.
As the mouse's
Y position is less than the center of the image, the image is forced to
move up.
Then we're going to assign the sum of those values (yPos + difY/drag)
back to the yPos variable.
Finally we will use this value to determine the position that the image
is currently rendered at.
The results of this method is that the image will start moving fast
towards the mouse then get slower as it approaches the mouse.
Implementing a
Programmatic Solution
To summarize we are dividing the difference between the mouse's Y
position and the center of the image with the frict value, then adding
this value to the images current position. We can express this
programmatically with the following two statements, which you can add
to your sketch before the image statement:
difY = mouseY - (yPos + doors.height/2);
yPos += difY/drag;
In the second statement we use a technique known as augmented
assignment which is the process of condensing a statement that uses the
common technique of using a variable in an expression, then assigning
the value of the expression back to the same variable. For example the
statement:
x = x + 5;
Can be expressed in augmented assignment form as:
x+=5;
Both statements evaluate to the same answer, the latter is a more
commonly used method for this type of statement, as this kind of
statement is so commonly implemented in programming. Some other
examples of augmented assignment follow:
x = x -5;
//Can be expressed in augmented assignment form as:
x-=5;
x = x * 7;
//Can be expressed in augmented assignment form as:
x*=7;
/= and %= can also be used in augmented assignment. As you can see the
following statement used in our sketch is an example of augmented
assignment:
yPos += difY/drag;
//Can also be expressed as:
yPos = yPos + difY/drag;
At this point if you were to run the sketch, your image still would not
move in relation to the two statements you just added to your sketch.
However if you were to add a println() statement for the yPos variable
you would see the numbers indicating that the code is working. It's
always a good idea to test an implementation before fully integrating
it into your program when ever possible, with the println() function.
In order to create a link between these two statements and the Y
position of the image we would need to place the variable yPos into the
Y parameter field of the the image() function. However, if we where to
do this our image would continue to move beyond it's boundaries and
display the sketches background. Fortunately we have a function in
Processing that allows us to stop values from getting too high or too
low.
|
|
Previous
