Initial Source Commit

lib/game/Game.dart

@@ -0,0 +1,64 @@
+import 'dart:html';
+
+class Game {
+  List<List<Color>> grid;
+  CanvasElement canvas;
+  CanvasRenderingContext2D ctx;
+
+  double _oscill = 0.0;
+  bool _fwd = true;
+
+  Game(CanvasElement this.canvas) {
+    grid = buildGrid(5,5, new Color(255, 100, 255));
+    ctx = this.canvas.getContext('2d');
+  }
+
+  void update([num dt]) {}
+
+  void draw([num interp]) {
+//    CanvasRenderingContext2D ctx = this.canvas.getContext('2d');
+//  print(grid.toString());
+    int brickW = (canvas.width ~/ grid[0].length);
+    int brickH = (canvas.height ~/ grid.length);
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for(int y=0;y<grid.length;y++) {
+      for(int x=0;x<grid[y].length;x++) {
+        Color col = grid[y][x];
+        ctx.setFillColorRgb(col.r, col.g, col.b);
+        ctx.fillRect(x*brickW, y*brickH, brickW, brickH);
+      }
+    }
+  }
+
+  Color _oscillate(Color) {
+
+  }
+
+  List<List<Color>> buildGrid(int w, int h, Color col) {
+    List<List<Color>> grid = new List(h);
+
+
+    for(int y = 0; y< h; y++) {
+      grid[y] = new List(w);
+      for(int x = 0; x< w; x++) {
+        grid[y][x] = col;
+      }
+    }
+    return grid;
+  }
+}
+
+class Color {
+  final int r;
+  final int g;
+  final int b;
+
+  const Color(this.r, this.g, this.b);
+
+}
+
+// Create 2d array
+// fill with random colors
+// cycle colors
+// set one color to random new one

lib/game/LoopExample.dart

@@ -0,0 +1,8 @@
+import 'package:browserloop/game/Game.dart';
+
+abstract class LoopExample{
+  Game game;
+
+  void stop() {}
+  void start() {}
+}

lib/src/00-oldcode.dart

@@ -0,0 +1,64 @@
+import 'dart:html' as html;
+import 'dart:math' as math;
+
+html.CanvasRenderingContext2D ctx;
+html.CanvasElement el;
+
+math.Random rng = new math.Random();
+int GRIDNUM = 10;
+int animID = 0;
+
+// These are the functions to start the animation and stop the animation.
+// (They are connected to the start/stop buttons in the demo setup.)
+var _stop = () => html.window.cancelAnimationFrame(animID);
+var _start = () => html.window.requestAnimationFrame(eventloop);
+
+// This is what ticks every frame of the animation.
+void eventloop(currentTime) {
+  print(currentTime.toString());
+  ctx.setFillColorRgb(rng.nextInt(255), rng.nextInt(255), rng.nextInt(255));
+  int BRICKSIZE = (el.width ~/ GRIDNUM);
+  int x = rng.nextInt(GRIDNUM) * BRICKSIZE;
+  int y = rng.nextInt(GRIDNUM) * BRICKSIZE;
+  ctx.fillRect(x, y, (BRICKSIZE), (BRICKSIZE));
+
+  animID = html.window.requestAnimationFrame(
+      eventloop); // recursive call to our eventloop - calls it forever as soon as browser is willing to give us his time
+}
+
+void main() {
+  _demoSetup();
+}
+
+//buttons and canvas setup
+void _demoSetup() {
+  el = new html.CanvasElement(width: 480, height: 480);
+  html.querySelector('#basic_output').append(el);
+  ctx = el.getContext('2d');
+  var _clear = () {
+    _stop();
+    ctx.setFillColorRgb(rng.nextInt(255), rng.nextInt(255), rng.nextInt(255));
+    ctx.fillRect(0, 0, el.width, el.height);
+    ctx.setFillColorRgb(rng.nextInt(255), rng.nextInt(255), rng.nextInt(255));
+  };
+  var _changeGrid = (int delta) {
+      _clear();
+      int newgrid = GRIDNUM + delta;
+      GRIDNUM = (newgrid == 0) ? GRIDNUM : newgrid;
+      _start();
+  };
+  _clear();
+
+  html.querySelector('#basic_start').onClick.listen((e) {
+    print('started');
+    _stop();
+    _start();
+  });
+  html.querySelector('#basic_stop').onClick.listen((e) => _stop());
+  html
+      .querySelector('#basic_reset')
+      .onClick
+      .listen((e) => _clear());
+  html.querySelector('#basic_plus').onClick.listen((e) => _changeGrid(-5));
+  html.querySelector('#basic_minus').onClick.listen((e) => _changeGrid(5));
+}

lib/src/01-WhileLoop.dart

@@ -0,0 +1,31 @@
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+
+/// The most basic update loop possible.
+///
+/// Best not to use this loop since it has a tendency to
+/// crash your browser and not load correctly at all.
+/// The way to get this to run would be the setInterval method
+/// simple is either through setInterval in Javascript:
+/// https://www.w3schools.com/howto/howto_js_animate.asp
+/// or through the Timer API in Dart, especially
+/// with Timer.periodic(16, callbackFunction);
+/// To see how I got it running for the example,
+/// see file 02-AnimationFrameWhile.dart
+class WhileLoop implements LoopExample {
+  Game game;
+
+  WhileLoop(Game this.game) {
+    eventloop();
+  }
+
+  void eventloop() {
+    while(true) {
+      game.update();
+    }
+  }
+
+  void update() {
+    print("i am updating");
+  }
+}

lib/src/02-AnimationFrameWhile.dart

@@ -0,0 +1,32 @@
+import 'dart:html';
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+
+/// The most basic update loop possible.
+///
+/// Note that this is technically cheating since it is using
+/// animationFrames to improve browser performance for the examples in the
+/// blog post. The real, actual simplest code is in file 01-WhileLoop.dart
+class WhileLoop implements LoopExample {
+  Game game;
+  num id;
+
+  WhileLoop(Game this.game) {
+    window.requestAnimationFrame(eventloop);
+  }
+
+  void eventloop(num time) {
+    game.update();
+    game.draw();
+
+    id = window.requestAnimationFrame(eventloop);
+  }
+
+  void stop() {
+    window.cancelAnimationFrame(id);
+  }
+
+  void start() {
+    window.requestAnimationFrame(eventloop);
+  }
+}

lib/src/03-FixedLoopVariableRender.dart

@@ -0,0 +1,52 @@
+import 'dart:html';
+
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+
+class FixedLoopVariableRender 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;
+
+  FixedLoopVariableRender(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;
+    }
+    render(lag / MS_PER_UPDATE);
+    id = window.requestAnimationFrame(eventloop);
+
+  }
+
+  void update() {
+    print('updating');
+    game.update();
+    return;
+  }
+
+  void render(double interp) {
+    print('rendering, interp:$interp');
+    game.draw(interp);
+    return;
+  }
+
+  void stop() {
+    window.cancelAnimationFrame(id);
+  }
+
+  void start() {
+    window.requestAnimationFrame(eventloop);
+  }
+}