Allow Setting Color Change Speed for Variable Timestep

lib/game/Game.dart

@@ -21,8 +21,7 @@ class Game {
   }
 
   // In-World Logic Updates
-  void update([num speed]) {
-    print(speed);
+  void update([int speed]) {
     Point next = isRandom ? nextPosRandom() : nextPosOrdered(_curPos);
     if (_curPos.x < 0) _curPos = Point(0, _curPos.y);
     Color newColor = isRandom ? randomColor() : nextColor(

lib/src/03-VariableTimestep.dart

@@ -1,4 +1,5 @@
 import 'dart:html';
+
 import 'package:browserloop/game/Game.dart';
 import 'package:browserloop/game/LoopExample.dart';
 
@@ -7,7 +8,8 @@ import 'package:browserloop/game/LoopExample.dart';
 /// Perhaps one of the most widely used loops
 /// in games for many years. Many game frameworks
 /// make use of a loop similar to this.
-class VariableTimestep implements LoopExample {
+class VariableTimestep implements LoopExample, VariableUpdates {
+  double _COLORSWITCHSPEED = 1.0;
   Game game;
   num id;
   Stopwatch elapsed = new Stopwatch();
@@ -16,14 +18,21 @@ class VariableTimestep implements LoopExample {
 
   void eventloop(num time) {
     int dt = elapsed.elapsedMilliseconds;
-    game.update(dt);
+    
+    // Multiply by dt, so that the color switching speed is the same,
+    // regardless of the time it took to compute this update
+    int colorSwitchspeed = (_COLORSWITCHSPEED / 10 * dt).toInt();
+
+    game.update(colorSwitchspeed);
     game.draw();
     elapsed.reset();
 
     id = window.requestAnimationFrame(eventloop);
   }
 
-  // Starting and stopping the loop for the example page
+
+  // CONTROLS ON THE EXAMPLE PAGE
+  // NOT NECESSARY FOR LOOP ITSELF
   void stop() {
     elapsed.stop();
     window.cancelAnimationFrame(id);
@@ -34,4 +43,9 @@ class VariableTimestep implements LoopExample {
     elapsed.reset();
     window.requestAnimationFrame(eventloop);
   }
+
+  @override
+  void setUpdates(double updateRate) {
+    _COLORSWITCHSPEED = 1000 / updateRate;
+  }
 }

web/main.dart

@@ -1,9 +1,10 @@
 import 'dart:html';
+
 import 'package:browserloop/game/Game.dart';
 import 'package:browserloop/game/LoopExample.dart';
+import 'package:browserloop/src/02-AnimationFrameWhile.dart';
 import 'package:browserloop/src/03-VariableTimestep.dart';
 import 'package:browserloop/src/04-FixedLoopVariableRender.dart';
-import 'package:browserloop/src/02-AnimationFrameWhile.dart';
 import 'package:browserloop/src/05_DirtyFlagRendering.dart';
 
 CanvasElement baseCanvas = new CanvasElement(width: 480, height: 480);
@@ -135,7 +136,7 @@ void addControls(Example ex) {
       })));
 
   // Don't add controls which don't work anyways (for simple examples)
-  if (examples.indexOf(ex) <= 1) return;
+  if (examples.indexOf(ex) <= 0) return;
   VariableUpdates loop = (ex.loop as VariableUpdates);
 
   // Update Speed Slider
@@ -147,13 +148,10 @@ void addControls(Example ex) {
       ..id = "update_speed"
       ..min = "1"
       ..max = "50"
-      ..value = "3"
+      ..value = "1"
       ..step = "1"
       ..onInput.listen((Event e) {
-        loop.MS_PER_UPDATE =
-            (1000 / int.parse((e.target as InputElement).value));
+        loop.setUpdates(1000 / int.parse((e.target as InputElement).value));
       }));
   //    querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
-//    querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
-//    querySelector('#minus').onClick.listen((e) => _changeGrid(5));
 }