Mercerenies/mathspiral.html

## mathspiral.html
<!DOCTYPE html>

<html>
  <head>

    <title>Math Stuff for Silly Internet Math Person</title>

    <script type="application/javascript">

     const WIDTH = 320;
     const HEIGHT = 320;
     const SPEED = 1;

     let particles = [];
     let pcount = 0;
     let t = 0;

     function pushParticle(p) {
       if (pcount >= particles.length) {
         particles.push(p);
         pcount++;
       } else {
         particles[pcount++] = p;
       }
     }

     function draw() {
       let canvas = document.getElementById("foo");
       let ctx = canvas.getContext("2d");

       // New particle
       pushParticle({ "x": WIDTH / 2, "y": HEIGHT / 2, "dir": t ** 2 });

       // Clear canvas
       ctx.fillStyle = "#111";
       ctx.fillRect(0, 0, WIDTH, HEIGHT);
       ctx.fillStyle = "white";

       // Move, Draw, and Purge
       let i = 0;
       for (let j = 0; j < pcount; j++) {
         var p = particles[j];
         p.x += SPEED * Math.cos(p.dir * Math.PI / 180);
         p.y += SPEED * Math.sin(p.dir * Math.PI / 180);
         ctx.beginPath();
         ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
         ctx.fill();

         if (p.x >= 0 && p.y >= 0 && p.x <= WIDTH && p.y <= HEIGHT) {
           particles[i++] = p;
         }

       }

       document.getElementById("t").innerText = Number(t).toFixed(2);

       pcount = i;
       t += 0.1;

       console.log(particles.length);

     }

     window.onload = function() {
       setInterval(draw, 15);
     }
    </script>

  </head>
  <body style="background-color: black; color: white">

    <canvas id="foo" width="320" height="320">
    </canvas>
    <div>
      t = <span id="t">###</span>
    </div>

  </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>

	<title>Math Stuff for Silly Internet Math Person</title>

	<script type="application/javascript">

	const WIDTH = 320;
	const HEIGHT = 320;
	const SPEED = 1;

	let particles = [];
	let pcount = 0;
	let t = 0;

	function pushParticle(p) {
	if (pcount >= particles.length) {
	particles.push(p);
	pcount++;
	} else {
	particles[pcount++] = p;
	}
	}

	function draw() {
	let canvas = document.getElementById("foo");
	let ctx = canvas.getContext("2d");

	// New particle
	pushParticle({ "x": WIDTH / 2, "y": HEIGHT / 2, "dir": t ** 2 });

	// Clear canvas
	ctx.fillStyle = "#111";
	ctx.fillRect(0, 0, WIDTH, HEIGHT);
	ctx.fillStyle = "white";

	// Move, Draw, and Purge
	let i = 0;
	for (let j = 0; j < pcount; j++) {
	var p = particles[j];
	p.x += SPEED * Math.cos(p.dir * Math.PI / 180);
	p.y += SPEED * Math.sin(p.dir * Math.PI / 180);
	ctx.beginPath();
	ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
	ctx.fill();

	if (p.x >= 0 && p.y >= 0 && p.x <= WIDTH && p.y <= HEIGHT) {
	particles[i++] = p;
	}

	}

	document.getElementById("t").innerText = Number(t).toFixed(2);

	pcount = i;
	t += 0.1;

	console.log(particles.length);

	}

	window.onload = function() {
	setInterval(draw, 15);
	}
	</script>

	</head>
	<body style="background-color: black; color: white">

	<canvas id="foo" width="320" height="320">
	</canvas>
	<div>
	t = <span id="t">###</span>
	</div>

	</body>
	</html>