View to model position scaling

Author: una-ada

js/main.js

@@ -33,7 +33,7 @@ let saturn = new Celestial({
   titan = new Celestial({
     name: "Titan",
     mass: 1.35e23,
-    position: new Point(0, -389), // not to scale
+    position: new Point(0, -1.187e9),
     velocity: new Vector(15.26e3, 0),
     size: 18, // not to scale
   });
@@ -42,3 +42,4 @@ model.scene.push(titan);
 view.loop();
 physics.loop();
 console.log(model);
+window.setTimeout(physics.stop, 100);

js/modules/DOMRenderer.js

@@ -27,22 +27,17 @@ export default class DOMRenderer extends Renderer {
    * @override
    */
   render() {
-    const scene = this.model.scene,
-      bounds = this.bounds,
-      origin = {
-        x: bounds.width / 2,
-        y: bounds.height / 2,
-      };
+    const scene = this.model.scene;
     scene.forEach(
       /** @arg obj {Celestial} */
       (obj) => {
         // Make sure each Celestial has an Element
         const elem = obj.element || this.generateElement(obj),
           // Avoid repeating elem.style a whole bunch.
           style = elem.style,
-          offset = 0 - obj.size / 2;
-        style.top = `${origin.y + obj.position.y + offset}px`;
-        style.left = `${origin.x + obj.position.x + offset}px`;
+          position = this.getPosition(obj);
+        style.left = `${position.x}px`;
+        style.top = `${position.y}px`;
         style.width = `${obj.size}px`;
         style.height = `${obj.size}px`;
       }

js/modules/Physics.js

@@ -31,6 +31,7 @@ export default class Physics {
   static interval = 1e3 / 120;
 
   /*----- Calculation Methods ------------------------------------------------*/
+  /** Update `Celestial#position`s based on `Celestial#velocity` */
   updatePositions() {
     this.model.scene.forEach(
       /** @arg obj {Celestial} */

js/modules/Renderer.js

@@ -6,6 +6,8 @@
 
 /*----- Imports --------------------------------------------------------------*/
 import GameData from "./GameData.js";
+import Celestial from "./Celestial.js";
+import { Point } from "./Utils.js";
 
 /*----- Classes --------------------------------------------------------------*/
 /** @module Renderer Superclass for managing game view. */
@@ -19,6 +21,8 @@ export default class Renderer {
     this.model = model;
     /** @var {boolean} running Should the renderer continue running? */
     this.running = true;
+    /** @var {number} scale Space scale (meters per pixel). */
+    this.scale = 0.3e7;
   }
 
   /*---- Setters and getters -------------------------------------------------*/
@@ -28,6 +32,27 @@ export default class Renderer {
     return { top, left, height, width };
   }
 
+  /*----- Functions ----------------------------------------------------------*/
+  /**
+   * Get the appropriate view position for a Celestial instance.
+   * @param {Celestial} celestial
+   * @returns {Point} View position for the Celestial.
+   */
+  getPosition(celestial) {
+    const bounds = this.bounds,
+      // View origin point (0, 0)
+      origin = new Point(
+        bounds.width / 2,
+        bounds.height / 2
+      ),
+      // View position from scaled Celestial position
+      position = celestial.position.copy().scale(1 / this.scale),
+      // View offset position from Celestial origin
+      offset = celestial.size / 2;
+    // Return offset view position
+    return origin.add(position).subtract(offset);
+  }
+
   /*----- Methods ------------------------------------------------------------*/
   /**
    * Sets the view container

js/modules/Utils.js

@@ -32,13 +32,33 @@ export class Point {
     return this;
   }
   /**
-   * Add another point to this point.
-   * @arg {Point} point A point to add to this point
+   * Add another point or number to this point.
+   * @arg {Point|number} addend A point to add to this point
    * @returns {Point} The updated point.
    */
-  add(point) {
-    this.x += point.x;
-    this.y += point.y;
+  add(addend) {
+    if(typeof addend === "number"){
+      this.x += addend;
+      this.y += addend;
+    } else {
+      this.x += addend.x;
+      this.y += addend.y;
+    }
+    return this;
+  }
+  /**
+   * Subtract another point or number from this point.
+   * @arg {Point|number} subtrahend A point to subtract from this point
+   * @returns {Point} The updated point.
+   */
+  subtract(subtrahend) {
+    if(typeof subtrahend === "number"){
+      this.x -= subtrahend;
+      this.y -= subtrahend;
+    } else {
+      this.x -= subtrahend.x;
+      this.y -= subtrahend.y;
+    }
     return this;
   }
   /**