Kinematic equation with Clocks - What am I not understanding?

Hello, please see attached .aia and ask if I didn't explain myself well

I am trying to create a very simple App that simulates the movement of a child in 2d using the well-known position kinematic formula:

x = x0 + v . t,

where

  • x = final position (m)
  • x0 = initial position (m)
  • v = velocity (m/s)
  • t = time (s)

I have translated it into App Inventor as follows:

I need you to pay attention to two numbers:

  • RelojMRU (ClockMRU) TimerInverval initially set = 1000
  • The denominator in / 1000 (hardcoded number)

If you run the App and send the child to Position 0 m (the origin) and give him max velocity (65 m/s), since my width anchor is 650, for every 1000 ms (1 s) the child moves 65 m:

t = 1 --> x = 0 + 65 * 1000 / 1000 = 65 m (good)
t = 2 --> x = 65 + 65 * 2000 / 1000 = 130 m (good)
...
t = 10 --> x = 650 m (good)

It makes sense since I want the child to run from 0 m to 625 m in 10 seconds.

However, I don't know why, if I want to be more realistic since the child "jumps" from one interval to another, I do the following:

  • RelojMRU.TimerInterval = 1 (the interval is close to reality)
  • / 1000 --> / 1 (or you can just delete the division part and only let RelojMRU.TimerInterval)

With these configuration I should also end up with a final time of t = 10 s, but instead the child finishes in less than 1 second! See image below as reference:

How can we fix this, that is, giving a realistic movement with TimerInterval=1 and also having a final time of 10 seconds? My only tools are integrated blocks and the physics formula for position.

I also have two questions:

  1. When play button is pressed, I don't know why when the child is moving to the right (positive) and I change the Velocity red slider to a negative number (positive -> 0 -> negative) the child changes direction more quickly than doing the other way (negative -> 0 -> positive). How to fix it?
  2. (Optional, after above questions are solved) Is there any way to improve code? I mean, I had to use 2 Clocks. Can it be done using just one? I need to be able to move Velocity red slider while the child is moving and is stopped

Thank you!!
MRU_web.aia (532.9 KB)

Have a good read about ImageSprite in the documentation, especially speed and heading. Your solution is probably there.

https://ai2.appinventor.mit.edu/reference/components/animation.html

http://www.appinventor.org/book2

Read chapter 17 on animated apps

Thank you for your answers and sorry for the delay @TIMAI2 @ABG

I have read the documentation and if I understood correctly, there is Speed property of ImageSprite.

I need to do the math manually. Why is my formula wrong? I can't see it

At least one potential problem I see is that you are using X both as the final and intermediate states. X is expected to be an integer, so if your interval ends up being a fractional value less than 1 you may get erratic behavior. Instead, you should have a variable that tracks the exact position with fractional amounts. Update the variable and then assign it to your X coordinate so the fractional pieces aren't rounded away.

1 Like

Thank you! This is what I mean for "Where is my mistake?" :grinning:

You say

I tried adding a new variable X_intermediate and assigned the calculation to it so then X pos is X_intermediate as follows:

(Red are new blocks)

However, it seems it produces the same effect. Tried with RelojMRU.TimerInterval=1 and both / 1000 and / 1.

Did I understand you correctly?

Attached a new .aia using X_intermediate and translated names to English.
MRU_web_2.aia (532.5 KB)

You missed the Step Size attribute, which works with Speed and Direction if you want to have a Sprite move under its own power.

From Drawing and Animation

ImageSprite

A ‘sprite’ that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (Balls and other ImageSprites) and the edge of the Canvas, and move according to its property values. Its appearance is that of the image specified in its Picture property (unless its Visible property is false.

To have an ImageSprite move 10 pixels to the left every 1000 milliseconds (one second), for example, you would set the Speed property to 10 [pixels], the Interval property to 1000 [milliseconds], the Heading property to 180 [degrees], and the Enabled property to true.

As I said, Speed property is not under consideration since I need to demonstrate how the kinematic formula works

You need extra equations to translate the laws of motion into the coordinate system of the Canvas.

You also need to translate the movie making concept of Frames Per Second into the Ai2 Clock setting of TimerInterval. A good human frame rate is 24 frames per second.

Fit the motion around those two concepts.

Is it too complex to implement? I mean, for interval of 1000 ms it seems to work fine. I tested with a cronometer and finishes in 10 seconds. But the same equation does not hold for interval of 1 ms (smoothly).

I appreciate if any further help is provided

You are probably facing accumulated error and the limitations to how frequently the Clock Timer can actually fire. 20ms is probably as fast as you can get, given the time to run the code in the timer event and the overhead to start it up each cycle.

You can compensate for that, however, by calculating your X values not on how many Clock Timer cycles have fired, but instead on the elapsed Clock1.SysemTime value between when the start gun fired and the current Clock Timer cycle's calculation of Clock1.SystemTime.

That would give you as smooth a movement as your eye could see, if you don't push the Clock too hard.

Thank you! I will take a look

Here's a sample to play with:



sample run
speed_and_distance.aia (3.6 KB)

(I should have named the elaplsedDistance local variable elapsedDistancePX to reflect its units. But life is short and I probably won't be back here.)

Here is a demonstration with my phone and a chronometer for different timer intervals. Both videos were recorded at 30 fps:

1000 ms:
1000ms

500 ms:
500ms

100 ms:
100ms

20 ms:

The blocks are the same in each video, except for Timer Interval value.

Why do 3rd and 4th videos take longer than 1st and 2nd videos? Are the blocks incorrect? Or is the accumulated error?

Both.

Your blocks don't take into account accumulated time versus estimated time, and rely on cycle counting.

Apply my example code.