Bugged version

The canvas representation starts at the top left corner, and the usual
trigonometry starts at the bottom left corner.
This causes some problems when using trigonometry to compute directions.

To solve this problem, I should develop the physic engine and the
graphic engines independantly.

Author: alagane

script.js

@@ -19,26 +19,38 @@ window.onload = function() {
 			new Position(60, 60), new Position(60, 260)
 		)
 	);
-	myWorld.path.next = new Line(
-		new Position(60, 260), new Position(160, 360)
+	var path = myWorld.path;
+	path.next = new Circle(new Position(160, 260), 100, Math.PI, Math.PI / 2);
+	path.next.previous = path;
+	path = path.next;
+	path.next = new Line(
+		new Position(160, 360), new Position(360, 360)
 	);
-	myWorld.path.next.previous = myWorld.path;
+	path.next.previous = path;
+	path = path.next;
+	path.next = new Circle(new Position(560, 160), 200, Math.PI / 2, Math.PI / 2);
+	path.next.previous = path;
+	/*
+	path.next = new Circle(new Position(360, 260), 300, Math.PI, Math.PI);
+	path.next.previous = path;
+	*/
+
 	myWorld.tokens = [new Token(50, myWorld.path, 0, 0.1)];
 
 	printPaths(myWorld, rcontext); // We just have to do it once
 	printTokens(myWorld, tcontext);	
 
-	setInterval(function() {
-		updateVelocity(myWorld.tokens[0], myWorld, 1 / 60);
-		updatePosition(myWorld.tokens[0], 1 / 60);
-		printTokens(myWorld, tcontext);
-	}, 1000 / 60);
-
+	var play = false;
+	var interval;
 	document.getElementById('tokens').onclick = function() {
-		updateVelocity(myWorld.tokens[0], myWorld, 1);
-		updatePosition(myWorld.tokens[0], 1);
-		printTokens(myWorld, tcontext);
-		console.log(myWorld.tokens[0].velocity);
+		if (play = !play) {
+			clearInterval(interval);
+		} else {
+			interval = setInterval(function() {
+				updateTokens(myWorld, 1/60);
+				printTokens(myWorld, tcontext);
+			}, 1000/60);
+		}
 	}
 };
 
@@ -69,11 +81,12 @@ function Line(start, end) {
 	this.length = Math.sqrt(distx * distx + disty * disty);
 }
 
-function Circle(center, radius, start, end) {
+function Circle(center, radius, start, angle) {
 	this.center = center;
 	this.radius = radius;
 	this.start = start;
-	this.end = end;
+	this.angle = angle;
+	this.length = Math.abs(radius * angle);
 }
 
 function Token(size, path, progression, friction) {
@@ -85,10 +98,16 @@ function Token(size, path, progression, friction) {
 }
 
 function updateVelocity(token, world, time) {
-	var pathDir = Math.atan(
-		(token.path.end.y - token.path.start.y) /
-		(token.path.end.x - token.path.start.x)
-	);
+	var pathDir;
+	if (token.path instanceof Line) {
+		pathDir = Math.atan(
+			(token.path.end.y - token.path.start.y) /
+			(token.path.end.x - token.path.start.x)
+		);
+	} else if (token.path instanceof Circle) {
+		pathDir = - (token.progression / token.path.radius - token.path.start + Math.PI / 2) % Math.PI;
+	}
+	console.log(pathDir);
 	token.velocity += time * world.force.value * Math.cos(world.force.direction - pathDir);
 	token.velocity *= (1 - time * token.friction);
 }
@@ -118,15 +137,25 @@ function updatePosition(token, time) {
 	}
 }
 
+function updateTokens(world, time) {
+	for (var i = 0; i < world.tokens.length; i++) {
+		updateVelocity(world.tokens[i], world, time);
+		updatePosition(world.tokens[i], time);
+	}
+}
 function position(token) {
 	if (token.path instanceof Line) {
 		return new Position(
 			token.path.start.x +
 				(token.path.end.x - token.path.start.x) * token.progression / token.path.length, 
 			token.path.start.y +
-				(token.path.end.y - token.path.start.y) * token.progression / token.path.length);
-	} else {
-		return 0;
+				(token.path.end.y - token.path.start.y) * token.progression / token.path.length
+		);
+	} else if (token.path instanceof Circle) {
+		return new Position(
+			token.path.center.x + token.path.radius * Math.cos(token.path.start - (token.progression / token.path.length) * token.path.angle),
+			token.path.center.y + token.path.radius * Math.sin(token.path.start - (token.progression / token.path.length) * token.path.angle)
+		);
 	}
 }
 
@@ -140,10 +169,14 @@ function printPaths(world, context) {
 	for (p = world.path; hasNext(p); p = p.next) {
 		if (p instanceof Line) {
 			printLine(p, context);
+		} else if (p instanceof Circle) {
+			printCircle(p, context);
 		}
 	}
 	if (p instanceof Line) {
 		printLine(p, context);
+	} else if (p instanceof Circle) {
+		printCircle(p, context);
 	}
 }
 
@@ -154,6 +187,16 @@ function printLine(line, context) {
 	console.log('Line : ' + line.length);
 }
 
+function printCircle(circle, context) {
+	context.beginPath();	
+	if (circle.angle >= 0) {
+		context.arc(circle.center.x, circle.center.y, circle.radius, circle.start - circle.angle, circle.start);
+	} else {
+		context.arc(circle.center.x, circle.center.y, circle.radius, circle.start, circle.start - circle.angle);
+	}
+	context.stroke();
+}
+
 function printTokens(world, context) {
 	context.clearRect(0, 0, 1000, 1000);
 	for (var i = 0; i < world.tokens.length; i++) {