Add fan and bouncing ball in JavaScript

js/bouncing_ball.html

+<canvas id="stage"></canvas>
+<script src="graphics.js"></script>
+<script>
+    (async function () {
+        x = g.getmaxx() / 2;
+        y = g.getmaxy() / 2;
+        up = 0;
+        left = 0;
+        while (true) {
+            if (y >= g.getmaxy() - 30)
+                up = 1;
+            if (y <= 30)
+                up = 0;
+
+            if (x >= g.getmaxx() - 30)
+                left = 1;
+            if (x <= 30)
+                left = 0;
+
+            g.circle(x, y, 30);
+
+            /* prepare for next  frame */
+            await g.delay(15);
+            g.cleardevice();
+
+            if (up)
+                y = y - 5;
+            else
+                y = y + 5;
+
+            if (left)
+                x = x - 5;
+            else
+                x = x + 5;
+        }
+    })();
+
+</script>

js/fan.html

+<canvas id="stage"></canvas>
+<script src="graphics.js"></script>
+<script>
+    function rotatex(x, y, angle, pivotx, pivoty) {
+        return x * Math.cos(angle) - y * Math.sin(angle) + pivotx * (1 - Math.cos(angle)) + pivoty * (Math.sin(angle));
+    }
+    function rotatey(x, y, angle, pivotx, pivoty) {
+        return x * Math.sin(angle) + y * Math.cos(angle) + pivoty * (1 - Math.cos(angle)) - pivotx * (Math.sin(angle));
+    }
+    (async function () {
+        var cx, cy;
+        var l1x1, l1y1, l1x2, l1y2;
+        var l1angle = 120 / 180.0 * Math.PI;
+        var l2angle = 240 / 180.0 * Math.PI;
+        var rotate_angle = 2 / 180.0 * Math.PI;
+        var i= 0;
+
+        cx = g.getmaxx() / 2;
+        cy = g.getmaxy() / 2;
+
+        l1x1 = cx;
+        l1y1 = cy - 20;
+        l1x2 = cx;
+        l1y2 = cy - 90;
+
+        while (true) {
+            i++;
+            if (i >= 60) {
+                l1x1 = cx;
+                l1y1 = cy - 20;
+                l1x2 = cx;
+                l1y2 = cy - 90;
+                i = 0;
+
+            }
+
+            g.circle(cx, cy, 20);
+            g.line(l1x1, l1y1, l1x2,  l1y2);
+
+            g.line(
+                rotatex(l1x1, l1y1, l1angle, cx, cy),
+                rotatey(l1x1, l1y1, l1angle, cx, cy),
+                rotatex(l1x2, l1y2, l1angle, cx, cy),
+                rotatey(l1x2, l1y2, l1angle, cx, cy)
+            );
+
+            g.line(
+                rotatex(l1x1, l1y1, l2angle, cx, cy),
+                rotatey(l1x1, l1y1, l2angle, cx, cy),
+                rotatex(l1x2, l1y2, l2angle, cx, cy),
+                rotatey(l1x2, l1y2, l2angle, cx, cy)
+            );
+
+            /* prepare for next  frame */
+            await g.delay(15);
+            g.cleardevice();
+
+            l1x1 = rotatex(l1x1, l1y1, rotate_angle, cx, cy);
+            l1y1 = rotatey(l1x1, l1y1, rotate_angle, cx, cy);
+            l1x2 = rotatex(l1x2, l1y2, rotate_angle, cx, cy);
+            l1y2 = rotatey(l1x2, l1y2, rotate_angle, cx, cy);
+
+        }
+    })();
+
+</script>

js/graphics.js

+document.body.setAttribute("style", "margin: 0;");
+var canvas = document.getElementById('stage');
+
+canvas.width = window.innerWidth
+    || document.documentElement.clientWidth
+    || document.body.clientWidth;
+canvas.height = window.innerHeight
+    || document.documentElement.clientHeight
+    || document.body.clientHeight;
+var g = canvas.getContext("2d");
+
+g.getmaxx = function () { return canvas.width; };
+g.getmaxy = function () { return canvas.height; };
+
+g.putpixel = function (x, y) {
+    g.fillRect(x, y, 1, 1);
+};
+
+g.line = function (x1, y1, x2, y2) {
+    g.beginPath();
+    g.moveTo(x1, y1);
+    g.lineTo(x2, y2);
+    g.stroke();
+};
+
+g.rectangle = function (x1, y1, x2, y2) {
+    g.strokeRect(x1, y1, x2-x1, y2-y1);
+};
+
+g.circle = function (cx, cy, r) {
+    g.beginPath();
+    g.arc(cx, cy, r, 0, 2*Math.PI);
+    g.stroke();
+};
+
+g.cleardevice = function () {
+    g.clearRect(0,0,g.getmaxx(),g.getmaxy());
+};
+g.delay = function (ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }