diff options
| -rw-r--r-- | css/sally.css | 4 | ||||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | js/shader.js | 10 |
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 { @@ -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) } |