ArthurAttout · July 3, 2018 10:40
diff --git a/recaman.html b/recaman.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body>

 <canvas id="myCanvas" width="9000" height="1500" style="border:1px solid #d3d3d3;">
 Your browser does not support the HTML5 canvas tag.</canvas>

 <div id="currentValue" style="font-size: 500px">
 	0
 </div>

 <script>

 	// The length in pixel of one unit
 	var unit = 10;
 	
 	// The Y position of the number line
 	var lineY = 500;
 	
 	// The upper limit of the generated Recaman sequence
 	var maximum = 3000;
 	
 	// The speed of the drawing (miliseconds)
 	var speed = 1000;
 	
 	var c = document.getElementById("myCanvas");
 	var ctx = c.getContext("2d");
 	
 	var generateRecaman = function(limit){
 		var arrayRecaman = [0];
 		for(var i = 1 ; i < limit ; i++){
 		
 			var temp = arrayRecaman[i-1];
 			if(temp - i > 0 && !arrayRecaman.includes(temp - i))
 				arrayRecaman.push(temp - i);
 			else
 				arrayRecaman.push(temp + i);			
 		}
 		
 		return arrayRecaman;
 	}
 	
 	var array = generateRecaman(maximum);
 	
 	var drawNextArc = function(current,next){
 		ctx.beginPath();

 		if(current > next){ //backward
 			var sumPrevious = array.slice(0,i).reduce((a, b) => a + b, 0);
 			var centerX = ((next - current)/2) + array[i];
 			var center = (centerX * unit) + unit;
 			ctx.arc(center,lineY,(current * unit - next * unit)/2,0,Math.PI,true);
 		}
 		else{ //forward
 			var centerX = ((next - current)/2) + current;
 			var center = (centerX * unit) + unit;
 			ctx.arc(center,lineY,(next * unit - current * unit)/2,Math.PI,0,true);
 		}
 		console.log(centerX);
 		ctx.stroke();
 	}
 	
 	var i = 0;
 	
 	var interval = setInterval(function(){
 		drawNextArc(array[i],array[i+1]);
 		document.getElementById("currentValue").innerHTML = i;
 		i++;
 		if(i > array.length){
 			clearInterval(interval);
 		}
 		
 	},speed);
 </script> 

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>

	<canvas id="myCanvas" width="9000" height="1500" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<div id="currentValue" style="font-size: 500px">
	0
	</div>

	<script>

	// The length in pixel of one unit
	var unit = 10;

	// The Y position of the number line
	var lineY = 500;

	// The upper limit of the generated Recaman sequence
	var maximum = 3000;

	// The speed of the drawing (miliseconds)
	var speed = 1000;

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	var generateRecaman = function(limit){
	var arrayRecaman = [0];
	for(var i = 1 ; i < limit ; i++){

	var temp = arrayRecaman[i-1];
	if(temp - i > 0 && !arrayRecaman.includes(temp - i))
	arrayRecaman.push(temp - i);
	else
	arrayRecaman.push(temp + i);
	}

	return arrayRecaman;
	}

	var array = generateRecaman(maximum);

	var drawNextArc = function(current,next){
	ctx.beginPath();

	if(current > next){ //backward
	var sumPrevious = array.slice(0,i).reduce((a, b) => a + b, 0);
	var centerX = ((next - current)/2) + array[i];
	var center = (centerX * unit) + unit;
	ctx.arc(center,lineY,(current * unit - next * unit)/2,0,Math.PI,true);
	}
	else{ //forward
	var centerX = ((next - current)/2) + current;
	var center = (centerX * unit) + unit;
	ctx.arc(center,lineY,(next * unit - current * unit)/2,Math.PI,0,true);
	}
	console.log(centerX);
	ctx.stroke();
	}

	var i = 0;

	var interval = setInterval(function(){
	drawNextArc(array[i],array[i+1]);
	document.getElementById("currentValue").innerHTML = i;
	i++;
	if(i > array.length){
	clearInterval(interval);
	}

	},speed);
	</script>

	</body>
	</html>