ArthurAttout/recaman.html

## 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>