Add . instruction for inverting angle, and jump instruction without drawing

Author: RolandR

Turtle.js

@@ -1,24 +1,41 @@
 function Turtle(canvas, context, startPos, startAngle){
 
+	const rad = (180/Math.PI);
+	const sin = Math.sin;
+	const cos = Math.cos;
+
 	var x = startPos[0];
 	var y = startPos[1];
 
 	var stack = [];
 
-	var angle = startAngle / (180/Math.PI);
+	var angle = startAngle / rad;
+
+	var sign = 1;
 
 	context.beginPath();
 	context.moveTo(x, y);
 
 	function move(distance){
-		x += Math.sin(angle) * distance;
-		y -= Math.cos(angle) * distance;
+		x += sin(angle) * distance;
+		y -= cos(angle) * distance;
 
 		context.lineTo(x, y);
 	}
 
+	function jump(distance){
+		x += sin(angle) * distance;
+		y -= cos(angle) * distance;
+		
+		context.moveTo(x, y);
+	}
+
 	function turn(a){
-		angle += a / (180/Math.PI);
+		angle += sign * a / rad;
+	}
+
+	function invert(){
+		sign = 0 - sign;
 	}
 
 	function push(){
@@ -35,7 +52,9 @@ function Turtle(canvas, context, startPos, startAngle){
 
 	return {
 		 move: move
+		,jump: jump
 		,turn: turn
+		,invert: invert
 		,push: push
 		,pop: pop
 	};

l-systems.html

@@ -74,9 +74,13 @@ <h3>Drawing graphics with L-Systems</h3>
 							<th>Result</th>
 						</tr>
 						<tr>
-							<td><code>A-Z</code></td>
+							<td><code>A-L</code></td>
 							<td>Draw straight line of length defined by <em>Distance</em></td>
 						</tr>
+						<tr>
+							<td><code>M-Z</code></td>
+							<td>Jump forward by <em>Distance</em> without drawing</td>
+						</tr>
 						<tr>
 							<td><code>a-z</code></td>
 							<td>Do nothing: These symbols are only used in the replacement phase</td>
@@ -85,6 +89,10 @@ <h3>Drawing graphics with L-Systems</h3>
 							<td><code>+ or -</code></td>
 							<td>Turn by positive or negative <em>Angle</em></td>
 						</tr>
+						<tr>
+							<td><code>.</code></td>
+							<td>Invert the meaning of <code>+</code> and <code>-</code></td>
+						</tr>
 						<tr>
 							<td><code>[ or ]</code></td>
 							<td>

l-systems.js

@@ -268,7 +268,6 @@ function LSystem(){
 			if(Date.now() - startTime > timeLimit){
 				document.getElementById("timeLimitLabel").className += "alert ";
 				setTimeout(function(){
-					console.log(document.getElementById("timeLimitLabel").className);
 					document.getElementById("timeLimitLabel").className = document.getElementById("timeLimitLabel").className.replace("alert ", '');
 				}, 100);
 				console.log("Replacing reached time limit after "+(Date.now() - startTime)+"ms.");
@@ -288,12 +287,47 @@ function LSystem(){
 
 		document.getElementById("replacementInfo").innerHTML += "<p>"+a+" of "+iterations+" replacement iterations, "+(Date.now() - startTime)+"ms</p>";
 
+		//ins = optimiseTurns(ins);
+		// Turns out this doesn't speed up drawing at all
+
 		//document.body.className = document.body.className.replace("wait ", '');
 
 		return ins;
 
 	}
 
+	function optimiseTurns(ins){
+
+		var startTime = Date.now();
+		
+		var out = "";
+		var sum = 0;
+		
+		for(i = 0; i < ins.length; i++){
+			if(ins[i] == "+"){
+				sum++;
+			} else if(ins[i] == "-"){
+				sum--;
+			} else {
+				if(sum > 0){
+					while(sum--){
+						out += "+";
+					}
+				} else if(sum < 0){
+					while(sum++){
+						out += "-";
+					}
+				}
+				sum = 0;
+				out += ins[i];
+			}
+		}
+
+		console.log("Reduced instruction length to "+Math.round(10000*out.length/ins.length)/100+"% in "+(Date.now() - startTime)+"ms.");
+
+		return out;
+	}
+
 	function draw(){
 
 		//document.body.className += "wait ";
@@ -319,7 +353,6 @@ function LSystem(){
 				if(Date.now() - startTime > timeLimit){
 					document.getElementById("timeLimitLabel").className += "alert ";
 					setTimeout(function(){
-						console.log(document.getElementById("timeLimitLabel").className);
 						document.getElementById("timeLimitLabel").className = document.getElementById("timeLimitLabel").className.replace("alert ", '');
 					}, 100);
 					console.log("Drawing reached time limit after "+(Date.now() - startTime)+"ms.");
@@ -335,16 +368,21 @@ function LSystem(){
 				case "-":
 					turtle.turn(-angle);
 				break;
+				case ".":
+					turtle.invert();
+				break;
 				case "[":
 					turtle.push();
 				break;
 				case "]":
 					turtle.pop();
 				break;
 				default:
-					if(ins[i].match(/[A-Z]/)){
+					if(ins[i].match(/[A-L]/)){
 						turtle.move(distance);
 						moveCount++;
+					} else if(ins[i].match(/[M-Z]/)){
+						turtle.jump(distance);
 					}
 				break;
 			}
@@ -513,6 +551,9 @@ function LSystem(){
 		popup = document.getElementById("importPopup");
 		document.getElementById("overlay").style.display = "flex";
 		popup.style.display = "flex";
+
+		document.getElementById("importArea").focus();
+		document.getElementById("importArea").select();
 	}
 
 	document.getElementById("importButton").onclick = function(){
@@ -544,8 +585,6 @@ function LSystem(){
 
 		if(instructions){
 			draw();
-		} else {
-			console.log("foo");
 		}
 	}