added the demo for realz

tinyspeck · Jul 22, 2011 · cfc8ff1 · cfc8ff1
1 parent 7523011
commit cfc8ff1
Show file tree

Hide file tree

Showing 2 changed files with 174 additions and 18 deletions.
diff --git a/anim.html b/anim.html
@@ -0,0 +1,162 @@
+<html>
+<head>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+<script>
+
+var g_sheets = {};
+var g_anims = {};
+var g_index = {};
+
+var g_anim = '';
+var g_next_frame = 0;
+
+
+$(function(){
+
+	jQuery.support.cors = true;
+
+	$.ajax({
+		'url' : 'http://api.glitch.com/simple/players.getAnimations',
+		'dataType' : 'json',
+		'data' : { 'player_tsid' : 'PLI10VSF8V7IE' },
+		'success' : function(data, textStatus, jqXHR){
+			if (data.ok){
+				g_sheets = data.sheets;
+				g_anims = data.anims;
+				build_index();
+				$('#loading').text("Loading sheets...");
+				load_sheets();
+			}else{
+				alert('api error');
+			}
+		},
+		'error' : function(jqXHR, textStatus, errorThrown){
+			alert('api error');
+			alert(errorThrown);
+		}
+	});
+});
+
+function build_index(){
+	for (var i in g_sheets){
+
+		for (var j=0; j<g_sheets[i].frames.length; j++){
+
+			var col = j % g_sheets[i].cols;
+			var row = Math.floor(j / g_sheets[i].cols);
+
+			g_index[g_sheets[i].frames[j]] = [i, col, row];
+		}
+	}
+}
+
+function load_sheets(){
+	for (var i in g_sheets){
+		g_sheets[i].img = new Image();
+		g_sheets[i].img.onload = function(i){
+			return function(){
+				image_loaded(i);
+			};
+		}(i);
+		g_sheets[i].img.onerror = image_failed;
+		g_sheets[i].img.onabort = image_failed;
+		g_sheets[i].loaded = false;
+		g_sheets[i].img.src = g_sheets[i].url;
+	}
+}
+
+function image_failed(){
+	alert('failed to load an image :(');
+}
+
+function image_loaded(idx){
+
+	g_sheets[idx].loaded = true;
+	g_sheets[idx].frame_width = Math.round(g_sheets[idx].img.width / g_sheets[idx].cols);
+	g_sheets[idx].frame_height = Math.round(g_sheets[idx].img.height / g_sheets[idx].rows);
+
+	var done = 0;
+	var num = 0;
+	for (var i in g_sheets){
+		num++;
+		if (g_sheets[i].loaded) done++;
+	}
+
+	if (done == num){
+
+		var choices = '';
+		for (var i in g_anims){
+			choices += "<option>"+i+"</option>";
+		}
+
+		$('#choose-anim').html(choices).val('walk1x').change(function(){
+			g_anim = $('#choose-anim').val();
+			g_next_frame = 0;
+		});
+
+		$('#loading').hide();
+		$('#content').show();
+
+		animate();
+	}else{
+		$('#loading').text("Loading sheets: "+done+"/"+num);
+	}
+}
+
+function drawFrame(id){
+
+	//console.log('draw frame '+id);
+
+	// find source coords
+	var sheet = g_index[id][0];
+	var col = g_index[id][1];
+	var row = g_index[id][2];
+
+	var f_w = g_sheets[sheet].frame_width;
+	var f_h = g_sheets[sheet].frame_height;
+	var f_x = f_w * col;
+	var f_y = f_h * row;
+
+	var p_x = (300 / 2) - (f_w / 2);
+	var p_y = (300 / 2) - (f_h / 2);
+
+	var canvas = document.getElementById("my-canvas");
+	var context = canvas.getContext("2d");
+
+	context.clearRect(0, 0, 300, 300);
+	context.drawImage(g_sheets[sheet].img, f_x, f_y, f_w, f_h, p_x, p_y, f_w, f_h);
+}
+
+function nextFrame(){
+
+	drawFrame(g_anims[g_anim][g_next_frame]);
+
+	g_next_frame++;
+	if (g_next_frame >= g_anims[g_anim].length){
+		g_next_frame = 0;
+	}
+}
+
+function animate(){
+
+	g_anim = 'walk1x';
+	g_next_frame = 0;
+
+	window.setInterval(nextFrame, 33);
+}
+
+</script>
+</head>
+<body>
+
+<h1>Avatar JS Tester</h1>
+
+<div id="loading">Loading...</div>
+<div id="content" style="display: none">
+	<canvas id="my-canvas" width="300" height="300" style="border: 1px solid black"></canvas><br />
+	Animation: 
+	<select id="choose-anim"></select>
+</div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -8,9 +8,9 @@
   <style type="text/css">
     body {
       margin-top: 1.0em;
-      background-color: #6a5c29;
+      background-color: #ffffff;
       font-family: Helvetica, Arial, FreeSans, san-serif;
-      color: #ffffff;
+      color: #666;
     }
     #container {
       margin: 0 auto;
@@ -35,38 +35,32 @@
 
   <div id="container">
 
-    <div class="download">
-      <a href="http://github.com/tinyspeck/avatar-animations/zipball/master">
-        <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
-      <a href="http://github.com/tinyspeck/avatar-animations/tarball/master">
-        <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
-    </div>
-
     <h1><a href="http://github.com/tinyspeck/avatar-animations">avatar-animations</a>
       <span class="small">by <a href="http://github.com/tinyspeck">tinyspeck</a></span></h1>
 
     <div class="description">
       Use animated Glitch avatars in your own apps
     </div>
 
-    <h2>Contact</h2>
-<p>Tiny Speck (cal@tinyspeck.com)<br/>      </p>
+	<p>
+		This is a quick and dirty demo of how to use the Glitch avatar animation API.
+		It requires a browser that supports Canvas (like Chrome, Safari or FireFox).
+	</p>
 
+	<p>
+		Ready? <a href="anim.html">View the demo</a>.
+	</p>
 
-    <h2>Download</h2>
+
+    <h2>The source</h2>
     <p>
-      You can download this project in either
-      <a href="http://github.com/tinyspeck/avatar-animations/zipball/master">zip</a> or
-      <a href="http://github.com/tinyspeck/avatar-animations/tarball/master">tar</a> formats.
+      You can <a href="http://github.com/tinyspeck/avatar-animations/">view the source code</a> on GitHub.
     </p>
     <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
       by running:
       <pre>$ git clone git://github.com/tinyspeck/avatar-animations</pre>
     </p>
 
-    <div class="footer">
-      get the source code on GitHub : <a href="http://github.com/tinyspeck/avatar-animations">tinyspeck/avatar-animations</a>
-    </div>
 
   </div>