Spent a bit of time on the rolling circles animation... who said calculus is useless?
Eventually, I figured out how to vary the speed of the circles depending on where they are. So the circles move faster near the bottom and they move slower near the top.
Fittingly enough, I used my TI-84 Plus CE to graph the functions I used and check my work.
Here's a small demo in Javascript that I quickly clacked out from my keyboard:
Now... to figure out how to hide the circles so that they "appear" and "disappear".
Oh -- and here's the source for that demo:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Rolling circle</title>
<meta charset="utf-8" />
</head>
<body>
<canvas style="background-color: dodgerblue;"></canvas>
<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
canvas.width = 320, canvas.height = 240;
var angle = 0;
var ticks = 0;
// var angles = [0, 0.029127, 0.058485, 0.088302, 0.11881];
var angles = [
0,
Math.PI / 12,
Math.PI / 6,
Math.PI / 4,
Math.PI / 3
];
var frames = [0, 5, 10, 15, 20];
function f(x) {
return (Math.PI / 4) * Math.pow(Math.sin(Math.PI * 5 / 48 * x), 2) + (Math.PI / 12);
}
function animate() {
ticks++;
// angle += f((ticks / 9)) / 9;
for (var c = 0; c < 5; c++) {
angles[c] += f((ticks + frames[c]) / 9) / 9;
}
context.clearRect(0, 0, 320, 240);
context.fillStyle = "white";
for (var a = 0; a < 5; a++) {
// draw a circle
var draw_x = 160 + Math.sin(angles[a]) * 40;
var draw_y = 110 - Math.cos(angles[a]) * 40;
context.beginPath();
context.arc(draw_x, draw_y, 3, 0, Math.PI * 2);
context.closePath();
context.fill();
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</body>
</html>
Edit: figured out how to hide the circles!
Yes, I am using var in Javascript in 2020. There is a difference between var and let (block scope and all that) but it's subtle and "var" is just in my muscle memory. That's just what happens when everything I learned about programmming comes from outdated books from the public library. (but they're good books, nonetheless.)
Now... time to port it to C... and hope that unlike the real thing, this version of Windoze Update doesn't crash the calculator...
Edit #2: It's done!
Download link (pending approval): http://ceme.tech/DL2097
Source code and a readme are included in the package.