10 years ago · 01f5389d52
--- a/.DS_Store
+++ b/.DS_Store
--- a/img/anti-muon/antimyon-spritesheet.png
+++ b/img/anti-muon/antimyon-spritesheet.png
--- a/img/electron/electron-spritesheet.png
+++ b/img/electron/electron-spritesheet.png
--- a/img/higgs/higgs-01.png
+++ b/img/higgs/higgs-01.png
--- a/img/higgs/higgs-02.png
+++ b/img/higgs/higgs-02.png
--- a/img/higgs/higgs-03.png
+++ b/img/higgs/higgs-03.png
--- a/img/higgs/higgs-04.png
+++ b/img/higgs/higgs-04.png
--- a/img/higgs/higgs-05.png
+++ b/img/higgs/higgs-05.png
--- a/img/higgs/higgs-06.png
+++ b/img/higgs/higgs-06.png
--- a/img/higgs/higgs-07.png
+++ b/img/higgs/higgs-07.png
--- a/img/higgs/higgs-08.png
+++ b/img/higgs/higgs-08.png
--- a/img/higgs/higgs-09.png
+++ b/img/higgs/higgs-09.png
--- a/img/higgs/higgs-spritesheet.png
+++ b/img/higgs/higgs-spritesheet.png
--- a/img/muon/myon-spritesheet.png
+++ b/img/muon/myon-spritesheet.png
--- a/img/physicist/physicist-spritesheet.png
+++ b/img/physicist/physicist-spritesheet.png
--- a/img/positron/.DS_Store
+++ b/img/positron/.DS_Store
--- a/img/positron/positron-spritesheet.png
+++ b/img/positron/positron-spritesheet.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,90 @@
 
															+<!DOCTYPE html>
														
 
															+<html>
														
 
															+<head>
														
 
															+	<title>EaselJS demo: Time based animation</title>
														
 
															+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
														
 
															+	<script>
														
 
															+    var cellSize = 50;
														
 
															+    var grid = [[]];
														
 
															+    for(var i=0; i<100; i++){
														
 
															+      grid[i] = [];
														
 
															+      for(var j=0; j<100; j++){
														
 
															+        grid[i][j] = {
														
 
															+          x: cellSize / 2 + i * cellSize,
														
 
															+          y: cellSize / 2 + j * cellSize
														
 
															+        };
														
 
															+      }
														
 
															+    }
														
 
															+		
														
 
															+		var stage, circle, snake;
														
 
															+		function init() {
														
 
															+			stage = new createjs.Stage("demoCanvas");
														
 
															+
														
 
															+      snake = {};
														
 
															+      snake.body = [];
														
 
															+      for(var i=0; i<8; i++){
														
 
															+			  circle = new createjs.Shape();
														
 
															+			  circle.graphics.beginFill("red").drawCircle(0, 0, 20);
														
 
															+        circle.direction = {x: 0, y: 0};
														
 
															+			  stage.addChild(circle);
														
 
															+        snake.body.push(circle);
														
 
															+      }
														
 
															+      snake.update = function(){
														
 
															+        for(var i=this.body.length - 1; i>0; i--){
														
 
															+          this.body[i].x = this.body[i-1].x;
														
 
															+          this.body[i].y = this.body[i-1].y;
														
 
															+          this.body[i].direction.x = this.body[i-1].direction.x;
														
 
															+          this.body[i].direction.y = this.body[i-1].direction.y;
														
 
															+        }
														
 
															+      };
														
 
															+			
														
 
															+			createjs.Ticker.on("tick", tick);
														
 
															+			createjs.Ticker.setFPS(20);
														
 
															+
														
 
															+      stage.on("stagemousedown", function(evt){
														
 
															+        Math.abs(evt.stageX - snake.body[0].x) > Math.abs(evt.stageY - snake.body[0].y) ? 
														
 
															+          function(){
														
 
															+            snake.body[0].direction.x = evt.stageX > snake.body[0].x ? 1 : -1;
														
 
															+            snake.body[0].direction.y = 0;
														
 
															+          }() : function(){
														
 
															+            snake.body[0].direction.y = evt.stageY > snake.body[0].y ? 1 : -1;
														
 
															+            snake.body[0].direction.x = 0;
														
 
															+          }();
														
 
															+      });
														
 
															+		}
														
 
															+
														
 
															+    var time = 0;
														
 
															+		
														
 
															+		function tick(event) {
														
 
															+      time = event.time - time > 400 ? event.time : time;
														
 
															+
														
 
															+			// time based
														
 
															+      if(event.time == time){
														
 
															+        var head = snake.body[0];
														
 
															+        snake.update();
														
 
															+        head.x = (head.x <= stage.canvas.width && head.x >= 0) ?
														
 
															+          head.x + head.direction.x * cellSize :
														
 
															+            head.x < 0 ? stage.canvas.width : 0;
														
 
															+        head.y = (head.y <= stage.canvas.height && head.y >= 0) ?
														
 
															+          head.y + head.direction.y * cellSize :
														
 
															+            head.y < 0 ? stage.canvas.height : 0;
														
 
															+        
														
 
															+        stage.update(event);
														
 
															+      }
														
 
															+		}
														
 
															+	</script>
														
 
															+</head>
														
 
															+<body onload="init();">
														
 
															+	<select onchange="createjs.Ticker.setFPS(Number(this.value));">
														
 
															+		<option value="10">10 fps</option>
														
 
															+		<option value="20" selected>20 fps</option>
														
 
															+		<option value="30">30 fps</option>
														
 
															+		<option value="40">40 fps</option>
														
 
															+		<option value="50">50 fps</option>
														
 
															+		<option value="60">60 fps</option>
														
 
															+	</select><br>
														
 
															+	<canvas id="demoCanvas" width="800" height="700">
														
 
															+		alternate content
														
 
															+	</canvas>
														
 
															+</body>
														
 
															+</html>