Ball bounce
Learning outcomes:
To learn about the Ball bounce.
To learn about Ball bounce work.
To learn about the creating app using App development.
To learn about the applications of Ball bounce.
1. What is Ball bounce?
1.1. Introduction
"Ball bounce" is a feature in the MIT App Inventor programming platform that
allows users to create apps with animated graphics that simulate the behaviour
of a bouncing ball. The ball bounce feature can be used to create games,
educational apps, or any other kind of app that requires animated graphics.
With the ball bounce component, users can define the characteristics of the ball,
such as its size, color, and initial velocity. Users can also specify the behaviour
of the ball when it collides with other objects in the app. For example, users can
specify that the ball should bounce off walls or other objects, or that it should
disappear when it collides with certain objects.
The ball bounce feature is part of the "Drawing and Animation" category of
components in MIT App Inventor. It can be added to an app by dragging and
dropping it from the component palette onto the app designer canvas. Once
added, the ball bounce component can be programmed using the visual block-
based programming language in MIT App Inventor.
2. How is ball bounce work?
The ball bounce feature in MIT App Inventor is implemented using a physics
engine that simulates the motion of the ball and its interactions with other
objects in the app.
When you add the ball bounce component to your app, you can specify the
characteristics of the ball, such as its size, colour, and initial velocity. You can
also specify the behaviour of the ball when it collides with other objects in the
app.
The physics engine used in the ball bounce feature calculates the position,
velocity, and acceleration of the ball based on its initial conditions and the laws
of physics. When the ball collides with another object, such as a wall or a
paddle in a game, the physics engine calculates the new trajectory of the ball
based on the angle of impact and the elasticity of the collision.
The ball bounce feature provides a simple and intuitive way to create apps with
interactive graphics that respond to user input. By combining the ball bounce
component with other components in MIT App Inventor, such as buttons and
sliders, you can create engaging and interactive apps that can be used for a
variety of purposes, from educational tools to games and simulations.
3. Learning of coding to buttons
• In this, you will learn about animation in App Inventor by making a Ball
(a sprite) bounce around on the screen (on a Canvas).
• If you have another project open, go to My Projects menu and choose
New Project.
• Name the Project
Call it something like "BallBounce". Remember, no spaces. But underscores are
OK.
Add a Canvas
From the Drawing and Animation drawer, drag out a Canvas component and
drop it onto the viewer.
• Set the Screen so that it does not scroll
The default setting for App Inventor is that the screen of your app will be
"scrollable", which means that the user interface can go beyond the limit of the
screen and the user can scroll down by swiping their finger (like scrolling on a
web page). When you are using a Canvas, you have to turn off the "Scrollable"
setting (UNCHECK THE BOX) so that the screen does not scroll. This will
allow you to make the Canvas to fill up the whole screen.
Change the Height and Width of the Canvas to Fill Parent
Make sure the Canvas component is selected (#1) so that its properties show up
in the Properties Pane (#2). Down at the bottom, set the Height property to "Fill
Parent". Do the same with the Width property.
Add a Ball
Now that we have a Canvas in place, we can add a Ball Sprite. This can also be
found in the Drawing and Animation drawer. Drag out a Ball component and
drop it onto the Canvas (#1). If you'd like the ball to show up better, you can
change its Radius property in the Properties pane (#2)
4. Creating app using App development
• Open the Blocks Editor.
• Open the Ball1 Drawer to view the Ball's blocks.
• Drag out the Flung Event Handler
Choose the block when Ball1.Flung and drag-and-drop it onto the workspace.
Flung refers to the user making a "Fling gesture" with his/her finger to "fling"
the ball. Fling is a gesture like what a golf club does, not like how you launch
Angry Birds! In App Inventor, the event handler for that type of gesture is
called when Flung.
Set the Ball's Heading and Speed. First get the setter blocks
Open the Ball drawer and scroll down in the list of blocks to get the set
Ball1.Heading and set Ball1.Speed blocks
Plug the set Ball1.Speed and set Ball1.Heading into the Fling event handler.
Set the Ball's speed to be the same as the Fling gesture's speed
Mouse over the "speed" parameter of the when Ball1.Flung event handler. The
get and set blocks for the speed of the fling will pop up. Grab the get speed
block and plug that into the set Ball1.Speed block.
Set the Ball's heading to be the same as the Fling gesture's heading
Test it out
• A good habit while building apps is to test while you build. App Inventor
lets you do this easily because you can have a live connection between
your phone (or emulator) and the App Inventor development
environment.
• If you don't have a phone (or emulator) connected, go to the connection
instructions and then come back to this tutorial. (Connection instructions
are in Tutorial #1 or on the website under "Getting Started".)
• After flinging your ball across the screen, you probably noticed that it got
stuck on the side.
• This is because the ball's heading has not changed even though it hit the side
of the canvas. To make the ball "bounce" of the edge of the screen, we can
program in a new event handler called "When Edge Reached".
• Add an Edge Reached Event
• Go into the Ball1 drawer and pull out a when Ball1.EdgeReached do event.
Go back into the Ball1 drawer and pull out a Ball.Bounce block.
Add the edge value for the Ball. Bounce block
The Ball.Bounce method needs an edge argument. Notice that the
Ball1.EdgeReached event has an "edge" as a parameter. We can take the get
edge block from that argument and plug it into the call Ball1.Bounce method.
Grab the get edge block by mousing over (hover your mouse pointer over) the
"edge" parameter on the when Ball1.EdgeReached block.
Your final blocks should look like this. Now test it out!
Test it out!
Now, when you fling the ball, it should bounce off the edges of the canvas.
6. Applications of object detection
There are many applications of Ball bounce in MIT App Inventor, especially in
creating games, simulations, and educational apps. Here are some examples:
1. Games: Ball bounce can be used to create a variety of simple games, such
as a classic arcade game like Pong, or a platformer where the player
controls a bouncing ball.
2. Physics simulations: Ball bounce can be used to simulate the behavior of
objects in the real world, such as a ball bouncing on different surfaces or
a projectile bouncing off walls.
3. Educational apps: Ball bounce can be used in educational apps to teach
concepts such as gravity, motion, and elasticity. For example, a physics
app could use Ball bounce to demonstrate the conservation of momentum
in collisions between objects.
4. Interactive art: Ball bounce can be used to create interactive art
installations, where users can control the movement of bouncing balls on
a screen or projected surface.
5. User interfaces: Ball bounce can be used to create engaging and
interactive user interfaces for apps, such as a menu screen where the user
navigates through different options by bouncing a ball around the screen.
Summary:
" Ball bounce is a feature in MIT App Inventor for creating apps with
bouncing ball animations.
It can be used to make simple games like Pong or platformers with
bouncing ball players.
Ball bounce is intuitive and interactive, allowing for creative
combinations with other App Inventor components.
The feature simulates physics for the ball's motion and interactions with
other objects.
