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

pubspec.yaml

@@ -0,0 +1,15 @@
+name: browserloop
+description: An absolute bare-bones web app.
+version: 0.0.1
+#homepage: https://www.example.com
+#author: marty <email@example.com>
+
+environment:
+  sdk: '>=2.0.0-dev.67.0 <3.0.0'
+
+#dependencies:
+#  path: ^1.4.1
+
+dev_dependencies:
+  build_runner: ^0.9.0
+  build_web_compilers: ^0.4.0

web/favicon.ico

@@ -0,0 +1 @@
+ 

web/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Browserloop</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--<link rel="stylesheet" href="styles.css">-->
+    <!--<link rel="icon" type="image/png" href="favicon.png">-->
+
+    <script defer src="main.dart.js"></script>
+</head>
+<body>
+<!--Basic Game-loop-->
+<div id="while_output"></div>
+<div id="variable_output"></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>-->
+
+</body>
+</html>

web/main.dart

@@ -0,0 +1,110 @@
+import 'dart:html';
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+import 'package:browserloop/src/03-FixedLoopVariableRender.dart';
+import 'package:browserloop/src/02-AnimationFrameWhile.dart';
+
+List<Example> examples = [
+  Example("While Loop Example","#while_output"),
+  Example("Fixed Update, Variable Render","#variable_output")
+];
+LoopExample active;
+
+class Example {
+  final String query;
+  final String name;
+  CanvasElement canvas = CanvasElement(width: 480, height: 480);
+  LoopExample loop;
+
+  Example(this.name, this.query);
+}
+
+void main() {
+  examples.forEach((ex) {
+    appendToDOM(ex);
+  });
+  resetPlaceHolders();
+}
+
+void appendToDOM(Example example) {
+  querySelector(example.query).append(example.canvas);
+  example.canvas.onClick.forEach(activate);
+  print("${example.query} appended");
+}
+
+void readdToDOM(Example example) {
+  querySelector(example.query).children.clear();
+  print("${example.query} removed");
+  appendToDOM(example);
+}
+
+void resetPlaceHolders([Example current]) {
+  examples.forEach((Example ex) {
+    if(current == null || ex != current) {
+      if(ex.loop != null) {
+        ex.loop.stop();
+        ex.loop = null;
+      }
+      ex.canvas = new CanvasElement(width: ex.canvas.width,height: ex.canvas.height);
+      readdToDOM(ex);
+
+      CanvasRenderingContext2D ctx = ex.canvas.context2D;
+      Point c = Point(ex.canvas.width/2, ex.canvas.height/2);
+      ctx.setFillColorRgb(255, 150, 10);
+      ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height);
+
+      ctx.beginPath();
+      ctx.moveTo(c.x-25, c.y-25);
+      ctx.lineTo(c.x+25, c.y+25);
+      ctx.lineTo(c.x-25, c.y+75);
+      ctx.closePath();
+      ctx.lineWidth = 10;
+      ctx.setStrokeColorRgb(155, 155, 155);
+      ctx.setFillColorRgb(255, 255, 255);
+      ctx.stroke();
+      ctx.fill();
+      ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width/2, c.y - 50);
+
+      print("reset ${ex.query}");
+    }
+  });
+}
+
+void activate(MouseEvent e) {
+  if(e.target is! CanvasElement) return;
+  CanvasElement c = (e.target as CanvasElement);
+
+  examples.forEach((Example ex) {
+    if (ex.canvas == c) {
+      resetPlaceHolders(ex);
+      switch (ex.query) {
+        case "#while_output":
+          ex.loop = new WhileLoop(new Game(c));
+          break;
+        case "#variable_output":
+          ex.loop = new FixedLoopVariableRender(new Game(c));
+          break;
+      }
+
+      querySelector(ex.query).append(new ButtonElement()
+        ..text = "start"
+        ..onClick.listen((e) {
+          ex.loop.stop();
+          ex.loop.start();
+        }));
+      querySelector(ex.query).append(new ButtonElement()
+        ..text = "stop"
+        ..onClick.listen((e) {
+          ex.loop.stop();
+        }));
+//    querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
+//    querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
+//    querySelector('#minus').onClick.listen((e) => _changeGrid(5));
+    }
+  });
+
+}
+
+
+
+//when a button is clicked delete all the other Loops containing games and replace them with a canvas (fn above)