From c1ce0f5aed7a61d18b9418c6ee07097ddfbda379 Mon Sep 17 00:00:00 2001 From: Jacky Siu Date: Thu, 29 Sep 2011 19:45:49 -0400 Subject: [PATCH] requestActionFrame logic added, with a flag frameRateIsUsed. Example added in examples/seneca/bug862 --- examples/seneca/bug862/index.html | 1 + examples/seneca/bug862/testwfr.pjs | 15 +++++++ examples/seneca/bug862/testwofr.pjs | 14 ++++++ examples/seneca/bug862/wfr.html | 4 ++ examples/seneca/bug862/wofr.html | 4 ++ processing.js | 69 +++++++++++++++++++++++------ 6 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 examples/seneca/bug862/index.html create mode 100644 examples/seneca/bug862/testwfr.pjs create mode 100644 examples/seneca/bug862/testwofr.pjs create mode 100644 examples/seneca/bug862/wfr.html create mode 100644 examples/seneca/bug862/wofr.html diff --git a/examples/seneca/bug862/index.html b/examples/seneca/bug862/index.html new file mode 100644 index 000000000..bfffc1c91 --- /dev/null +++ b/examples/seneca/bug862/index.html @@ -0,0 +1 @@ + diff --git a/examples/seneca/bug862/testwfr.pjs b/examples/seneca/bug862/testwfr.pjs new file mode 100644 index 000000000..533ec76ba --- /dev/null +++ b/examples/seneca/bug862/testwfr.pjs @@ -0,0 +1,15 @@ +void setup(){ + size(300, 300, P3D); + noStroke(); + frameRate(30); +} + +void draw(){ + background(0); + lights(); + translate(width/2, height/2, 0); + for(int i = 0; i < 100; i++){ + sphere(30); + } + document.getElementById('fpswfr').innerHTML = Math.floor(frameRate); +} \ No newline at end of file diff --git a/examples/seneca/bug862/testwofr.pjs b/examples/seneca/bug862/testwofr.pjs new file mode 100644 index 000000000..f0bb00bfe --- /dev/null +++ b/examples/seneca/bug862/testwofr.pjs @@ -0,0 +1,14 @@ +void setup(){ + size(300, 300, P3D); + noStroke(); +} + +void draw(){ + background(0); + lights(); + translate(width/2, height/2, 0); + for(int i = 0; i < 100; i++){ + sphere(30); + } + document.getElementById('fpswofr').innerHTML = Math.floor(frameRate); +} \ No newline at end of file diff --git a/examples/seneca/bug862/wfr.html b/examples/seneca/bug862/wfr.html new file mode 100644 index 000000000..6a52419e7 --- /dev/null +++ b/examples/seneca/bug862/wfr.html @@ -0,0 +1,4 @@ +With frameRate(30) + + + diff --git a/examples/seneca/bug862/wofr.html b/examples/seneca/bug862/wofr.html new file mode 100644 index 000000000..988fbbf7c --- /dev/null +++ b/examples/seneca/bug862/wofr.html @@ -0,0 +1,4 @@ +Without frameRate() + + + diff --git a/processing.js b/processing.js index 464ab3d4a..7a6f6e206 100755 --- a/processing.js +++ b/processing.js @@ -30,6 +30,18 @@ // document.head polyfill for the benefit of Firefox 3.6 document.head = document.head || document.getElementsByTagName('head')[0]; + /* handle animation without DOSing the user's browser */ + var requestAnimFrame = (function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(/* function */ callback, /* DOMElement */ element){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + // Typed Arrays: fallback to WebGL arrays or Native JS arrays if unavailable function setupTypedArray(name, fallback) { // Check if TypedArray exists, and use if so. @@ -1977,6 +1989,7 @@ normalMode = PConstants.NORMAL_MODE_AUTO, curFrameRate = 60, curMsPerFrame = 1000/curFrameRate, + frameRateIsUsed = false, curCursor = PConstants.ARROW, oldCursor = curElement.style.cursor, curShape = PConstants.POLYGON, @@ -8196,7 +8209,9 @@ p.noLoop = function() { doLoop = false; loopStarted = false; - clearInterval(looping); + if(frameRateIsUsed) { + clearInterval(looping); + } curSketch.onPause(); }; @@ -8215,19 +8230,41 @@ timeSinceLastFPS = Date.now(); framesSinceLastFPS = 0; - - looping = window.setInterval(function() { - try { - curSketch.onFrameStart(); - p.redraw(); - curSketch.onFrameEnd(); - } catch(e_loop) { - window.clearInterval(looping); - throw e_loop; - } - }, curMsPerFrame); + + if(frameRateIsUsed) { + looping = window.setInterval(function() { + try { + curSketch.onFrameStart(); + p.redraw(); + curSketch.onFrameEnd(); + } catch(e_loop) { + window.clearInterval(looping); + throw e_loop; + } + }, curMsPerFrame); + } else { + var then = Date.now(); + function loopFunction() { + if (doLoop) { + var now = Date.now(); + var timeElapsed = now - then; + if (timeElapsed >= curMsPerFrame || curMsPerFrame < 33){ + then = now; + try { + p.redraw(); + } catch(e_loop) { + throw e_loop; + } + } + requestAnimFrame(loopFunction, p.canvas); + } + } + } doLoop = true; loopStarted = true; + if(!frameRateIsUsed){ + loopFunction(); + } curSketch.onLoop(); }; @@ -8246,7 +8283,7 @@ p.frameRate = function(aRate) { curFrameRate = aRate; curMsPerFrame = 1000 / curFrameRate; - + frameRateIsUsed = true; // clear and reset interval if (doLoop) { p.noLoop(); @@ -8290,7 +8327,11 @@ * @returns none */ p.exit = function() { - window.clearInterval(looping); + if(frameRateIsUsed) { + window.clearInterval(looping); + } else { + doLoop = false; + } removeInstance(p.externals.canvas.id);