added more stuff to the v2

fixed stuff in box() added automatic id/className handling in constructors added interactivity to boxExample
boblemarin · Apr 16, 2012 · 9913fe8 · 9913fe8
1 parent 054153e
commit 9913fe8
Show file tree

Hide file tree

Showing 7 changed files with 385 additions and 40 deletions.
diff --git a/examples2/Sprite3D2.html b/examples2/Sprite3D2.html
@@ -56,14 +56,14 @@
 
 <body>
 
-<script src="js/Sprite3D.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/Sprite3D3.js" type="text/javascript" charset="utf-8"></script>
 <script>
 
 (function(){
 	var stage = Sprite3D.stage();
 
 
-	var d = stage.addChild(
+	var d = stage.appendChild(
 		new Sprite3D()
 		.set("id", "white")
 		.transformOrigin(0,0)

diff --git a/examples2/basicExample.html b/examples2/basicExample.html
@@ -56,17 +56,17 @@
 
 		</style>
 
-		<script src="js/Sprite3D.js" type="text/javascript"></script>
+		<script src="js/Sprite3D3.js" type="text/javascript"></script>
 		<script type="text/javascript">
 
 function init() {
 
-	if ( false )
+	if ( true )
 	{
 		// short version
-		Sprite3D.stage().addChild( 
-			new Sprite3D()
-				.className("image")
+		Sprite3D.stage().appendChild( 
+			Sprite3D.create()
+				.set("className","image")
 				.origin( 200, 250, 0 )
 				.rotationX( -20 )
 				.update()
@@ -106,15 +106,6 @@
 		</script>
 	</head>
 	<body onload="init();">
-		<script type="text/javascript">
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-		</script>
-		<script type="text/javascript">
-		try {
-		var pageTracker = _gat._getTracker("UA-9528692-4");
-		pageTracker._trackPageview();
-		} catch(err) {}</script>
-		<a href="http://minimal.be/lab/Sprite3D/"><img src="img/banner.png" style="border:0;position:absolute;right:0;top:0" alt="built width Sprite3D.js" /></a>
+
 	</body>
 </html>
diff --git a/examples2/basicHierarchyExample.html b/examples2/basicHierarchyExample.html
@@ -131,8 +131,11 @@
 	);
 
 	// wait for click or touch
-	container.addEventListener( "mousedown", startRotation );
-	container.addEventListener( "touchstart", startRotation );
+	//container.addEventListener( "mousedown", startRotation );
+	//container.addEventListener( "touchstart", startRotation );
+
+
+	setInterval( move, 1000 / 40 );
 }	
 
 function startRotation(e,s) {

diff --git a/examples2/boxExample.html b/examples2/boxExample.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--
+		Sprite3D.js example file
+		Visit the internets for documentation, updates and examples.
+		https://github.com/boblemarin/Sprite3D.js
+		http://minimal.be/lab/Sprite3D
+
+		Copyright (c) 2010 boblemarin http://www.minimal.be
+
+		Permission is hereby granted, free of charge, to any person
+		obtaining a copy of this software and associated documentation
+		files (the "Software"), to deal in the Software without
+		restriction, including without limitation the rights to use,
+		copy, modify, merge, publish, distribute, sublicense, and/or sell
+		copies of the Software, and to permit persons to whom the
+		Software is furnished to do so, subject to the following
+		conditions:
+
+		The above copyright notice and this permission notice shall be
+		included in all copies or substantial portions of the Software.
+
+		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+		EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+		OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+		NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+		HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+		-->
+		<meta charset="utf-8" />
+		<meta name='HandheldFriendly' content='True' />
+		<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+		<title>Sprite3D.js - Basics - Box</title>
+
+		<style>
+
+html, body { height: 100%; }
+
+body {
+	background-color: white;
+	color: black;
+
+	margin: 0px;
+	padding: 0px;
+	overflow: hidden;
+}
+
+.box1 {
+	-webkit-transition: all .4s ease-in-out;
+}
+
+.box1 .front { background: rgba(255,0,0,0.55); }
+.box1 .back { background: rgba(0,255,0,0.55); }
+.box1 .left { background: rgba(0,0,255,0.55); }
+.box1 .right { background: rgba(255,255,0,0.55); }
+.box1 .bottom { background: rgba(255,0,255,0.55); }
+.box1 .top { background: rgba(0,255,255,0.55); }
+
+</style>
+
+	</head>
+	<body>
+		<script src="js/Sprite3D3.js" type="text/javascript"></script>
+		<script type="text/javascript">
+		(function() {
+
+			// create the main container
+			var stage = Sprite3D.stage();
+
+			// "verbose" version
+			var box = Sprite3D.box( 200, 200, 200, ".box1" );
+//			box.className = "box1";
+			box.rotation( -15, 15, 0	)
+			box.update();
+			stage.appendChild(box);
+
+			// compact version
+			// var box = stage.appendChild( Sprite3D.box(200).set("className","box1").rotation(-15,15,0).update() );
+
+
+
+			// add some basic interaction (move on click)
+			box.addEventListener( "click", onBoxClick, false );
+
+			function onBoxClick(e){
+				// NOTE : 
+				// In this listener function, "this" holds the reference to the box object,
+				// and "e.target" points to the cube's face that was clicked
+
+				// let's add some *relative* rotation, and it will result 
+				// in a nice animation thanks to the CSS transition defined above
+				this.rotate( Math.random()*40-20, Math.random()*40-20, 0 ).update();
+			}
+		})();
+		</script>
+
+	</body>
+</html>
diff --git a/examples2/boxExample2.html b/examples2/boxExample2.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--
+		Sprite3D.js example file
+		Visit the internets for documentation, updates and examples.
+		https://github.com/boblemarin/Sprite3D.js
+		http://minimal.be/lab/Sprite3D
+
+		Copyright (c) 2010 boblemarin http://www.minimal.be
+
+		Permission is hereby granted, free of charge, to any person
+		obtaining a copy of this software and associated documentation
+		files (the "Software"), to deal in the Software without
+		restriction, including without limitation the rights to use,
+		copy, modify, merge, publish, distribute, sublicense, and/or sell
+		copies of the Software, and to permit persons to whom the
+		Software is furnished to do so, subject to the following
+		conditions:
+
+		The above copyright notice and this permission notice shall be
+		included in all copies or substantial portions of the Software.
+
+		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+		EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+		OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+		NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+		HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+		-->
+		<meta charset="utf-8" />
+		<meta name='HandheldFriendly' content='True' />
+		<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+		<title>Sprite3D.js - Basics - Box</title>
+
+		<style>
+
+html, body { height: 100%; }
+
+body {
+	background-color: white;
+	color: black;
+	margin: 0px;
+	padding: 0px;
+	overflow: hidden;
+}
+
+.box1 {
+	line-height: 160px;
+	text-align: center;
+	font-size: 40px;
+	font-family: Futura;
+	-webkit-transition: all .2s ease-in-out;
+}
+
+.box1 .front { background: rgba(255,0,0,0.55); }
+.box1 .back { background: rgba(0,255,0,0.55); }
+.box1 .left { background: rgba(0,0,255,0.55); }
+.box1 .right { background: rgba(255,255,0,0.55); }
+.box1 .bottom { background: rgba(255,0,255,0.55); }
+.box1 .top { background: rgba(0,255,255,0.55); }
+
+</style>
+
+		<script src="js/Sprite3D3.js" type="text/javascript"></script>
+		<script type="text/javascript">
+
+function init() {
+
+	var stage = Sprite3D.stage(),
+		rx=0,ry=0,rz=0;
+
+		var box = Sprite3D.box( 
+			200,200,200 );
+			/*Math.random()*400+50,
+			Math.random()*400+50, 
+			Math.random()*400+50 );*/
+		box.className = "box1";
+		box.rotate( 
+			rx+=Math.random()*7-3.5, 
+			ry+=Math.random()*7-3.5, 
+			0
+		).update();
+		stage.appendChild(box);
+
+	function addTheBox() {
+		//stage.innerHTML = "";
+		box.rotate(
+			rx+=Math.random()*7-3.5, 
+			ry+=Math.random()*7-3.5, 
+			0
+		).scale(
+			0.25+Math.random()*4,
+			0.25+Math.random()*4,
+			0.25+Math.random()*4
+		).update();
+	}
+
+	setInterval( addTheBox, 250 );
+}	
+
+
+
+		</script>
+	</head>
+	<body onload="init();">
+	</body>
+</html>
diff --git a/examples2/creationExample.html b/examples2/creationExample.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--
+		Sprite3D.js example file
+		Visit the internets for documentation, updates and examples.
+		https://github.com/boblemarin/Sprite3D.js
+		http://minimal.be/lab/Sprite3D
+
+		Copyright (c) 2010 boblemarin http://www.minimal.be
+
+		Permission is hereby granted, free of charge, to any person
+		obtaining a copy of this software and associated documentation
+		files (the "Software"), to deal in the Software without
+		restriction, including without limitation the rights to use,
+		copy, modify, merge, publish, distribute, sublicense, and/or sell
+		copies of the Software, and to permit persons to whom the
+		Software is furnished to do so, subject to the following
+		conditions:
+
+		The above copyright notice and this permission notice shall be
+		included in all copies or substantial portions of the Software.
+
+		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+		EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+		OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+		NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+		HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+		-->
+		<meta charset="utf-8" />
+		<meta name='HandheldFriendly' content='True' />
+		<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+		<title>Sprite3D.js - Basics - Box</title>
+
+		<style>
+
+html, body { height: 100%; }
+
+body {
+	background-color: white;
+	color: black;
+
+	margin: 0px;
+	padding: 0px;
+	overflow: hidden;
+}
+
+.image {
+	background-image: url('img/html5_logo.png');
+	width: 400px;
+	height: 500px;
+}
+
+</style>
+
+	</head>
+	<body>
+		<script src="js/Sprite3D3.js" type="text/javascript"></script>
+		<script type="text/javascript">
+		(function() {
+
+			// create the main container
+			var stage = Sprite3D.stage();
+
+			var sprite = Sprite3D.create( ".image" );
+		})();
+		</script>
+
+	</body>
+</html>