plexus/sci_test.html

## sci_test.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <script type="application/clojurescript">
      (defn loop [frame-time]
        (js/requestAnimationFrame loop)
        (run! (fn [i]
                (let [a (/ 193 (* 3 i))]
                  (ctx/fillStyle= (rgba 0, i, 0, 0.1))
                  (ctx/fillRect (+ 960 (* 960 (sin (* a 2000))))
                                (mod (* 1000 (+ (tan i) (* a (time)))) 2000)
                                (if (< (* 6 a) 12) (* a 99) 0)
                                (if (< (* 6 a) 12) (* a 99) 0))))
          (reverse (range 384))))
      (loop 0)
    </script>

    <style>
      body {overflow: hidden;}
    </style>
  </head>
  <body>
    <canvas id="canvas" height="1080" width="1280"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/@borkdude/sci@0.1.0/sci.min.js" type="application/javascript"></script>
    <script type="application/javascript">
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
      //window.addEventListener('resize', resizeCanvas, false);
      resizeCanvas();

      var ctxns = {};
      function setter(k) {
        return v => ctx[k] = v;
      }
      for (k in ctx) {
          if (typeof ctx[k] == "function") {
              ctxns[k]=ctx[k].bind(ctx);
          } else {
              ctxns[k]=ctx[k];
              ctxns[""+k+"="]=setter(k);
          }
      }
      function rgba(r,g,b,a) {
        a = a === undefined ? 1 : a;
        return "rgba("+(r|0)+","+(g|0)+","+(b|0)+","+a+")";
      }
      document.querySelectorAll('script[type="application/clojurescript"]').forEach(
          script => sci.evalString(script.innerHTML, {bindings: {canvas: canvas, ctx: ctx, rgba: rgba, sin: Math.sin, tan: Math.tan, time: ()=> (new Date()).getMilliseconds()},
                                                      namespaces: {js: window, canvas: canvas, ctx: ctxns, math: Math}})
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">

	<script type="application/clojurescript">
	(defn loop [frame-time]
	(js/requestAnimationFrame loop)
	(run! (fn [i]
	(let [a (/ 193 (* 3 i))]
	(ctx/fillStyle= (rgba 0, i, 0, 0.1))
	(ctx/fillRect (+ 960 (* 960 (sin (* a 2000))))
	(mod (* 1000 (+ (tan i) (* a (time)))) 2000)
	(if (< (* 6 a) 12) (* a 99) 0)
	(if (< (* 6 a) 12) (* a 99) 0))))
	(reverse (range 384))))
	(loop 0)
	</script>

	<style>
	body {overflow: hidden;}
	</style>
	</head>
	<body>
	<canvas id="canvas" height="1080" width="1280"></canvas>
	<script src="https://cdn.jsdelivr.net/npm/@borkdude/sci@0.1.0/sci.min.js" type="application/javascript"></script>
	<script type="application/javascript">
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	}
	//window.addEventListener('resize', resizeCanvas, false);
	resizeCanvas();

	var ctxns = {};
	function setter(k) {
	return v => ctx[k] = v;
	}
	for (k in ctx) {
	if (typeof ctx[k] == "function") {
	ctxns[k]=ctx[k].bind(ctx);
	} else {
	ctxns[k]=ctx[k];
	ctxns[""+k+"="]=setter(k);
	}
	}
	function rgba(r,g,b,a) {
	a = a === undefined ? 1 : a;
	return "rgba("+(r\|0)+","+(g\|0)+","+(b\|0)+","+a+")";
	}
	document.querySelectorAll('script[type="application/clojurescript"]').forEach(
	script => sci.evalString(script.innerHTML, {bindings: {canvas: canvas, ctx: ctx, rgba: rgba, sin: Math.sin, tan: Math.tan, time: ()=> (new Date()).getMilliseconds()},
	namespaces: {js: window, canvas: canvas, ctx: ctxns, math: Math}})
	);
	</script>
	</body>
	</html>