Using game loop instead of queueAnimationUpdate

sim/state/color.ts

@@ -34,9 +34,6 @@ namespace pxsim {
             this.color = color;
             this.changed = true;
             this.valueChanged = true;
-
-            runtime.queueDisplayUpdate();
-
         }
 
         getValue() {

sim/state/gyro.ts

@@ -22,20 +22,14 @@ namespace pxsim {
         setAngle(angle: number) {
             if (this.angle != angle) {
                 this.angle = angle;
-                this.changed = true;
-                this.valueChanged = true;
-
-                runtime.queueDisplayUpdate();
+                this.setChangedState();
             }
         }
 
         setRate(rate: number) {
             if (this.rate != rate) {
                 this.rate = rate;
-                this.changed = true;
-                this.valueChanged = true;
-
-                runtime.queueDisplayUpdate();
+                this.setChangedState();
             }
         }
 

sim/state/light.ts

@@ -12,8 +12,9 @@ namespace pxsim {
 namespace pxsim.output {
 
     export function setLights(pattern: number) {
-        const lightState = ev3board().getBrickNode().lightState;
+        const brickState = ev3board().getBrickNode();
+        const lightState = brickState.lightState;
         lightState.lightPattern = pattern;
-        runtime.queueDisplayUpdate();
+        brickState.setChangedState();
     }
 }

sim/state/motors.ts

@@ -1,9 +1,9 @@
 namespace pxsim {
 
-    export class MotorNode extends BaseNode {
+    export abstract class MotorNode extends BaseNode {
         isOutput = true;
 
-        public angle: number = 0;
+        protected angle: number = 0;
 
         private speed: number;
         private large: boolean;
@@ -18,7 +18,8 @@ namespace pxsim {
             if (this.speed != speed) {
                 this.speed = speed;
                 this.changed = true;
-                runtime.queueDisplayUpdate();
+                this.setChangedState();
+                this.playMotorAnimation();
             }
         }
 
@@ -50,8 +51,14 @@ namespace pxsim {
 
         start() {
             // TODO: implement
-            runtime.queueDisplayUpdate();
+            this.setChangedState();
         }
+
+        public getAngle() {
+            return this.angle;
+        }
+
+        protected abstract playMotorAnimation(): void;
     }
 
     export class MediumMotorNode extends MotorNode {
@@ -60,6 +67,32 @@ namespace pxsim {
         constructor(port: number) {
             super(port);
         }
+
+        protected lastMotorAnimationId: number;
+        protected playMotorAnimation() {
+            // Max medium motor RPM is 250 according to http://www.cs.scranton.edu/~bi/2015s-html/cs358/EV3-Motor-Guide.docx
+            const rotationsPerMinute = 250; // 250 rpm at speed 100
+            const rotationsPerSecond = rotationsPerMinute / 60;
+            const fps = GAME_LOOP_FPS;
+            const rotationsPerFrame = rotationsPerSecond / fps;
+            let now;
+            let then = Date.now();
+            let interval = 1000 / fps;
+            let delta;
+            let that = this;
+            function draw() {
+                that.lastMotorAnimationId = requestAnimationFrame(draw);
+                now = Date.now();
+                delta = now - then;
+                if (delta > interval) {
+                    then = now - (delta % interval);
+                    const rotations = that.getSpeed() / 100 * rotationsPerFrame;
+                    const angle = rotations * 360;
+                    that.angle += angle;
+                }
+            }
+            draw();
+        }
     }
 
     export class LargeMotorNode extends MotorNode {
@@ -69,5 +102,30 @@ namespace pxsim {
             super(port);
         }
 
+        protected lastMotorAnimationId: number;
+        protected playMotorAnimation() {
+            // Max medium motor RPM is 170 according to http://www.cs.scranton.edu/~bi/2015s-html/cs358/EV3-Motor-Guide.docx
+            const rotationsPerMinute = 170; // 170 rpm at speed 100
+            const rotationsPerSecond = rotationsPerMinute / 60;
+            const fps = GAME_LOOP_FPS;
+            const rotationsPerFrame = rotationsPerSecond / fps;
+            let now;
+            let then = Date.now();
+            let interval = 1000 / fps;
+            let delta;
+            let that = this;
+            function draw() {
+                that.lastMotorAnimationId = requestAnimationFrame(draw);
+                now = Date.now();
+                delta = now - then;
+                if (delta > interval) {
+                    then = now - (delta % interval);
+                    const rotations = that.getSpeed() / 100 * rotationsPerFrame;
+                    const angle = rotations * 360;
+                    that.angle += angle;
+                }
+            }
+            draw();
+        }
     }
 }

sim/state/nodeTypes.ts

@@ -32,5 +32,9 @@ namespace pxsim {
             this.changed = false;
             return res;
         }
+
+        setChangedState() {
+            this.changed = true;
+        }
     }
 }

sim/state/screen.ts

@@ -7,7 +7,7 @@ namespace pxsim {
 
 
     export class EV3ScreenState {
-        changed: boolean
+        changed: boolean = true;
         points: Uint8Array;
         constructor() {
             this.points = new Uint8Array(visuals.SCREEN_WIDTH * visuals.SCREEN_HEIGHT)

sim/state/sensor.ts

@@ -43,6 +43,11 @@ namespace pxsim {
             this.valueChanged = false;
             return res;
         }
+
+        setChangedState() {
+            this.changed = true;
+            this.valueChanged = false;
+        }
     }
 
     export class AnalogSensorNode extends SensorNode {

sim/state/ultrasonic.ts

@@ -17,10 +17,7 @@ namespace pxsim {
         setDistance(distance: number) {
             if (this.distance != distance) {
                 this.distance = distance;
-                this.changed = true;
-                this.valueChanged = true;
-
-                runtime.queueDisplayUpdate();
+                this.setChangedState();
             }
         }