Examples - Add Dirty Flag Rendering

lib/game/Game.dart

@@ -11,7 +11,7 @@ class Game {
 
   double _oscill = 0.1;
   bool _oscillDir = true; // oscillate upwards (true) or downwards (false)
-  double _OSCILLSPEED = 0.05;
+  double _OSCILLSPEED = 0.1;
   bool _fwd = true;
 
   Game(CanvasElement this.canvas) {

lib/src/05_DirtyFlagRendering.dart

@@ -0,0 +1,57 @@
+import 'dart:html';
+
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+
+class DirtyFlagRender implements LoopExample {
+  static final double MS_PER_UPDATE = 1000.0;
+  static final double SAFE_GUARD = 500.0;
+  Stopwatch elapsed = new Stopwatch();
+  double lag = 0.0;
+  Game game;
+  num id;
+  bool dirty = true;
+
+  DirtyFlagRender(this.game) {
+     elapsed.start();
+     window.requestAnimationFrame(eventloop);
+  }
+
+  void eventloop(num time) {
+    lag += elapsed.elapsedMilliseconds;
+    elapsed.reset();
+
+    while (lag >= MS_PER_UPDATE && elapsed.elapsedMilliseconds < SAFE_GUARD) {
+      update();
+      lag -= MS_PER_UPDATE;
+    }
+    if(dirty) render(lag / MS_PER_UPDATE);
+    id = window.requestAnimationFrame(eventloop);
+
+  }
+
+  void update() {
+    game.update();
+    // This is for demonstration purposes. It will set the dirty flag once every
+    // update. Usually should be set this deeper in the individual logic units
+    // where a change happens and moved through the program from there.
+    dirty = true;
+  }
+
+  void render(double interp) {
+    game.draw(interp);
+    dirty = false;
+  }
+
+  // Starting and stopping the loop for the example page
+  void stop() {
+    elapsed.stop();
+    window.cancelAnimationFrame(id);
+  }
+
+  void start() {
+    elapsed.start();
+    elapsed.reset();
+    window.requestAnimationFrame(eventloop);
+  }
+}