zinelike

slides/js/lib/Sprite.js

@@ -8,7 +8,9 @@ function Sprite(config){
 	self.y = 0;
 	self.pivotX = 0;
 	self.pivotY = 0;
-	self.scale = 1;
+	self.scale = null;
+	self.scaleX = 1;
+	self.scaleY = 1;
 	self.rotation = 0; // radians
 
 	// The image!
@@ -35,8 +37,12 @@ function Sprite(config){
 
 		ctx.save();
 		ctx.translate(self.x, self.y);
-		ctx.scale(self.scale, self.scale);
 		ctx.rotate(self.rotation);
+		if(self.scale){
+			ctx.scale(self.scale, self.scale);
+		}else{
+			ctx.scale(self.scaleX, self.scaleY);
+		}
 		ctx.translate(-self.pivotX, -self.pivotY);
 		ctx.drawImage(self.image, sx, sy, sw, sh, 0, 0, sw, sh);
 		ctx.restore();

slides/js/sim/Connection.js

@@ -8,17 +8,38 @@ function Connection(config){
 	self.uncuttable = config.uncuttable || false;
 	self.sim = config.sim;
 
+	// Sprite
+	self.sprite = new Sprite({
+		src: "sprites/line.png",
+		frames:1, sw:300, sh:20,
+	});
+	self.sprite.pivotX = 2.8;
+	self.sprite.pivotY = 10;
+
 	// Update
 	self.update = function(){};
 
 	// Draw
 	self.draw = function(ctx){
+		/*
 		ctx.strokeStyle = "#444";
 		ctx.lineWidth = self.uncuttable ? 6 : 3; // thick=uncuttable
 		ctx.beginPath();
 		ctx.moveTo(self.from.x, self.from.y);
 		ctx.lineTo(self.to.x, self.to.y);
 		ctx.stroke();
+		*/
+		ctx.save();
+		ctx.translate(self.from.x, self.from.y);
+		var dx = self.to.x - self.from.x;
+		var dy = self.to.y - self.from.y;
+		var a = Math.atan2(dy,dx);
+		var dist = Math.sqrt(dx*dx + dy*dy);
+		self.sprite.scaleX = dist/300;
+		self.sprite.scaleY = self.uncuttable ? 1 : 0.5; // thick=uncuttable
+		self.sprite.rotation = a;
+		self.sprite.draw(ctx);
+		ctx.restore();
 	};
 
 	// Hit Test with a LINE SEGMENT

slides/js/sim/ConnectorCutter.js

@@ -95,12 +95,19 @@ function ConnectorCutter(config){
 
 		// Connecting!
 		if(self.state==1){
-			ctx.strokeStyle = "#ccc";
+			/*ctx.strokeStyle = "#ccc";
 			ctx.lineWidth = 3;
 			ctx.beginPath();
 			ctx.moveTo(self.connectFrom.x, self.connectFrom.y);
 			ctx.lineTo(self.connectTo.x, self.connectTo.y);
-			ctx.stroke();
+			ctx.stroke();*/
+			var tempConnection = new Connection({
+				from:self.connectFrom, to:self.connectTo
+			});
+			ctx.save();
+			ctx.globalAlpha = 0.5;
+			tempConnection.draw(ctx);
+			ctx.restore();
 		}
 
 		// Cutting!

slides/js/sim/Peep.js

@@ -41,7 +41,7 @@ function Peep(config){
 		if(!self.faceBlink){
 			if(Math.random()<0.002) self.faceBlink=true;
 		}else{
-			if(Math.random()<0.09) self.faceBlink=false;
+			if(Math.random()<0.07) self.faceBlink=false;
 		}
 
 		// Friends connected... or infected
@@ -54,53 +54,37 @@ function Peep(config){
 
 	};
 
+	// Body Sprite
+	self.sprite = new Sprite({
+		src: "sprites/peeps.png",
+		frames:6, sw:200, sh:200,
+	});
+	self.sprite.pivotX = 100;
+	self.sprite.pivotY = 100;
+	self.sprite.scale = 0.3;
+	//self.sprite.gotoFrame(1);
+
 	// Draw
 	var radius = 25;
 	var barWidth = 30;
 	var barHeight = 10;
+	var bodyRotation = Math.TAU*Math.random();
 	self.draw = function(ctx){
 
 		ctx.save();
 		ctx.translate(self.x, self.y);
 
 		// Circle
-		var myColor = self.infected ? PEEP_STATE_COLORS[2] : PEEP_STATE_COLORS[1];
-		ctx.fillStyle = myColor;
-		ctx.beginPath();
-		ctx.arc(0, 0, radius, 0, Math.TAU, false);
-		ctx.fill();
-
-		// INFECT ON NEXT TURN?
-		/*var infectOnNextTurn = (self.numFriends>0 && self.numInfectedFriends/self.numFriends>=CONTAGION_THRESHOLD);
-		if(infectOnNextTurn){
-			ctx.strokeStyle = PEEP_STATE_COLORS[2];
-			ctx.lineWidth = 2;
-			ctx.stroke();
-		}*/
+		self.sprite.rotation = bodyRotation;
+		self.sprite.gotoFrame(self.infected ? 1 : 0);
+		self.sprite.draw(ctx);
 
 		// Face
 		ctx.save();
 		ctx.translate(self.faceX, self.faceY);
-		ctx.scale(1.25, 1.25);
-			ctx.fillStyle = "rgba(0,0,0,0.5)";
-			if(self.faceBlink){
-				ctx.beginPath();
-				ctx.rect(-14, -1, 8, 2);
-				ctx.fill();
-				ctx.beginPath();
-				ctx.rect(6, -1, 8, 2);
-				ctx.fill();
-			}else{
-				ctx.beginPath();
-				ctx.arc(-10, -1, 3, 0, Math.TAU, false);
-				ctx.fill();
-				ctx.beginPath();
-				ctx.arc(10, -1, 3, 0, Math.TAU, false);
-				ctx.fill();
-			}
-			ctx.beginPath();
-			ctx.rect(-7, 4, 14, 2);
-			ctx.fill();
+		self.sprite.rotation = 0;
+		self.sprite.gotoFrame(self.faceBlink ? 7 : 6);
+		self.sprite.draw(ctx);
 		ctx.restore();
 
 		//////////////////////////////////////////////////////////