aJamDonut/t.html

## t.html

<!DOCTYPE html>
<html>
<body>

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

<script>


function rng(min, max) {
  return Math.floor(min + Math.random()*(max + 1 - min))
}

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


var lastX = 400;
var lastY = 400;

var newX = lastX;
var newY = lastY;

var points = [{x:400,y:400}]; //First point
points.push({x:points[0].x+rng(-10,10), y:points[0].y+rng(-10,10)}); //Next point

function draw() {
	ctx.clearRect(0, 0, 800,800);
	points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point
	points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point


	ctx.beginPath();

	ctx.moveTo(points[0].x, points[0].y);

	var xc = (points[1].x + points[2].x) / 2;
	var yc = (points[1].y + points[2].y) / 2;

	ctx.quadraticCurveTo(points[1].x, points[1].y, xc, yc);

	ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x,points[2].y);

	points.shift(); //Current point
	points.shift(); //Current point

	ctx.stroke();


	setTimeout(draw, 100);
}

setTimeout(draw, 100);

</script>

</body>
</html>

	<!DOCTYPE html>
	<html>
	<body>

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

	<script>


	function rng(min, max) {
	return Math.floor(min + Math.random()*(max + 1 - min))
	}

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


	var lastX = 400;
	var lastY = 400;

	var newX = lastX;
	var newY = lastY;

	var points = [{x:400,y:400}]; //First point
	points.push({x:points[0].x+rng(-10,10), y:points[0].y+rng(-10,10)}); //Next point

	function draw() {
	ctx.clearRect(0, 0, 800,800);
	points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point
	points.push({x:points[1].x+rng(-25,25), y:points[1].y+rng(-25,25)}); //Next point



	ctx.beginPath();

	ctx.moveTo(points[0].x, points[0].y);

	var xc = (points[1].x + points[2].x) / 2;
	var yc = (points[1].y + points[2].y) / 2;

	ctx.quadraticCurveTo(points[1].x, points[1].y, xc, yc);

	ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x,points[2].y);

	points.shift(); //Current point
	points.shift(); //Current point

	ctx.stroke();



	setTimeout(draw, 100);
	}

	setTimeout(draw, 100);

	</script>

	</body>
	</html>