yoya/mexican_hat_deley.html

## mexican_hat_deley.html
<html>
  <body>
    <canvas width="800" height="500" style="background-color:black"> </canvas>
    <script>
      "use strict"
      const delay = 10
      const canvas = document.querySelector("canvas")
      const ctx = canvas.getContext("2d")
      const {width, height} = canvas
      ctx.fillStyle = "black"
      ctx.fillRect(0, 0, width, height)
      const d = new Float32Array(160)
      for (let l = 0; l <= 159; l++) {
        d[l] = 100
      }
      const dr = 3.14/180
      const s = 2 // view scale
      function pset(x, y, color) {
        ctx.globalCompositeOperation = "lighter"
        ctx.fillStyle = color
        ctx.fillRect(s*x, s*y, s, s)
      }
      function sleep(msec) {
        return new Promise(resolve => setTimeout(resolve, msec));
      }
      main()
      async function main() {
        for (let y = -180; y <= 180; y += 6) {
          for (let x = -180; x <= 180; x += 4) {
            await sleep(delay);
            const r = dr * Math.sqrt(x*x + y*y)
            const z = 100 * Math.cos(r) - 30 * Math.cos(3*r)
            const sx = Math.floor(80 + x/3 - y/6)
            const sy = Math.floor(40 - y/6 - z/4)
            if ((sx < 0) || (sx >= 160)) { continue }
            if (d[sx] <= sy) { continue }
            const zz = Math.floor((z+100) * 0.035) + 1
            if ((zz==1) || (zz==3) || (zz==5) || (zz==7)) {
                pset(sx*2, sy*2, "#26F")  // blue
            }
            if ((zz==2) || (zz==3) || (zz>=6)) {
                pset(sx*2, sy*2, "#F26")  // red
            }
            if (zz>=4) {
                pset(sx*2, sy*2, "#0F0")  // green
            }
            d[sx] = sy
          }
        }
      }
    </script>
  </body>
</html>
	<html>
	<body>
	<canvas width="800" height="500" style="background-color:black"> </canvas>
	<script>
	"use strict"
	const delay = 10
	const canvas = document.querySelector("canvas")
	const ctx = canvas.getContext("2d")
	const {width, height} = canvas
	ctx.fillStyle = "black"
	ctx.fillRect(0, 0, width, height)
	const d = new Float32Array(160)
	for (let l = 0; l <= 159; l++) {
	d[l] = 100
	}
	const dr = 3.14/180
	const s = 2 // view scale
	function pset(x, y, color) {
	ctx.globalCompositeOperation = "lighter"
	ctx.fillStyle = color
	ctx.fillRect(sx, sy, s, s)
	}
	function sleep(msec) {
	return new Promise(resolve => setTimeout(resolve, msec));
	}
	main()
	async function main() {
	for (let y = -180; y <= 180; y += 6) {
	for (let x = -180; x <= 180; x += 4) {
	await sleep(delay);
	const r = dr * Math.sqrt(xx + yy)
	const z = 100 * Math.cos(r) - 30 * Math.cos(3*r)
	const sx = Math.floor(80 + x/3 - y/6)
	const sy = Math.floor(40 - y/6 - z/4)
	if ((sx < 0) \|\| (sx >= 160)) { continue }
	if (d[sx] <= sy) { continue }
	const zz = Math.floor((z+100) * 0.035) + 1
	if ((zz==1) \|\| (zz==3) \|\| (zz==5) \|\| (zz==7)) {
	pset(sx2, sy2, "#26F") // blue
	}
	if ((zz==2) \|\| (zz==3) \|\| (zz>=6)) {
	pset(sx2, sy2, "#F26") // red
	}
	if (zz>=4) {
	pset(sx2, sy2, "#0F0") // green
	}
	d[sx] = sy
	}
	}
	}
	</script>
	</body>
	</html>