Marist School Computational Media. Processing Exercise 01 Bouncing Ball Animation. Description:

Size: px

Start display at page:

Download "Marist School Computational Media. Processing Exercise 01 Bouncing Ball Animation. Description:"

Cameron Franklin
8 years ago
Views:

1 Marist School Computational Media Processing Exercise 01 Bouncing Ball Animation Description: In this exercise we will create an animation to show shapes moving and bouncing off the edges of the screen. We will model or represent the data for our moving objects with variables that store the values for position and speed. We will model our ball with four variables: Variables for Position of the ball: ballx -> Integer representing the horizontal position of the ball bally -> Integer representing the vertical position of the ball Variables for Speed of the ball: balldx -> Horizontal speed of the ball balldy -> Vertical speed of the ball Why DX and DY? D stands for delta or change of X and Y position. To create the animation of movement and bouncing, we will add change ballx by balldx and bally by balldy for each frame of the animation. In addition, we will use if statements to check the position of the ball against the edges and change the balldx or balldy to allow the ball to bounce off the edges of the screen.

We will model our ball with four variables: Variables for Position of the ball: ballx -> Integer representing the horizontal position of the ball bally -> Integer representing the vertical position

2 Process: 1. Start processing and select File-Save and navigate to your Processing Projects folder in Computatational Media Lastname. Save the file as Lastname_Bouncing.

3 2. Type in the following comments to note your name and state the purpose of the project:

4 3. We will now define the variables for the x and y position of the ball:

5 4. We will now define the DX and DY for the ball. These variables control the speed of the ball, so we will set them to 10 for now.

6 5. We will set up the processing animation. Type the void setup() function outline as follows. Remember, when we run the program, setup() will only run one time.

7 6. Select Tools-Color Selector to pull up the color menu:

8 7. In the setup() function, define the size and color of the canvas. (You may pick any color you wish).

9 8. Click the Run icon and test the program. (Circle with triangle) You would see a window showing the canvas and background color.

10 9. Close the canvas window if it works. We will continue with the void draw() function. The draw() function runs in a loop (repeats during the program s life). Inside the draw() function we will perform the calculations and commands for movement and drawing to create the animation. 10. The process of animation consists of these steps: a. Lay down the background b. Perform the math to calculate the position of the objects (Model the movement) c. Draw the object to the canvas. (The View)

Inside the draw() function we will perform the calculations and commands for movement and drawing to create the animation.

11 First, write the code to lay down the background. We will use the same color as the setup() background.

12 11. We will now do the math to calculate movement. First, we will add the balldx and balldy to the ballx and bally positions.

13 12. We now will do step where we draw the ball to the screen. Add the following code to set the shape color and draw the ball.

14 13. Click the Run icon and you should see the ball move diagonally down and off the screen. (We have not set the bouncing yet...)

15 14. We now need to program the bouncing of the ball. Add the following if statements to check the position of the ball and then change the balldx or balldy if it is off the edge of the screen. (Notice we multiply by -1 to change direction by positive or negative). Add the following code between the change ball position section and the draw ball section:

balldx or balldy if it is off the edge of the screen.

16 15. Click the Run icon and you should now see the ball bouncing about the screen:

17 16. For this assignment you will need to create two additional bouncing objects. Remember, you must do the following steps to add an additional object: a. Define position and speed variables for the object. (Before the setup() function). An example would be:

18 b. In the draw() function, add the code to calculate the position and bounce and then draw the shape. The following comments suggest the outline. Remember, it will follow an very similar format to the code for the ball: Note: This code is done in the draw() function below the animation code for the ball. 17. Experiment with different shapes, colors, and values for speed.

Remember, it will follow an very similar format to the code for the ball: Note: This code is

Mobile App Tutorial Animation with Custom View Class and Animated Object Bouncing and Frame Based Animation

Mobile App Tutorial Animation with Custom View Class and Animated Object Bouncing and Frame Based Animation Description of View Based Animation and Control-Model-View Design process In mobile device programming,