Merge branch 'development' of github.com:snaky-particles/snaky-particles into models

css/style.css

@@ -7,5 +7,5 @@ body {
 #demoCanvas {
     margin: 0px auto;
     padding: 0px auto;
-    background: #fff;
+    background: #1F2921;
 }

js/script.js

@@ -1,6 +1,12 @@
 var stage, controller;
 
+var minimum_cell_size = 30;
+var maximum_grid_size = 100;
+
 function init() {
+    // Do not use this for now...
+    // createjs.MotionGuidePlugin.install();
+
     controller = new Controller;
 
     resize();
@@ -21,9 +27,20 @@ function init() {
 function resize() {
     var height = window.innerHeight;
     var width = window.innerWidth;
-    window.cell_size = height > width ?
-        height / controller.grid_size.y :
-        width / controller.grid_size.x;
+    if((height / minimum_cell_size) > maximum_grid_size){
+        window.cell_size = height / maximum_grid_size;
+        controller.grid_size.y = maximum_grid_size;
+    } else {
+        controller.grid_size.y = Math.floor(height / minimum_cell_size);
+        window.cell_size = minimum_cell_size;
+    }
+    if((width / minimum_cell_size) > maximum_grid_size){
+        window.cell_size = width / maximum_grid_size;
+        controller.grid_size.y = maximum_grid_size;
+    } else {
+        controller.grid_size.x = Math.floor(width / minimum_cell_size);
+        window.cell_size = minimum_cell_size;
+    }
     controller.stage.canvas.width = width;
     controller.stage.canvas.height = height;
 }

js/views/particle.js

@@ -25,6 +25,8 @@
             this.update = function(){};
             createjs.Tween.get(this).to(
                 { x: cell_size * this.model.target.x, y: cell_size * this.model.target.y },
+                // We do not want to have magnetically curved particles for now
+                // {guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},
                 this.model.target.time - this.model.start_time
 				)
 			.addEventListener("change", function(e){

js/views/physicist.js

@@ -1,15 +1,36 @@
 (function(window) {
     function PhysicistView(modelObject){
-        this.graphics.beginFill("red").drawCircle(0, 0, window.cell_size * 0.9 / 2);
+        // this.graphics.beginFill("red").drawCircle(0, 0, window.cell_size * 0.9 / 2);
+        // TODO: read those values from json/whatever
+        var width = 131;
+        this.width = width;
+        var height = 135;
+        this.height = height;
+        var spriteSheet = new createjs.SpriteSheet({
+            framerate: 15,
+            images: ["img/physicist/physicist-spritesheet.png"],
+            frames: {regX: height/2, height: height, count: 8, regY: width/2, width: width},
+            animations: {run: [0, 7]}
+        });
+        var scale = width > height ? cell_size / width : cell_size / height;
+        this.scaleX = scale;
+        this.scaleY = scale;
+        this.spriteSheet = spriteSheet;
+        this.gotoAndPlay("run");
+        this.currentAnimationFrame = Math.floor(Math.random() * 7);
         this.model = modelObject;
 		this.model.view = this;
     }
 
-    PhysicistView.prototype = new createjs.Shape();
+    PhysicistView.prototype = new createjs.Sprite();
+    // PhysicistView.prototype = new createjs.Shape();
 
     PhysicistView.prototype.update = function(){
-        this.x = cell_size * this.model.position.x;
-        this.y = cell_size * this.model.position.y;
+        this.x = cell_size * this.model.position.x + cell_size / 2;
+        this.y = cell_size * this.model.position.y + cell_size / 2;
+        this.rotation = this.model.direction.x > 0 ? -90 :
+            this.model.direction.x < 0 ? 90 :
+            this.model.direction.y > 0 ? 0 : 180;
     }
 
     window.PhysicistView = PhysicistView;