XSpeed and YSpeed from Heading and Speed

[Scott Ferguson]

This project collides a ball and ImageSprite with a horizontal 'bar' ImageSprite to test sliding and bouncing behavior

The main feature of the project is creating XSpeed and YSpeed values from each moving sprite's Heading and Speed properties that are used to maintain the X component of the sprite's speed for sliding and adjust the Heading for bouncing.

Changes log:

20140825 - simplified the blocks and attached the new aia project UsingXYSpeed.aia

Sliding a sprite along a horizontal ImageSprite

In a recent support forum post it was requested how to slide a ball sprite along a horizontal imagesprite 'bar'.

After giving it much thought, I have one solution to share.

This solution is based on the need to have the ball move at the same speed in the x direction as it was previously, but have it stop moving in the y direction.

In order to do that it seems best to split the Speed value into X and Y components.

Speed in itself is just a number, but when combined with the Heading value we have a type of vector -- velocity.

In this case, the magnitude of the vector is the Speed and the direction is the Heading.

So by multiplying the Speed by the cosine of the Heading we get the XSpeed.

Multiplying Speed by the negated sine of the Heading we get the YSpeed (since y values increase from top to bottom on the Canvas and Heading degrees are counter-clockwise in App Inventor, we negate the sine)

Once we have these values we can use the Math atan2(y,x) block to determine a new Heading and we can force the y value to be 0 so only the XSpeed is maintained.

So the New speed is the XSpeed and the new Heading is atan2(YSpeed,XSpeed) and since YSpeed is 0, the final Heading is:

Heading = atan2(0,XSpeed)

Bouncing a sprite off of a horizontal ImageSprite

I also tested in this project a bouncing effect when the moving sprites collide with the stationary horizontal bar ImageSprite.

All that is required for bouncing in the Y direction is to negate the YSpeed. The XSpeed does not change.

Recombine the XSpeed and negated YSpeed using the Pythagorean Theorem sqrt(XSpeed * XSpeed + YSpeed * YSpeed) to make a New sprite Speed value.

Use atan2(YSpeed,XSpeed) to get the new Heading. (note that YSpeed is not negated so the y direction will reverse)

You can also use vector addition to see how XSpeed and YSpeed combine to make the Speed magnitude value:

Consider a 3,4,5 right triangle where 5 represents the hypotenuse (long side) of the triangle.

if side 3 is the XSpeed and side 4 is YSpeed then side 5 (the hypotenuse) is Speed.

In App Inventor, Speed corresponds to the hypotenuse of a right triangle and determines how far (magnitude) to move a ball each clock cycle.

Heading is the angle of the hypotenuse (direction).

Both of these together (magnitude, direction) make up a velocity vector which can be used to move an ImageSprite or Ball on the Canvas.

For further study: 

It should be possible to tilt the horizontal bar sprite and have the moving sprites bounce at the proper angle.

It should also be possible to add gravity to the velocity and gravity will act only in the y direction so will not affect the XSpeed value.

Add friction to stop the ball from rolling for a more realistic physics simulation.

---

END