shader fps

3 files changed, 14 insertions, 3 deletions

diff --git a/css/sally.css b/css/sally.css
index 6d65e28..db46136 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -25,7 +25,7 @@ a {display: block}
 a:link, a:visited {text-decoration: none; color: #3b3740}
 
 {overflow: auto;}
-
+.faded { color: 404040; }
 .rapper, .block {
   float: left;
   height:auto;
@@ -48,7 +48,7 @@ a:link, a:visited {text-decoration: none; color: #3b3740}
 .tool {
   cursor: pointer;
 }
-.tool.hidden {
+.hidden {
   visibility: hidden;
 }
 .tool.radio {
diff --git a/index.html b/index.html
index 3ba197b..0debfcf 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,8 @@
 
       <div id="shader_rapper">
         <span id="animate_checkbox" class="tool">_ animate</span>
-        to <span id="shader_target_el">*canvas brush selection</span><br>
+        to <span id="shader_target_el">*canvas brush selection</span>
+        <span id="shader_fps_el" class="hidden faded"></span><br>
         <textarea id="shader_textarea"></textarea>
       </div>
     </div>
diff --git a/js/shader.js b/js/shader.js
index 81a1ec5..f0ed548 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -29,17 +29,27 @@ var shader = (function(){
   }
   exports.toggle = function(state){
     animating = typeof state == "boolean" ? state : ! animating
+    shader_fps_el.classList.toggle('hidden')
     return animating
   }
   exports.pause = function(){
     animating = false
+    shader_fps_el.classList.add('hidden')
+    shader.fps_time = 0
   }
   exports.play = function(){
     animating = true
+    shader_fps_el.classList.remove('hidden')
   }
   exports.animate = function (t){
     requestAnimationFrame(exports.animate)
     if (! animating) { return } 
+    if (shader.fps_time){
+      var ms = Date.now() - shader.fps_time
+      fps = 1000 / ms
+      shader_fps_el.innerHTML = (fps | 0) + ' fps'
+    }
+    shader.fps_time = Date.now()
     exports.run(canvas)
   }