spiral

by arcm111

HTML

<canvas id="canvas" width="300" height="300" >Not supported</canvas>
<input id="slider1" type="range" min="0" max="10" step="0.5" value="5" oninput="anim()" />
<input id="slider2" type="range" min="0" max="1" step="0.01" value="0.1" oninput="anim()" />

CSS

canvas
{
	border: 2px solid darkslateblue;
	background: white;
	display: block;
}
input
{
	display: block;
	margin-top: 10px;
}

JavaScript

var s1 = document.getElementById ("slider1");
var s2 = document.getElementById ("slider2");
var innerRadius = 0;
var innerDistance = 3;
var c = document.getElementById ('canvas');
var ctx = c.getContext ("2d");

function spiral (angle)
{
	var r = innerRadius + innerDistance * angle;
	var y = r * Math.sin (angle) + 150;
	var x = r * Math.cos (angle) + 150;
	return [x, y];
}

function draw()
{
	ctx.beginPath();              
	ctx.lineWidth = "2";
	ctx.strokeStyle = "steelblue";
	ctx.clearRect (0, 0, 300, 300);
	var pt = spiral (0);
	ctx.moveTo (pt[0], pt[1]);
	for (var i = 0; i < 360 * 4; i += 5)
	{
		var pt = spiral (i * Math.PI / 180);
		ctx.lineTo (pt[0], pt[1]);
	}
	ctx.stroke();
}

var prev = 0;
function animate (now)
{
	if (now - prev > 20)
	{
		innerDistance += 0.1;
		draw();
		prev = now;
	}
	if (innerDistance < 60) window.requestAnimationFrame (animate);
}

var randA = 12;
var randB = 0.06;
function lspiral (angle, a, b)
{
	var r = a * Math.pow (Math.E, b * angle);
	var x = r * Math.cos (angle) + 150;
	var y = r * Math.sin (angle) + 150;
	return [x, y];
}

function draw2()
{
	ctx.beginPath();              
	ctx.lineWidth = "2";
	ctx.strokeStyle = "steelblue";
	ctx.clearRect (0, 0, 300, 300);
	var pt = lspiral (0, s1.value, s2.value);
	ctx.moveTo (pt[0], pt[1]);
	for (var i = 0; i < 360 * 4; i += 5)
	{
		var pt = lspiral (i * Math.PI / 180, s1.value, s2.value);
		ctx.lineTo (pt[0], pt[1]);
	}
	ctx.stroke();
}

function anim()
{
	window.requestAnimationFrame (draw2);
}

draw2();