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

…Stats.js in lib.
lamberta · Apr 7, 2011 · d034564 · d034564
1 parent 691ba34
commit d034564
Show file tree

Hide file tree

Showing 6 changed files with 341 additions and 41 deletions.
diff --git a/.gitmodules b/.gitmodules
diff --git a/README b/README
diff --git a/README.md b/README.md
@@ -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>
diff --git a/build/make-doodle b/build/make-doodle
@@ -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
+#dependencies
-STATS_FILE="$PROJECT_HOME/lib/stats/src/Stats.js"
+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"

diff --git a/lib/Stats.js b/lib/Stats.js
@@ -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;
+
+			}
+
+		}
+
+	};
+
+};