Space with an Object

Next part of this tutorial is playing with non linearly moving objects. First the styles have been changed a bit, and separated into another css file. I repeat the Cancas object in case you have forgotten it since before the break. It is unchanged, as I promised.

Example F.17. myotherstyles.css
/* myotherstyles.css */

#universe { 
	border: 2px solid red;
	margin: auto;
}

Example F.18. CanvasObject.js
'use strict';

let Canvas = {
    init(canvasId, color) {     // note new syntax
        this.canvas = $(canvasId);
        this.context = this.canvas.getContext("2d");
        this.color = color;
        this.context.fillStyle = color;
        this.context.fillRect(0, 0, this.canvas.width, 
                              this.canvas.height);
    },
    getContext() {
        return this.context;
    },
    clear() {
        this.context.clearRect(0, 0, this.canvas.width, 
                               this.canvas.height);
    },
    prep() {
        this.context.fillStyle = this.color;
        this.context.fillRect(0, 0, this.canvas.width, 
                              this.canvas.height);
    },
    getHeight() {
        return this.canvas.height;
    },
    getWidth() {
        return this.canvas.width;
    }
}

Example F.19. universal0.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>
            'use strict';
            let SO = {
                init(canvas, x, y, r, dg, dt, color, ox, oy, oc) {
                    this.canvas = canvas;
                    this.x = x;                     // x coordinate
                    this.y = y;                     // y coordinate
                    this.r = r;                     // radius
                    this.dg = dg;                   // angular orbital position in deg
                    this.dt = dt;                   // orbital speed in deg
                    this.color = color;
                    this.ox = ox;                   // orbital x distance
                    this.oy = oy;                   // orbital y distance
                    this.oc = oc;                   // orbital central object 
                    this.draw();
                },
                getX() {
                    return this.x;
                },
                getY() {
                    return this.y;
                },
                getR() {
                    return this.r;
                },
                draw() {
                    this.canvas.getContext().beginPath();
                    this.canvas.getContext().fillStyle = this.color;
                    this.canvas.getContext().arc(this.x, this.y, this.r,
                                                 0, Math.PI * 2,
                                                 true);
                    this.canvas.getContext().fill();
                    this.canvas.getContext().closePath();
                },
                move() {
                    if (this.oc) {                  // immobile if no central object
                        let radians = this.dg * (Math.PI / 180);
                        this.x = this.oc.x + this.ox * Math.cos(radians);
                        this.y = this.oc.y + this.oy * Math.sin(radians);
                        this.dg += this.dt;
                    }
                }
            }
            
            let motor = function (cv, obs) {
                setInterval(function() {
                    cv.clear();
                    cv.prep();
                    let i = 0;
                    for (let obj of obs) {
                        obj.move();                 // iterate over
                        obj.draw();                 // all array values
                        console.log(i++);
                    }
                }, 10);
            }
            
            let initialize = function () {
                let i = 0;
                let ufos = [];
                let canvas = Object.create(Canvas);
                canvas.init('universe', '#000');
                
                let ufo = Object.create(SO);
                ufo.init(canvas, 
                        canvas.getWidth()/2, canvas.getHeight()/2, 5, 
                        0, 0, '#ff8', 
                        0, 0, false);
                ufos.push(ufo);

                motor(canvas, ufos);
            }

            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!