PROCESSING EXAMPLE OF PROJECTILE MOTION: FOOTBALL GAME
In order to use the previously created projectile motion animation and make the movement of the ball for the "soccer game", we need to add images to scatch. It is necessary to download background images, e.g. a picture of the stadium and a picture that will represent the ball (soccer). You can download the images from the site:
pixabay.com/
pixabay.com/
After these changes, the soccer game animation should look like the one shown below:
Animacija ne radi? Učitajte stranicu ponovo(refresh)
Adding images inside scatch in processing
Images are best created inside a folder called "data", which should be located inside the root folder of the application. You can create this folder independently within file explorer or from the PDE environment:
Figure 1: Adding images in processing
We'll add two images inside the "data" folder and name them appropriately:
Figure 2: Adding images in processing. Data folder
These images will be inside scatch as objects of class PImage.
Let's add a background image first. Inside the main scatch, you should first declare the object that will represent the background image, and the class PImage (background). Then we will complete the creation of this object inside the setup method, and using processing's loadImage("stadium.jpg") method, to which we need to pass the name of the background image file with the appropriate extension, and finally set the image inside the draw method using processing's background method, as which can be seen in the following image (underlined with a red line):
Let's add a background image first. Inside the main scatch, you should first declare the object that will represent the background image, and the class PImage (background). Then we will complete the creation of this object inside the setup method, and using processing's loadImage("stadium.jpg") method, to which we need to pass the name of the background image file with the appropriate extension, and finally set the image inside the draw method using processing's background method, as which can be seen in the following image (underlined with a red line):
Figure 3: Adding a background image in processing
The size of the image should be either the same as the size of the frame defined by the size method, or if it is not the same, then use the resize method to set the size of the image to be the same as the size of the frame. In this example, both image and frame sizes are set to 1200 * 654 pixels.
Adding a picture of a ball (soccer)
Similar to the background image, it is necessary to declare the PImage object, create the object inside the setup method using processing's loadImage() method and finally, inside the draw method, set the size of the image and then draw the image.
Creating the ball image is best done within the Ball class, so the code for drawing the ball image in this case is written in the render method of the Ball class, and is called from the main scatch, from the draw method. The new code, in the Ball class, is underlined with green lines, which can be seen in the image below:
Creating the ball image is best done within the Ball class, so the code for drawing the ball image in this case is written in the render method of the Ball class, and is called from the main scatch, from the draw method. The new code, in the Ball class, is underlined with green lines, which can be seen in the image below:
Figure 4: Adding images in processing - ball image
It should be noted that the image drawing mode is set to CENTER, and in the call to the image() method, the first two parameters passed correspond to the x and y coordinates of the position, which means that in this case it will be the center of the image. The width and height of the image frame will be equal to the diameter of the circle, which is defined by the 3rd and 4th parameters passed to the image() method.
Moving the ground line
We see that the background image is a stadium image that represents the stadium in 3D space, while we are creating a game in 2D, so the ball that describes the projectile motion executes it in a plane normal to the ground of the field. The ball bounces against the bottom edge of the frame, and not in a line that would pass at the height where the goals are located. Therefore, to make the ball appear to be flying towards the goal, we will move the ground line to go along the middle of the goal. We will introduce a constant GROUND_HEIGHT and set this value to 180px. This value can be changed if necessary. We will change the bounce threshold so that the ball bounces when it reaches the height of the ground line. The animation image would look like the image below:
Figure 5: Soccer game in processing. Moving the ground line
The code that needs to be changed is colored red and shown below. Inside the main scatch:
Figure 6: Soccer game in processing. Adding ground height
Change within the Ball class:
Figure 7: Soccer game in processing. Change of boundary conditions
Ball kick simulation. Defining a random value of the intensity and direction of the ball's initial velocity vector
To simulate a ball shot, we will define the intensity value of the initial velocity vector, as well as the direction using the random function.
We can define the direction through the slope of the initial velocity vector in relation to the direction of the x axis.
The random function is explained on the website: processing.org/reference/random_.html
We can define the direction through the slope of the initial velocity vector in relation to the direction of the x axis.
The random function is explained on the website: processing.org/reference/random_.html
X komponenta brzine i vrednost ugla se dobijaju kao slučajne vrednosti, a y komponenta brzine se može odrediti iz trougla koji zaklapa vektor brzine sa svojim komponentama, a preko tangensa ugla.(videti u kodu, na slici ispod). Ove vrednosti se računaju dva puta: prvi put unutar setup metode, a drugi put unutar reset metode u klasi Lopta. Na sledećim slikama su prikazane ove izmene i podvučene su crvenim linijama:
Figure 8: Soccer game in processing. Change of initial velocity vector. Use of the random method.
Inside the Ball class, the reset method and the boundaryConditions method are changed, which can be seen in the following image:
Figure 9: Soccer game in processing. Changes to the Ball class
Now, when the ball reaches the left or right frame boundary, instead of bouncing, a new shot is simulated, by calling the reset() method. These borders are moved 100px outside the visible part of the app.
Translation and rotation of the coordinate system in processing
In the example of an football game and shoot of the ball, the image of the ball is drawn at a distance defined by the position vector relative to the coordinate origin O, which is located in the upper left corner of the screen, as can be seen in the image below (Figure 10). Moving the objects to be drawn can also be done by translating the coordinate system by certain x and y values in the drawing plane (x1-O1-y1), and then defining the position of the object in relation to the new coordinate system. It can also be seen in the next picture (picture 10).
Figure 10: Translation of the coordinate system in Processing
The translation of the coordinate system in Processing is performed by calling the translate method of processing, where the x and y coordinates of the position of the center of the ball are passed as parameters. In our example, the position coordinates are stored in the "position" variable and this translation should be performed in the render() method in our case, as shown in the code in Figure 11.
Figure 11: Football game - Translation and rotation in Processing-code.
imageMode is set to CORNER, which means that the values sent as the first two parameters to the image() method will represent the coordinates of the corner of the image. Given that the coordinate origin is moved to the center of the ball (position.x, position.y), then the corner of the image is moved by r along the x and y axes. The width and height of the image frame are equal to the diameter of the ball(2*r), which is represented by the 3rd and 4th parameters in the image() call to the processing method. These changes in the position of the coordinate system are temporary, ie. they would be valid only for drawing the image of the ball, and not for any further drawings within the render method. This is provided by calls to pushMatrix(), at the beginning of changes, and popMatrix() at the end, so that the coordinate system after the call to popMatrix() returns to its initial state. Read more about the use of pushMatrix() and popMatrix() on the website: learningprocessing.com/examples/chp14/example-14-17-nested-push-pop
In order to display the movement of the ball as faithfully as possible, it is necessary to introduce the rotation of the ball over time by some angle (fi). Just as the coordinate system can be translated, temporarily (using pushMatrix() and popMatrix()) or until the end of the execution of the draw method, the coordinate system in which the ball is drawn can also be rotated by some angle before the actual drawing. This is done by the rotate() method, which is passed the rotation angle (fi) in radians as a parameter. The ball will then rotate around an axis normal to the 2D plane in which the animation is drawn, passing through the current coordinate origin. The addition of the code in the render() method that performs the rotation can be seen in Figure 11, and the position of the rotated coordinate system is shown below, in Figure no. 12.
Slika 12: Rotacija koordinatnog sistema u Processing-u
If before the rotation, the coordinate system is not translated, then the rotation would be performed around the axis that passes through the point in the upper left corner of the screen, because then it would be the coordinate origin, if in the meantime it would not be moved by some other translation.
The change of angle fi is done in the movement method, and the initial value is set in the constructor, which can be seen in the following image:
The change of angle fi is done in the movement method, and the initial value is set in the constructor, which can be seen in the following image:
Figure 13: Processing - Addition of angular velocity, rotation angle and their changes
The change in angle is for the value of the angular velocity in rad/s, defined as the variable w. The calculation of the angular velocity w will be performed when the ball hits the ground, because the value of the vector v is needed at that moment. The code is shown in Figure 14.
Figure 14: Processing - Football game, Calculation of angular velocity.
Angular velocity is calculated by observing that all points on the ball rotate around one stationary point (current pole of rotation), which is the point of contact of the ball with the ground (see plane motion of a rigid body).
|
Previous
|< Projectile motion in Processing |