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);
+  }
+}

web/index.html

@@ -14,11 +14,7 @@
 <div id="while_loop"></div>
 <div id="variable_timestep"></div>
 <div id="fixed_variable"></div>
-<!--<button id="basic_start">start</button>-->
-<!--<button id="basic_stop">stop</button>-->
-<!--<button id="basic_reset">reset</button>-->
-<!--<button id="basic_plus">+</button>-->
-<!--<button id="basic_minus">-</button>-->
+<div id="dirty_flag"></div>
 
 </body>
 </html>

web/main.dart

@@ -4,11 +4,13 @@ import 'package:browserloop/game/LoopExample.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';
 
 List<Example> examples = [
   Example("While Loop Example", "#while_loop"),
   Example("Fixed Update, Variable Render", "#fixed_variable"),
-  Example("Variable Timestep", "#variable_timestep")
+  Example("Variable Timestep", "#variable_timestep"),
+  Example("Variable Render with Dirty Flag", "#dirty_flag")
 ];
 LoopExample active;
 
@@ -91,6 +93,9 @@ void activate(MouseEvent e) {
         case "#variable_timestep":
           ex.loop = new VariableTimestep(new Game(ex.canvas));
           break;
+        case "#dirty_flag":
+          ex.loop = new DirtyFlagRender(new Game(ex.canvas));
+          break;
       }
       if (ex.canvas != ex.loop.game.canvas) ex.loop.game.canvas = ex.canvas;
       querySelector(ex.query).append(new ButtonElement()