Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added `interval` property to options. This is the update / draw inter…

…val, 1 being 60fps, 2 30fps (etc). #8
  • Loading branch information...
commit 4580303928753257859974258955fa84d3f70c7c 1 parent 81840fd
Justin Windle authored
Showing with 14 additions and 8 deletions.
  1. +1 −1  js/examples/canvas.js
  2. +12 −6 js/sketch.js
  3. +1 −1  js/sketch.min.js
View
2  js/examples/canvas.js
@@ -96,7 +96,7 @@ demo.spawn = function( x, y ) {
particle.vy = cos( theta ) * force;
particles.push( particle );
-}
+};
demo.update = function() {
View
18 js/sketch.js
@@ -36,6 +36,7 @@ var Sketch = (function() {
// ----------------------------------------
var ctx;
+ var counter = 0;
var timeout = -1;
// Default options
@@ -45,6 +46,7 @@ var Sketch = (function() {
autostart : true,
autoclear : true,
container : document.body,
+ interval : 1,
type : CANVAS
};
@@ -501,14 +503,18 @@ var Sketch = (function() {
function update( now ) {
- ctx.dt = ( now = now || Date.now() ) - ctx.now;
- ctx.millis += ctx.dt;
- ctx.now = now;
+ if ( !counter ) {
- if ( ctx.update ) ctx.update( ctx.dt );
- if ( ctx.autoclear ) ctx.clear();
- if ( ctx.draw ) ctx.draw( ctx );
+ ctx.dt = ( now = now || Date.now() ) - ctx.now;
+ ctx.millis += ctx.dt;
+ ctx.now = now;
+ if ( ctx.update ) ctx.update( ctx.dt );
+ if ( ctx.autoclear ) ctx.clear();
+ if ( ctx.draw ) ctx.draw( ctx );
+ }
+
+ counter = ++counter % ctx.interval;
timeout = requestAnimationFrame( update );
}
View
2  js/sketch.min.js
@@ -18,4 +18,4 @@
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
- */var Sketch=function(){function l(i){i=c(i||{},s);var a="sketch-"+e++,f=document.createElement("canvas");switch(i.type){case n:try{r=f.getContext("webgl",i)}catch(l){}try{r=r||f.getContext("experimental-webgl",i)}catch(l){}if(!r)throw"WebGL not supported";break;case t:try{r=f.getContext("2d",i)}catch(l){}if(!r)throw"Canvas not supported";break;default:f=r=document.createElement("div")}return f.className="sketch",f.id=a,i.container.appendChild(f),c(self,o),c(r,i),c(r,u),p(),v(),r.autostart&&setTimeout(r.start,0),r}function c(e,t){for(var n in t)e.hasOwnProperty(n)||(e[n]=t[n]);return e}function h(e){function n(e,t){return function(){e.call(t,arguments)}}var t={};for(var r in e)typeof e[r]=="function"?t[r]=n(e[r],e):t[r]=e[r];return t}function p(){function n(t){return e[t]||String.fromCharCode(t)}function i(e){r.mouse.ox=r.mouse.x,r.mouse.oy=r.mouse.y,r.mouse.x=e.x,r.mouse.y=e.y,r.mouse.dx=r.mouse.x-r.mouse.ox,r.mouse.dy=r.mouse.y-r.mouse.oy}function o(e){var t,n=h(e);n.original=e;for(var i=r.canvas,o=0,u=0;i;i=i.offsetParent)o+=i.offsetLeft,u+=i.offsetTop;if(n.touches&&!!n.touches.length)for(var a=n.touches.length-1,f;a>=0;a--)f=n.touches[a],f.x=f.pageX-o,f.y=f.pageY-u,t=s[a]||f,f.dx=f.x-t.x,f.dy=f.y-t.x,f.ox=t.x,f.oy=t.y,s[a]=h(f);else n.x=n.pageX-o,n.y=n.pageY-u,t=s.mouse||n,n.dx=n.x-t.x,n.dy=n.y-t.y,n.ox=t.x,n.oy=t.y,s.mouse=n;return n}function l(e){e.preventDefault(),e=o(e),r.touches=e.touches,i(r.touches[0]),r.touchstart&&r.touchstart(e)}function c(e){e=o(e),r.touches=e.touches,i(r.touches[0]),r.touchmove&&r.touchmove(e),r.mousemove&&r.mousemove(e)}function p(e){e=o(e);if(!e.touches.length)s={};else for(var t in s)e.touches[t]||delete s[t];r.touchend&&r.touchend(e)}function d(e){e=o(e),r.mouseover&&r.mouseover(e)}function m(e){e=o(e),r.dragging||(f(r.canvas,"mousemove",g),f(r.canvas,"mouseup",b),a(document,"mousemove",g),a(document,"mouseup",b),r.dragging=!0),r.touches=[e],r.mousedown&&r.mousedown(e)}function g(e){e=o(e),i(e),r.touches=[e],r.mousemove&&r.mousemove(e),r.touchmove&&r.touchmove(e)}function y(e){e=o(e),r.mouseout&&r.mouseout(e)}function b(e){e=o(e),r.dragging&&(f(document,"mousemove",g),f(document,"mouseup",b),a(r.canvas,"mousemove",g),a(r.canvas,"mouseup",b),r.dragging=!1),delete s.mouse,r.mouseup&&r.mouseup(e)}function w(e){e=o(e),r.click&&r.click(e)}function E(e){r.keys[n(e.keyCode)]=!0,r.keys[e.keyCode]=!0,r.keydown&&r.keydown(e)}function S(e){r.keys[n(e.keyCode)]=!1,r.keys[e.keyCode]=!1,r.keyup&&r.keyup(e)}var e={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"};for(var t in e)u.keys[e[t]]=!1;var s={};a(r.canvas,"touchstart",l),a(r.canvas,"touchmove",c),a(r.canvas,"touchend",p),a(r.canvas,"mouseover",d),a(r.canvas,"mousedown",m),a(r.canvas,"mousemove",g),a(r.canvas,"mouseout",y),a(r.canvas,"mouseup",b),a(r.canvas,"click",w),a(document,"keydown",E),a(document,"keyup",S),a(window,"resize",v)}function d(e){r.dt=(e=e||Date.now())-r.now,r.millis+=r.dt,r.now=e,r.update&&r.update(r.dt),r.autoclear&&r.clear(),r.draw&&r.draw(r),i=requestAnimationFrame(d)}function v(e){r.fullscreen?(r.height=r.canvas.height=window.innerHeight,r.width=r.canvas.width=window.innerWidth):(r.canvas.height=r.height,r.canvas.width=r.width),r.resize&&r.resize()}var e=0,t="canvas",n="web-gl",r,i=-1,s={fullscreen:!0,autostart:!0,autoclear:!0,container:document.body,type:t},o={PI:Math.PI,TWO_PI:Math.PI*2,HALF_PI:Math.PI/2,QUARTER_PI:Math.PI/4,sin:Math.sin,cos:Math.cos,tan:Math.tan,pow:Math.pow,exp:Math.exp,min:Math.min,max:Math.max,sqrt:Math.sqrt,atan:Math.atan,atan2:Math.atan2,ceil:Math.ceil,round:Math.round,floor:Math.floor,random:function(e,t){return e&&typeof e.length=="number"&&!!e.length?e[Math.floor(Math.random()*e.length)]:(typeof t!="number"&&(t=e||1,e=0),e+Math.random()*(t-e))}},u={millis:0,now:NaN,dt:NaN,keys:{},mouse:{x:0,y:0,ox:0,oy:0,dx:0,dy:0},touches:[],initialized:!1,dragging:!1,running:!1,start:function(){if(r.running)return;r.setup&&!r.initialized&&r.setup(),r.initialized=!0,r.running=!0,r.now=Date.now(),d()},stop:function(){cancelAnimationFrame(i),r.running=!1},clear:function(){r.canvas&&(r.canvas.width=r.canvas.width)}},a=function(){if(window.addEventListener)return function(e,t,n){e.addEventListener(t,n,!1)};if(window.attachEvent)return function(e,t,n){e.attachEvent("on"+t,n)};el["on"+ev]=fn}(),f=function(){if(window.removeEventListener)return function(e,t,n){e.removeEventListener(t,n,!1)};if(window.detachEvent)return function(e,t,n){e.detachEvent("on"+t,n)};el["on"+ev]=null}();return{CANVAS:t,WEB_GL:n,create:l}}();Date.now||(Date.now=function(){return+(new Date)}),function(){for(var e=0,t=["ms","moz","webkit","o"],n=0;n<t.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[t[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[n]+"CancelAnimationFrame"]||window[t[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t){var n=Date.now(),r=Math.max(0,16-(n-e)),i=window.setTimeout(function(){t(n+r)},r);return e=n+r,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}();
+ */var Sketch=function(){function c(i){i=h(i||{},o);var s="sketch-"+e++,f=document.createElement("canvas");switch(i.type){case n:try{r=f.getContext("webgl",i)}catch(l){}try{r=r||f.getContext("experimental-webgl",i)}catch(l){}if(!r)throw"WebGL not supported";break;case t:try{r=f.getContext("2d",i)}catch(l){}if(!r)throw"Canvas not supported";break;default:f=r=document.createElement("div")}return f.className="sketch",f.id=s,i.container.appendChild(f),h(self,u),h(r,i),h(r,a),d(),m(),r.autostart&&setTimeout(r.start,0),r}function h(e,t){for(var n in t)e.hasOwnProperty(n)||(e[n]=t[n]);return e}function p(e){function n(e,t){return function(){e.call(t,arguments)}}var t={};for(var r in e)typeof e[r]=="function"?t[r]=n(e[r],e):t[r]=e[r];return t}function d(){function n(t){return e[t]||String.fromCharCode(t)}function i(e){r.mouse.ox=r.mouse.x,r.mouse.oy=r.mouse.y,r.mouse.x=e.x,r.mouse.y=e.y,r.mouse.dx=r.mouse.x-r.mouse.ox,r.mouse.dy=r.mouse.y-r.mouse.oy}function o(e){var t,n=p(e);n.original=e;for(var i=r.canvas,o=0,u=0;i;i=i.offsetParent)o+=i.offsetLeft,u+=i.offsetTop;if(n.touches&&!!n.touches.length)for(var a=n.touches.length-1,f;a>=0;a--)f=n.touches[a],f.x=f.pageX-o,f.y=f.pageY-u,t=s[a]||f,f.dx=f.x-t.x,f.dy=f.y-t.x,f.ox=t.x,f.oy=t.y,s[a]=p(f);else n.x=n.pageX-o,n.y=n.pageY-u,t=s.mouse||n,n.dx=n.x-t.x,n.dy=n.y-t.y,n.ox=t.x,n.oy=t.y,s.mouse=n;return n}function u(e){e.preventDefault(),e=o(e),r.touches=e.touches,i(r.touches[0]),r.touchstart&&r.touchstart(e)}function c(e){e=o(e),r.touches=e.touches,i(r.touches[0]),r.touchmove&&r.touchmove(e),r.mousemove&&r.mousemove(e)}function h(e){e=o(e);if(!e.touches.length)s={};else for(var t in s)e.touches[t]||delete s[t];r.touchend&&r.touchend(e)}function d(e){e=o(e),r.mouseover&&r.mouseover(e)}function v(e){e=o(e),r.dragging||(l(r.canvas,"mousemove",g),l(r.canvas,"mouseup",b),f(document,"mousemove",g),f(document,"mouseup",b),r.dragging=!0),r.touches=[e],r.mousedown&&r.mousedown(e)}function g(e){e=o(e),i(e),r.touches=[e],r.mousemove&&r.mousemove(e),r.touchmove&&r.touchmove(e)}function y(e){e=o(e),r.mouseout&&r.mouseout(e)}function b(e){e=o(e),r.dragging&&(l(document,"mousemove",g),l(document,"mouseup",b),f(r.canvas,"mousemove",g),f(r.canvas,"mouseup",b),r.dragging=!1),delete s.mouse,r.mouseup&&r.mouseup(e)}function w(e){e=o(e),r.click&&r.click(e)}function E(e){r.keys[n(e.keyCode)]=!0,r.keys[e.keyCode]=!0,r.keydown&&r.keydown(e)}function S(e){r.keys[n(e.keyCode)]=!1,r.keys[e.keyCode]=!1,r.keyup&&r.keyup(e)}var e={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"};for(var t in e)a.keys[e[t]]=!1;var s={};f(r.canvas,"touchstart",u),f(r.canvas,"touchmove",c),f(r.canvas,"touchend",h),f(r.canvas,"mouseover",d),f(r.canvas,"mousedown",v),f(r.canvas,"mousemove",g),f(r.canvas,"mouseout",y),f(r.canvas,"mouseup",b),f(r.canvas,"click",w),f(document,"keydown",E),f(document,"keyup",S),f(window,"resize",m)}function v(e){i||(r.dt=(e=e||Date.now())-r.now,r.millis+=r.dt,r.now=e,r.update&&r.update(r.dt),r.autoclear&&r.clear(),r.draw&&r.draw(r)),i=++i%r.interval,s=requestAnimationFrame(v)}function m(e){r.fullscreen?(r.height=r.canvas.height=window.innerHeight,r.width=r.canvas.width=window.innerWidth):(r.canvas.height=r.height,r.canvas.width=r.width),r.resize&&r.resize()}var e=0,t="canvas",n="web-gl",r,i=0,s=-1,o={fullscreen:!0,autostart:!0,autoclear:!0,container:document.body,interval:1,type:t},u={PI:Math.PI,TWO_PI:Math.PI*2,HALF_PI:Math.PI/2,QUARTER_PI:Math.PI/4,sin:Math.sin,cos:Math.cos,tan:Math.tan,pow:Math.pow,exp:Math.exp,min:Math.min,max:Math.max,sqrt:Math.sqrt,atan:Math.atan,atan2:Math.atan2,ceil:Math.ceil,round:Math.round,floor:Math.floor,random:function(e,t){return e&&typeof e.length=="number"&&!!e.length?e[Math.floor(Math.random()*e.length)]:(typeof t!="number"&&(t=e||1,e=0),e+Math.random()*(t-e))}},a={millis:0,now:NaN,dt:NaN,keys:{},mouse:{x:0,y:0,ox:0,oy:0,dx:0,dy:0},touches:[],initialized:!1,dragging:!1,running:!1,start:function(){if(r.running)return;r.setup&&!r.initialized&&r.setup(),r.initialized=!0,r.running=!0,r.now=Date.now(),v()},stop:function(){cancelAnimationFrame(s),r.running=!1},clear:function(){r.canvas&&(r.canvas.width=r.canvas.width)}},f=function(){if(window.addEventListener)return function(e,t,n){e.addEventListener(t,n,!1)};if(window.attachEvent)return function(e,t,n){e.attachEvent("on"+t,n)};el["on"+ev]=fn}(),l=function(){if(window.removeEventListener)return function(e,t,n){e.removeEventListener(t,n,!1)};if(window.detachEvent)return function(e,t,n){e.detachEvent("on"+t,n)};el["on"+ev]=null}();return{CANVAS:t,WEB_GL:n,create:c}}();Date.now||(Date.now=function(){return+(new Date)}),function(){for(var e=0,t=["ms","moz","webkit","o"],n=0;n<t.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[t[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[t[n]+"CancelAnimationFrame"]||window[t[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(t){var n=Date.now(),r=Math.max(0,16-(n-e)),i=window.setTimeout(function(){t(n+r)},r);return e=n+r,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})}();
Please sign in to comment.
Something went wrong with that request. Please try again.