Space Movie with Start/Stop

Add other orbital objects. Add start/stop.

Example F.21. universal2.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Universe</title>
        <link rel='stylesheet' href='css/myotherstyles.css'/>
        <script src='js/nQuery.js'></script>
        <script src='js/CanvasObject.js'></script>
        <script src='js/SObject.js'></script>
        <script>
            'use strict';
            let motor = function (cv, obs) {
                if(idle) {                      // if idle run it
                    go = setInterval(function() {
                        cv.clear();
                        cv.prep();
                        for (let obj of obs) {
                            obj.move();                 // iterate over
                            obj.draw();                 // all array values
                        }
                    }, 20);
                    idle = false;
                } else {
                    clearInterval(go);          // running, stop it
                    idle = true;
                }
            }
            
            let initialize = function () {
                let i = 0;
                let ufos = [];
                let canvas = Object.create(Canvas);
                canvas.init('universe', '#000');
                
                let co = Object.create(SO);
                co.init(canvas, 
                        canvas.getWidth()/2, canvas.getHeight()/2, 5, 
                        0, 0, '#ff8', 
                        0, 0, false);
                ufos.push(co);

                let xo = Object.create(SO);
                xo.init(canvas,  
                        20, 20, 4, 
                        20, 1, '#add8e6', 
                        100, 100, co);
                ufos.push(xo);

                let yo = Object.create(SO);
                yo.init(canvas,  
                        20, 20, 2, 
                        270, 4, '#ff8', 
                        20, 20, xo);
                ufos.push(yo);
            
                xo = Object.create(SO);
                xo.init(canvas, 20, 20, 3, 
                        50, 1, '#f64', 
                        150, 150, co);
                ufos.push(xo);

                xo = Object.create(SO);
                xo.init(canvas,  
                        20, 20, 16, 
                        70, .5, '#a33', 
                        250, 250, co);
                ufos.push(xo);

                let u = $('universe');
                u.addEventListener('click', motor, false);
                motor(canvas, ufos, idle);
            }
            
            let idle = true;                // switch start/stop animation
            let go;                         // animation name
            window.addEventListener('load', initialize, false);
        </script>
    </head>
    <body>
        <section>
            <canvas id='universe' width='987' height='610'>
                If you see this text long enough to read it,
                your browser sucks.
            </canvas>
        </section>
    </body>
</html>

Test it!