Lloyd's Weekend STEAM Project Using LiveCode

It was Friday around 5 pm after a long day of meetings and I again had the urge to do something creative as I ended the week. I had seen a compelling video on the Physics & Astrophysics facebook page a few days earlier that captured my attention and the thought occurred to me that I could recreate it with LiveCode. That became my weekend project. I think this is a nice example of a small STEAM (science, technology, engineering, arts, and mathematics) project. I'm a big advocate of adding the arts to STEM initiatives because, as humans, we yearn for beauty and there is much beauty in mathematics and science.

Here's an animation of my project:

I titled the project "circle within circle" because that's exactly what it looks like. However, amazingly, the red marbles are moving in straight lines, not curves. Here is a second animation to prove it:

I See the "A," But Where is the Rest of "STEM"?

The challenge to creating this project - and what was most fun - was figuring out where each marble should start and end. The circle has a radius of 200 pixels with its center located at the screen location of 400,300. (It's important to remember that the 0,0 origin of the computer screen is not the center of the screen, but the top left corner. And, unlike the traditional cartesian coordinate system, the vertical y-axis is positive in the downward direction.) It's easy enough to figure out where the marbles should start and end on the vertical and horizontal lines, but what about those at the various angles, such as 45 degrees? Ah, this calls for a quick refresher of sine and cosine. If just the mention of these two math concepts brings back horror-filled days from high school geometry, then it is high time you revisit them and see them instead as things of beauty. Here's a nice illustration of what they are all about:

As you can see, the cosine is simply the horizontal distance from the center of the circle to the point on the circle matching a given angle. The sine is just the vertical distance. Notice the right triangle that gets formed with the hypotenuse shown in red depicting the angle. We can use the good 'ol Pythagorean Theorem - a² + b² = c² to figure out the lengths of the horizontal and vertical lines. And voilà, we have the x and y coordinates.  Most people are a little surprised that a 45 degree angle does not produce x and y coordinators of half the distance of the radius, but instead the distance is .707 of the radius.

Here's an illustration of my LiveCode screen that shows how to figure the starting point for the marble at the 45 degree mark:

Using a radius of 200, the length of the x and y (horizontal and vertical) is 141.4 (i.e. 200 X .707). Figuring the x coordinate is straightforward: 400 + 141.4, or 541 rounded to the whole number. Calculating the y coordinate is a little trickier because of that pesky detail of the 0,0 origin being in the top left corner of the screen. We actually need to figure out how to much to add to the top boundary of the circle, which is 100. So, we have to subtract 141.4 from 200 to get 58.6. We add 58.6 to 100 to get a y coordinate of 159 (again rounded to the nearest whole number).

I then had to use the same logic to figure out all of the other locations for the remaining marbles given their respective angles. Yes, lots of great math going on here! 

My use of a computer programming language (i.e. LiveCode) is the technology part of my STEAM project. And, I'll admit I don't have any engineering or science components yet, but I'm sure you could come up with a few ideas. What comes to my mind is how an internal combustion engine works - the pistons are going in straight lines, which then turn the crankshaft:

But It Doesn't Look Quite Right

Now, you might say: "Lloyd, those marbles aren't exactly creating a circular motion. There is a bit of a hump. And I took a look at the video link you provided above - great background music, by the way - and its animation looked like a perfect circle." Alas, you are correct, and I'm a little befuddled as to how to smooth out the hump. I thought it might have something to do with the timings, but I don't think so. Of course, you might see immediately what needs to be done to make the marbles seemingly move in a perfect circle, so do remember to email me after you figure it out. (Below is my code to help you.)

But hey, this was only a weekend project and I think there is just as much beauty in my imperfect version. 

   put 2 into varTotalSeconds  
   put .25 into varHoldSeconds  
   repeat until the mouseclick  
    //motion 1  
    move graphic "ball1" to 400,500 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball2" to 324,486 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball3" to 258.6,441 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball4" to 216,376 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball5" to 200,300 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball6" to 216,224 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball7" to 258.6,158.6 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball8" to 324,116 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    //motion 2        
    move graphic "ball1" to 400,100 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball2" to 476,116 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball3" to 541,158.6 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball4" to 584,224 in varTotalSeconds seconds without waiting     
    wait varHoldSeconds second  
    move graphic "ball5" to 600,300 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball6" to 584,376 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball7" to 541,441 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
    move graphic "ball8" to 476,484 in varTotalSeconds seconds without waiting  
    wait varHoldSeconds second  
   end repeat