Update physics graph

milcktoast · May 30, 2015 · a945bc5 · a945bc5
1 parent a8481c3
commit a945bc5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/static/js/components/GraphComponent.js b/static/js/components/GraphComponent.js
@@ -104,7 +104,7 @@ GraphComponent.prototype._startTime = 0;
 GraphComponent.prototype._endTime = 0;
 GraphComponent.prototype._textTick = 0;
 
-GraphComponent.prototype.update = function () {
+GraphComponent.prototype.update = function (value, skipLabel) {
   var width = this.fullWidth;
   var height = this.fullHeight;
   var pxRatio = this.pxRatio;
@@ -115,11 +115,19 @@ GraphComponent.prototype.update = function () {
   var btx = this.btx;
   var ctx = this.ctx;
 
-  var value = this._endTime - this._startTime;
-  var current = this.current += (value - this.current) * this.updateFactor;
-  var max = this.max *= 0.99;
+  var current, max;
 
-  if (current > max) { max = this.max = current; }
+  if (value == null) {
+    value = this._endTime - this._startTime;
+    current = this.current += (value - this.current) * this.updateFactor;
+    max = this.max *= 0.99;
+  } else {
+    current = max = value;
+  }
+
+  if (current > max) {
+    max = this.max = current;
+  }
 
   btx.clearRect(0, 0, width, height);
   btx.drawImage(canvas, -drawOffset * pxRatio, 0, width, height);
@@ -130,8 +138,10 @@ GraphComponent.prototype.update = function () {
     0, current * height / (max || 1), pxRatio, height,
     width - pxRatio, 0, pxRatio, height);
 
-  if (++ this._textTick > 6) {
+  if (!skipLabel && ++ this._textTick > 6) {
     this._textTick = 0;
     this._valueEl.textContent = current.toFixed(3);
   }
+
+  this._startTime = this._endTime = 0;
 };
diff --git a/static/js/scenes/MainScene.js b/static/js/scenes/MainScene.js
@@ -142,6 +142,7 @@ MainScene.prototype.initItems = function () {
 
 MainScene.prototype.togglePostFx = function (isEnabled) {
   this.usePostFx = isEnabled;
+  this.needsRender = true;
 };
 
 MainScene.prototype.onWindowResize = function () {
@@ -360,17 +361,17 @@ MainScene.prototype.initStats = function () {
   var el = this.statsElement;
 
   this.statsPhysics = App.GraphComponent.create({
-    label: 'Physics (ms)'
+    label : 'Physics (ms)'
   });
 
   this.statsGraphics = App.GraphComponent.create({
-    label: 'Graphics (ms)',
-    updateFactor: 0.025
+    label : 'Graphics (ms)',
+    updateFactor : 0.025
   });
 
   this.statsPost = App.GraphComponent.create({
-    label: 'Post FX (ms)',
-    updateFactor: 0.025
+    label : 'Post FX (ms)',
+    updateFactor : 0.025
   });
 
   this.statsPhysics.appendTo(el);
@@ -400,8 +401,6 @@ MainScene.prototype.update = function (delta) {
     this.medusae.update(delta);
     this.statsPhysics.end();
     this.lensDirtPass.update(delta);
-  } else {
-    this.statsPhysics.reset();
   }
 
   this.audio.update(delta);
@@ -421,7 +420,12 @@ MainScene.prototype.preRender = function (delta, stepProgress) {
     this.statsPost.reset();
   }
 
-  this.statsPhysics.update();
+  if (this.loop.didUpdate) {
+    this.statsPhysics.update();
+  } else {
+    this.statsPhysics.update(0, true);
+  }
+
   this.statsGraphics.update();
   this.statsPost.update();
 };

diff --git a/static/js/utils/Looper.js b/static/js/utils/Looper.js
@@ -1,6 +1,7 @@
 /*global requestAnimationFrame*/
 App.Looper = Looper;
 function Looper(context, update, render, delta) {
+  var _this = this;
   var _update = context[update];
   var _render = context[render];
 
@@ -17,6 +18,7 @@ function Looper(context, update, render, delta) {
 
     if (steps > 0) {
       stepTime -= steps * targetDelta;
+      _this.didUpdate = true;
     }
 
     while (steps > 0) {
@@ -33,6 +35,7 @@ function Looper(context, update, render, delta) {
     var time = Date.now();
     var delta = Math.min(maxDelta, time - lastTime);
 
+    _this.didUpdate = false;
     animateStep(delta);
     requestAnimationFrame(animate);
     lastTime = time;