<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>