Planning and Pre-DebuggingWe'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:
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:
yPos = height/2;
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.
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:
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:
difY = mouseY - (yPos + doors.height/2); yPos += difY/drag;
Can be expressed in augmented assignment form as:
x = 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:
/= 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:
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;
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.
yPos += difY/drag; //Can also be expressed as: yPos = yPos + difY/drag;