Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated README to markdown. Removed submodule nonsense, just include …

…Stats.js in lib.
  • Loading branch information...
commit d034564aa4d7f3925aeb14f2dbf410e1e2f421f2 1 parent 691ba34
Billy Lamberta authored
3  .gitmodules
View
@@ -1,3 +0,0 @@
-[submodule "lib/stats"]
- path = lib/stats
- url = http://github.com/mrdoob/stats.js.git
27 README
View
@@ -1,27 +0,0 @@
-Doodle-js - An Animation Library for JavaScript
-
-Tested on Chrome, looking good on Firefox 4.
-Requires a browser with support for HTML5 Canvas and some ECMAScript 5 capabilities.
-
-Some of the features:
- * Use the Canvas drawing API with sprites and a scene graph.
- * Event handling and dispatch for objects.
- * Nodes maintain transforms, bounds, and other useful properties.
- * If you're coming from ActionScript 3, you'll feel right at home!
-
-Basic build instructions:
- git clone git://github.com/billyist/doodle-js.git
- git submodule init
- git submodule update
- ./build/make-doodle => ./build/doodle.js
-
-Debugging version (some useful error messages):
- ./build/make-doodle -D => ./build/doodle-debug.js
-
-For more options: ./build/make-doodle -h
-
-Reference docs: http://lamberta.org/doodle-js/doc/api/
-
-Some examples: http://lamberta.org/doodle-js/doc/demos/making_things_move/
-
-Questions? http://groups.google.com/group/doodlejs
64 README.md
View
@@ -0,0 +1,64 @@
+# Doodle-js
+## A JavaScript Animation Library for HTML5 Canvas.
+
+Tested on Chrome/WebKit, looking good on Firefox 4.
+Requires a browser with support for HTML5 Canvas and some ECMAScript 5 capabilities.
+
+Some of the features:
+
+* Use the Canvas drawing API with sprites and a scene graph.
+* Event handling and dispatch for objects.
+* Nodes maintain transforms, bounds, and other useful properties.
+* A clean api with a focus on good JavaScript style.
+* Influenced by ActionScript 3, jQuery, Node.js, and JSLint.
+* Easy to add to an existing page element where Flash no longer displays.
+* Integrated runtime information provided by [Stats.js](https://github.com/mrdoob/stats.js).
+
+Basic build instructions (minified version with the [Closure Compiler](http://code.google.com/closure/compiler/) installed):
+
+ git clone git://github.com/billyist/doodle-js.git
+ ./build/make-doodle => ./build/doodle.js
+
+Debugging version (type-checking and some useful error messages):
+
+ ./build/make-doodle -D => ./build/doodle-debug.js
+
+For more options: `./build/make-doodle -h`
+
+Reference: http://lamberta.org/doodle-js/doc/api/
+Examples: http://lamberta.org/doodle-js/doc/demos/making\_things\_move/
+
+Questions?
+Mailing list: http://groups.google.com/group/doodlejs
+Or, ask me on Twitter: http://twitter.com/billyist
+
+`hello-world.html`:
+
+ <!doctype html>
+ <html>
+ <head>
+ <meta charset="utf-8"/>
+ </head>
+ <body>
+ <div id="display"></div>
+ <script src="./build/doodle.js"></script>
+ <script>
+ doodle.ready(function () {
+ var display = doodle.createDisplay('#display', {
+ width: 400,
+ height: 400,
+ frameRate: 20
+ }),
+ layer = display.createLayer(),
+ text = doodle.createText("Hello, World!").appendTo(layer);
+ //center text
+ text.x = display.width / 2;
+ text.y = display.height / 2;
+ //game loop
+ display.on(doodle.events.Event.ENTER_FRAME, function () {
+ text.rotation += 4;
+ });
+ });
+ </script>
+ </body>
+ </html>
12 build/make-doodle
View
@@ -26,8 +26,8 @@ PROJECT_HOME="$PWD"
DEBUG_OUT_FILE="$PROJECT_HOME/build/doodle-debug.js"
MIN_OUT_FILE="$PROJECT_HOME/build/doodle.js"
CLOSURE_COMPILER="$PROJECT_HOME/build/compiler.jar"
-#submodules
-STATS_FILE="$PROJECT_HOME/lib/stats/src/Stats.js"
+#dependencies
+STATS_FILE="$PROJECT_HOME/lib/Stats.js"
#compiler options
COMPILATION_LEVEL=1 #whitespace, [simple], advanced
WARNING_LEVEL=1 #quiet, [default], verbose
@@ -209,14 +209,6 @@ while getopts "hcJ:dDPSTW:C:A" option; do
esac
done
-#check for submodules
-if [ ! -f "$STATS_FILE" ]; then
- echo "Please update the required submodule(s)."
- echo " > git submodule init"
- echo " > git submodule update"
- exit 1;
-fi
-
parse_compiler_options
echo "For more options: $(basename $0) -h"
275 lib/Stats.js
View
@@ -0,0 +1,275 @@
+/*
+ * stats.js r5
+ * http://github.com/mrdoob/stats.js
+ *
+ * Released under MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * How to use:
+ *
+ * var stats = new Stats();
+ * parentElement.appendChild( stats.domElement );
+ *
+ * setInterval(function () {
+ *
+ * stats.update();
+ *
+ * }, 1000/60);
+ *
+ */
+
+var Stats = function () {
+
+ var _mode = 0, _modesCount = 2, _container,
+ _frames = 0, _time = new Date().getTime(), _timeLastFrame = _time, _timeLastSecond = _time,
+ _fps = 0, _fpsMin = 1000, _fpsMax = 0, _fpsDiv, _fpsText, _fpsCanvas, _fpsContext, _fpsImageData,
+ _ms = 0, _msMin = 1000, _msMax = 0, _msDiv, _msText, _msCanvas, _msContext, _msImageData,
+ _mem = 0, _memMin = 1000, _memMax = 0, _memDiv, _memText, _memCanvas, _memContext, _memImageData,
+ _colors = {
+ fps: {
+ bg: { r: 16, g: 16, b: 48 },
+ fg: { r: 0, g: 255, b: 255 }
+ },
+ ms: {
+ bg: { r: 16, g: 48, b: 16 },
+ fg: { r: 0, g: 255, b: 0 }
+ },
+ mem: {
+ bg: { r: 48, g: 16, b: 26 },
+ fg: { r: 255, g: 0, b: 128 }
+ }
+ };
+
+ _container = document.createElement( 'div' );
+ _container.style.cursor = 'pointer';
+ _container.style.width = '80px';
+ _container.style.opacity = '0.9';
+ _container.style.zIndex = '10001';
+ _container.addEventListener( 'click', swapMode, false );
+
+ // fps
+
+ _fpsDiv = document.createElement( 'div' );
+ _fpsDiv.style.backgroundColor = 'rgb(' + Math.floor( _colors.fps.bg.r / 2 ) + ',' + Math.floor( _colors.fps.bg.g / 2 ) + ',' + Math.floor( _colors.fps.bg.b / 2 ) + ')';
+ _fpsDiv.style.padding = '2px 0px 3px 0px';
+ _container.appendChild( _fpsDiv );
+
+ _fpsText = document.createElement( 'div' );
+ _fpsText.style.fontFamily = 'Helvetica, Arial, sans-serif';
+ _fpsText.style.textAlign = 'left';
+ _fpsText.style.fontSize = '9px';
+ _fpsText.style.color = 'rgb(' + _colors.fps.fg.r + ',' + _colors.fps.fg.g + ',' + _colors.fps.fg.b + ')';
+ _fpsText.style.margin = '0px 0px 1px 3px';
+ _fpsText.innerHTML = '<span style="font-weight:bold">FPS</span>';
+ _fpsDiv.appendChild( _fpsText );
+
+ _fpsCanvas = document.createElement( 'canvas' );
+ _fpsCanvas.width = 74;
+ _fpsCanvas.height = 30;
+ _fpsCanvas.style.display = 'block';
+ _fpsCanvas.style.marginLeft = '3px';
+ _fpsDiv.appendChild( _fpsCanvas );
+
+ _fpsContext = _fpsCanvas.getContext( '2d' );
+ _fpsContext.fillStyle = 'rgb(' + _colors.fps.bg.r + ',' + _colors.fps.bg.g + ',' + _colors.fps.bg.b + ')';
+ _fpsContext.fillRect( 0, 0, _fpsCanvas.width, _fpsCanvas.height );
+
+ _fpsImageData = _fpsContext.getImageData( 0, 0, _fpsCanvas.width, _fpsCanvas.height );
+
+ // ms
+
+ _msDiv = document.createElement( 'div' );
+ _msDiv.style.backgroundColor = 'rgb(' + Math.floor( _colors.ms.bg.r / 2 ) + ',' + Math.floor( _colors.ms.bg.g / 2 ) + ',' + Math.floor( _colors.ms.bg.b / 2 ) + ')';
+ _msDiv.style.padding = '2px 0px 3px 0px';
+ _msDiv.style.display = 'none';
+ _container.appendChild( _msDiv );
+
+ _msText = document.createElement( 'div' );
+ _msText.style.fontFamily = 'Helvetica, Arial, sans-serif';
+ _msText.style.textAlign = 'left';
+ _msText.style.fontSize = '9px';
+ _msText.style.color = 'rgb(' + _colors.ms.fg.r + ',' + _colors.ms.fg.g + ',' + _colors.ms.fg.b + ')';
+ _msText.style.margin = '0px 0px 1px 3px';
+ _msText.innerHTML = '<span style="font-weight:bold">MS</span>';
+ _msDiv.appendChild( _msText );
+
+ _msCanvas = document.createElement( 'canvas' );
+ _msCanvas.width = 74;
+ _msCanvas.height = 30;
+ _msCanvas.style.display = 'block';
+ _msCanvas.style.marginLeft = '3px';
+ _msDiv.appendChild( _msCanvas );
+
+ _msContext = _msCanvas.getContext( '2d' );
+ _msContext.fillStyle = 'rgb(' + _colors.ms.bg.r + ',' + _colors.ms.bg.g + ',' + _colors.ms.bg.b + ')';
+ _msContext.fillRect( 0, 0, _msCanvas.width, _msCanvas.height );
+
+ _msImageData = _msContext.getImageData( 0, 0, _msCanvas.width, _msCanvas.height );
+
+ // mem
+
+ try {
+
+ if ( performance && performance.memory && performance.memory.totalJSHeapSize ) {
+
+ _modesCount = 3;
+
+ }
+
+ } catch ( error ) { };
+
+ _memDiv = document.createElement( 'div' );
+ _memDiv.style.backgroundColor = 'rgb(' + Math.floor( _colors.mem.bg.r / 2 ) + ',' + Math.floor( _colors.mem.bg.g / 2 ) + ',' + Math.floor( _colors.mem.bg.b / 2 ) + ')';
+ _memDiv.style.padding = '2px 0px 3px 0px';
+ _memDiv.style.display = 'none';
+ _container.appendChild( _memDiv );
+
+ _memText = document.createElement( 'div' );
+ _memText.style.fontFamily = 'Helvetica, Arial, sans-serif';
+ _memText.style.textAlign = 'left';
+ _memText.style.fontSize = '9px';
+ _memText.style.color = 'rgb(' + _colors.mem.fg.r + ',' + _colors.mem.fg.g + ',' + _colors.mem.fg.b + ')';
+ _memText.style.margin = '0px 0px 1px 3px';
+ _memText.innerHTML = '<span style="font-weight:bold">MEM</span>';
+ _memDiv.appendChild( _memText );
+
+ _memCanvas = document.createElement( 'canvas' );
+ _memCanvas.width = 74;
+ _memCanvas.height = 30;
+ _memCanvas.style.display = 'block';
+ _memCanvas.style.marginLeft = '3px';
+ _memDiv.appendChild( _memCanvas );
+
+ _memContext = _memCanvas.getContext( '2d' );
+ _memContext.fillStyle = '#301010';
+ _memContext.fillRect( 0, 0, _memCanvas.width, _memCanvas.height );
+
+ _memImageData = _memContext.getImageData( 0, 0, _memCanvas.width, _memCanvas.height );
+
+ function updateGraph( data, value, color ) {
+
+ var x, y, index;
+
+ for ( y = 0; y < 30; y++ ) {
+
+ for ( x = 0; x < 73; x++ ) {
+
+ index = (x + y * 74) * 4;
+
+ data[ index ] = data[ index + 4 ];
+ data[ index + 1 ] = data[ index + 5 ];
+ data[ index + 2 ] = data[ index + 6 ];
+
+ }
+
+ }
+
+ for ( y = 0; y < 30; y++ ) {
+
+ index = (73 + y * 74) * 4;
+
+ if ( y < value ) {
+
+ data[ index ] = _colors[ color ].bg.r;
+ data[ index + 1 ] = _colors[ color ].bg.g;
+ data[ index + 2 ] = _colors[ color ].bg.b;
+
+ } else {
+
+ data[ index ] = _colors[ color ].fg.r;
+ data[ index + 1 ] = _colors[ color ].fg.g;
+ data[ index + 2 ] = _colors[ color ].fg.b;
+
+ }
+
+ }
+
+ }
+
+ function swapMode() {
+
+ _mode ++;
+ _mode == _modesCount ? _mode = 0 : _mode;
+
+ _fpsDiv.style.display = 'none';
+ _msDiv.style.display = 'none';
+ _memDiv.style.display = 'none';
+
+ switch( _mode ) {
+
+ case 0:
+
+ _fpsDiv.style.display = 'block';
+
+ break;
+
+ case 1:
+
+ _msDiv.style.display = 'block';
+
+ break;
+
+ case 2:
+
+ _memDiv.style.display = 'block';
+
+ break;
+ }
+
+ }
+
+ return {
+
+ domElement: _container,
+
+ update: function () {
+
+ _frames ++;
+
+ _time = new Date().getTime();
+
+ _ms = _time - _timeLastFrame;
+ _msMin = Math.min( _msMin, _ms );
+ _msMax = Math.max( _msMax, _ms );
+
+ updateGraph( _msImageData.data, Math.min( 30, 30 - ( _ms / 200 ) * 30 ), 'ms' );
+
+ _msText.innerHTML = '<span style="font-weight:bold">' + _ms + ' MS</span> (' + _msMin + '-' + _msMax + ')';
+ _msContext.putImageData( _msImageData, 0, 0 );
+
+ _timeLastFrame = _time;
+
+ if ( _time > _timeLastSecond + 1000 ) {
+
+ _fps = Math.round( ( _frames * 1000) / ( _time - _timeLastSecond ) );
+ _fpsMin = Math.min( _fpsMin, _fps );
+ _fpsMax = Math.max( _fpsMax, _fps );
+
+ updateGraph( _fpsImageData.data, Math.min( 30, 30 - ( _fps / 100 ) * 30 ), 'fps' );
+
+ _fpsText.innerHTML = '<span style="font-weight:bold">' + _fps + ' FPS</span> (' + _fpsMin + '-' + _fpsMax + ')';
+ _fpsContext.putImageData( _fpsImageData, 0, 0 );
+
+ if ( _modesCount == 3 ) {
+
+ _mem = performance.memory.usedJSHeapSize * 0.000000954;
+ _memMin = Math.min( _memMin, _mem );
+ _memMax = Math.max( _memMax, _mem );
+
+ updateGraph( _memImageData.data, Math.min( 30, 30 - ( _mem / 2 ) ), 'mem' );
+
+ _memText.innerHTML = '<span style="font-weight:bold">' + Math.round( _mem ) + ' MEM</span> (' + Math.round( _memMin ) + '-' + Math.round( _memMax ) + ')';
+ _memContext.putImageData( _memImageData, 0, 0 );
+
+ }
+
+ _timeLastSecond = _time;
+ _frames = 0;
+
+ }
+
+ }
+
+ };
+
+};
1  lib/stats
@@ -1 +0,0 @@
-Subproject commit f25c8af755d5f19e10af531aa48692283709dac7
Please sign in to comment.
Something went wrong with that request. Please try again.