Garciat/starry.html

## starry.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Starry</title>
        <style>html,body{margin:0;height:100%;}</style>
    </head>
    <body>
        <script defer>
var SPACEW = document.body.clientWidth;
var SPACEH = document.body.clientHeight;

var canvas = document.createElement('canvas');
canvas.width = SPACEW;
canvas.height = SPACEH;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var rad = SPACEH / 2;
var deg = 0.17;
var ang = 0;
var clean = true;

ctx.translate(SPACEW/2, SPACEH/2);

function draw(t) {
    var ang_ = ang + Math.PI - 2*deg;

    var ix = rad * Math.cos(ang);
    var iy = rad * Math.sin(ang);

    var ox = rad * Math.cos(ang_);
    var oy = rad * Math.sin(ang_);

    var c = Math.floor(360 * (t % 5000) / 5000);

    ctx.strokeStyle = 'hsl('+c+', 50%, 50%)';
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(ix, iy);
    ctx.lineTo(ox, oy);
    ctx.stroke();

    if (clean) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(-SPACEW/2, -SPACEH/2, SPACEW, SPACEH);
    }

    ang = ang_;
}

function loop(t) {
    draw(t);
    requestAnimationFrame(loop);
}

loop(0);

canvas.addEventListener('mousemove', function (e) {
    deg = Math.PI * e.offsetY / SPACEH;
    rad = 20 + (SPACEW / 2 - 20) * e.offsetX / SPACEW;
});

canvas.addEventListener('click', function (e) {
    clean = !clean;
});

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Starry</title>
	<style>html,body{margin:0;height:100%;}</style>
	</head>
	<body>
	<script defer>
	var SPACEW = document.body.clientWidth;
	var SPACEH = document.body.clientHeight;

	var canvas = document.createElement('canvas');
	canvas.width = SPACEW;
	canvas.height = SPACEH;
	document.body.appendChild(canvas);

	var ctx = canvas.getContext('2d');

	var rad = SPACEH / 2;
	var deg = 0.17;
	var ang = 0;
	var clean = true;

	ctx.translate(SPACEW/2, SPACEH/2);

	function draw(t) {
	var ang_ = ang + Math.PI - 2*deg;

	var ix = rad * Math.cos(ang);
	var iy = rad * Math.sin(ang);

	var ox = rad * Math.cos(ang_);
	var oy = rad * Math.sin(ang_);

	var c = Math.floor(360 * (t % 5000) / 5000);

	ctx.strokeStyle = 'hsl('+c+', 50%, 50%)';
	ctx.lineWidth = 10;
	ctx.beginPath();
	ctx.moveTo(ix, iy);
	ctx.lineTo(ox, oy);
	ctx.stroke();

	if (clean) {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
	ctx.fillRect(-SPACEW/2, -SPACEH/2, SPACEW, SPACEH);
	}

	ang = ang_;
	}

	function loop(t) {
	draw(t);
	requestAnimationFrame(loop);
	}

	loop(0);

	canvas.addEventListener('mousemove', function (e) {
	deg = Math.PI * e.offsetY / SPACEH;
	rad = 20 + (SPACEW / 2 - 20) * e.offsetX / SPACEW;
	});

	canvas.addEventListener('click', function (e) {
	clean = !clean;
	});

	</script>
	</body>
	</html>