An Introduction To Programming With Processing

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:
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.
Image Control
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.
Image Control 02

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:
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 = x * 7;
/*Can be expressed in augmented assignment form as:*/
/= 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.