How to properly move stuff

[STxAxTIC]

Hi folks.

I keep teasing this concept, and occasionally quietly solve this-or-that problem using these methods without really explaining things, so it's finally time for a bare-bones demo of... drum roll please... parameterized motion.

Punchline first: If you see what's going on here, you will know how to move anything on screen, to anywhere, in any way you want, in full generality. This code ignores rotations, there is plenty to study with just translations.

When you run the code below, what you see, simply, is a circle moving from a beginning point A to an ending point B. The motion is of course not linear. The moving ball is doing two things:
(i) Trying to move straight in a straight line from A to B, using a speed function governed by the hyperbolic tangent. It starts slow, gets quick, and ends slow.
(ii) Trying to wiggle in a direction perpendicular to the motion, using wacky sine function stuff.

The combination of (i) and (ii) is what you see on screen. While it's running, even right in the middle of the motion, click+drag to move the target point around, and all of the motion adjusts seamlessly. Once you see the power and ease of this, you can imagine that literally *any* kind of motion can be tuned into this thing.

Play with some numbers and see how it applies to your projects:

Code: QB64: [Select]

1. OPTION _EXPLICIT
2.  
3. SCREEN _NEWIMAGE(800, 600, 32)
4.  
5. DIM pi AS DOUBLE
6. pi = 4 * ATN(1)
7.  
8. TYPE Vector
9.     x AS DOUBLE
10.     y AS DOUBLE
11. END TYPE
12.  
13. DIM SHARED PointA AS Vector
14. DIM SHARED PointB AS Vector
15. PointA.x = -200
16. PointA.y = -100
17. PointB.x = 200
18. PointB.y = 100
19.  
20. DIM SHARED Displacement AS Vector
21. DIM SHARED Tangential AS Vector
22. DIM SHARED Player AS Vector
23.  
24. CALL SetMotion
25.  
26. ' Main loop
27. DIM t AS DOUBLE
28. DIM q AS DOUBLE
29. DIM p AS DOUBLE
30. DO
31.     FOR t = 0 TO 1 STEP .01
32.         q = -4 * (1 - 2 * t)
33.         p = .5 * (1 + tanh(q)) ' Goes from 0 to 1.
34.  
35.         DO WHILE _MOUSEINPUT
36.             IF (_MOUSEBUTTON(1)) THEN
37.                 PointB.x = -_WIDTH / 2 + _MOUSEX
38.                 PointB.y = _HEIGHT / 2 - _MOUSEY
39.                 CALL SetMotion
40.             END IF
41.         LOOP
42.  
43.         Player.x = PointA.x + Displacement.x * (p) + Tangential.x * (40 * SIN(2 * pi * p))
44.         Player.y = PointA.y + Displacement.y * (p) + Tangential.y * (40 * SIN(5 * pi * p))
45.  
46.         'CLS
47.         LINE (0, 0)-(_WIDTH, _HEIGHT), _RGBA(0, 0, 0, 30), BF
48.         LOCATE 1, 1: PRINT "Left-Click+Drag to move target point."
49.         CALL ccircle(PointA.x, PointA.y, 20, _RGBA(255, 0, 0, 255))
50.         CALL ccircle(Player.x, Player.y, 20, _RGBA(0, 255, 0, 255))
51.         CALL ccircle(PointB.x, PointB.y, 20, _RGBA(0, 0, 255, 255))
52.         _DISPLAY
53.         _LIMIT 30
54.     NEXT
55.  
56. LOOP
57.  
58. SUB SetMotion
59.     DIM mag AS DOUBLE
60.     Displacement.x = PointB.x - PointA.x
61.     Displacement.y = PointB.y - PointA.y
62.     Tangential.x = -Displacement.y
63.     Tangential.y = Displacement.x
64.     mag = SQR(Tangential.x ^ 2 + Tangential.y ^ 2)
65.     Tangential.x = Tangential.x / mag
66.     Tangential.y = Tangential.y / mag
67. END SUB
68.  
69. SUB ccircle (x1 AS DOUBLE, y1 AS DOUBLE, rad AS DOUBLE, col AS _UNSIGNED LONG)
70.     CIRCLE (_WIDTH / 2 + x1, -y1 + _HEIGHT / 2), rad, col
71. END SUB
72.  
73. FUNCTION tanh (x AS DOUBLE)
74.     tanh = (EXP(2 * x) - 1) / (EXP(2 * x) + 1)
75. END FUNCTION

[_vince]

Nice, welcome to the "I've used tanh not for the sake of using tanh" club!

Also, people may want things moving at a constant velocity magnitude

[OldMoses]

I would dearly love to get my head wrapped around parametrics, as it looks like something I'm desperately trying to do, but my Algebra I teacher spent most of his time throwing erasers at me. ;)