gunn/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>JS1k</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <canvas id="c"></canvas>
    <script>
      var b = document.body;
      var c = document.getElementsByTagName('canvas')[0];
      var a = c.getContext('2d');
      document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
    </script>
    <script>
      with (c) {
        width = height = d = 700;
        b.bgColor = e = C = Q = 0;
        A = Z = 1

        onmousemove = function(Y){
          U = Y.x-offsetLeft;
          V = Y.y;
          m()
        }

        style.display = "block"
        style.margin = "auto"
      }

      w = document.createElement("d")
      w.style.color = "#666"
      w.style.position = "absolute"
      w.style.top = "5px"

      U = V = 200

      eval(top.location.search.replace(/[\?&]/g, ";"))

      p = b.onkeypress = function(Y){
        t = Y.keyCode

        k = 0.15
        if (t==113) { Q = !Q }
        if (t==97 ) { A = A==k ? 1 : k }
        if (t==122) { Z = Z==k ? 1 : k }

        w.innerHTML = "<h3>keys:</h3>Q: "+!!Q+"<br>A: "+A+"<br>Z: "+Z;
        b.appendChild(w)
      }

      p(1);

      m = function (Y) {
        //init stuff
        i = t = X = 0;

        if (++C%20==0) top.history.replaceState(0, 0, "?"+"U="+U+"&V="+V+"&C="+C+"&Q="+Q+"&A="+A+"&Z="+Z);

        a.alpha = A;
        a.fillStyle = "rgba(0,0,0,"+Z+")";

        a.fillRect(0,0,d,d);

        //audio stuff
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia

        Q && !e && navigator.getUserMedia({audio: true}, function(Y) {
          t = new (top.audioContext || top.webkitAudioContext || top.mozAudioContext || top.msAudioContext)();

          e = t.createAnalyser();
          t.createMediaStreamSource(Y).connect( e );
        });

        if (Q && e) {
          e.getByteFrequencyData(k = new Uint8Array(Y = e.frequencyBinCount));
          for (; i<~~(Y/6); i++) {
            t += k[i+~~(Y/4)]
          };

          t = t/i
        }

        // drawing calcs
        t = t ? (t+45)/100 : 1
        p = U/100-3.5

        for (; i<2000; i++) {
          y = i/(~~((V+15)/30)*3)

          x = (Math.sin(y)*p+Math.cos(i/9)*t)*60+d/2
          y = (Math.cos(y)*p+Math.sin(i/9)*t)*60+d/2

          if (X) {
            a.strokeStyle = "hsl("+(C*3+i/50)+", 100%, 50%)";
            a.beginPath()
            a.moveTo(X,Y);
            a.lineTo(x,y);
            a.stroke();
          }
          X = x;
          Y = y;
        };
      }

      m()
      setInterval(m, 50);

    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>JS1k</title>
	<meta charset="utf-8" />
	</head>
	<body>
	<canvas id="c"></canvas>
	<script>
	var b = document.body;
	var c = document.getElementsByTagName('canvas')[0];
	var a = c.getContext('2d');
	document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
	</script>
	<script>
	with (c) {
	width = height = d = 700;
	b.bgColor = e = C = Q = 0;
	A = Z = 1

	onmousemove = function(Y){
	U = Y.x-offsetLeft;
	V = Y.y;
	m()
	}

	style.display = "block"
	style.margin = "auto"
	}

	w = document.createElement("d")
	w.style.color = "#666"
	w.style.position = "absolute"
	w.style.top = "5px"

	U = V = 200

	eval(top.location.search.replace(/[\?&]/g, ";"))

	p = b.onkeypress = function(Y){
	t = Y.keyCode

	k = 0.15
	if (t==113) { Q = !Q }
	if (t==97 ) { A = A==k ? 1 : k }
	if (t==122) { Z = Z==k ? 1 : k }

	w.innerHTML = "<h3>keys:</h3>Q: "+!!Q+"<br>A: "+A+"<br>Z: "+Z;
	b.appendChild(w)
	}

	p(1);

	m = function (Y) {
	//init stuff
	i = t = X = 0;

	if (++C%20==0) top.history.replaceState(0, 0, "?"+"U="+U+"&V="+V+"&C="+C+"&Q="+Q+"&A="+A+"&Z="+Z);

	a.alpha = A;
	a.fillStyle = "rgba(0,0,0,"+Z+")";

	a.fillRect(0,0,d,d);

	//audio stuff
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia

	Q && !e && navigator.getUserMedia({audio: true}, function(Y) {
	t = new (top.audioContext \|\| top.webkitAudioContext \|\| top.mozAudioContext \|\| top.msAudioContext)();

	e = t.createAnalyser();
	t.createMediaStreamSource(Y).connect( e );
	});

	if (Q && e) {
	e.getByteFrequencyData(k = new Uint8Array(Y = e.frequencyBinCount));
	for (; i<~~(Y/6); i++) {
	t += k[i+~~(Y/4)]
	};

	t = t/i
	}

	// drawing calcs
	t = t ? (t+45)/100 : 1
	p = U/100-3.5

	for (; i<2000; i++) {
	y = i/(~~((V+15)/30)*3)

	x = (Math.sin(y)p+Math.cos(i/9)t)*60+d/2
	y = (Math.cos(y)p+Math.sin(i/9)t)*60+d/2

	if (X) {
	a.strokeStyle = "hsl("+(C*3+i/50)+", 100%, 50%)";
	a.beginPath()
	a.moveTo(X,Y);
	a.lineTo(x,y);
	a.stroke();
	}
	X = x;
	Y = y;
	};
	}

	m()
	setInterval(m, 50);

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