JavaScriptでお絵かき - Canvasでドット単位の操作 その4

今回は、下の図の内側にある円周上のランダムな1点からスタートして、 ランダムウォークを続けて、外側の円周上に到達したら終わり、 というのをやってみます。 ランダムウォークの軌跡を赤色で示しています。

https://yamamoto-works.jp/canvas/test05.html

f:id:yamamoto-works:20200214234705p:plain

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test5</title>
    <style>
      #mycanvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="400" height="400" id="mycanvas"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      $(function() {
        const canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        const ctx = canvas.getContext('2d');
        const maxW = canvas.width;
        const maxH = canvas.height;
        const imgData = ctx.createImageData(maxW, maxH);

        const t = Math.random() * Math.PI * 2;
        const h = maxW/2;
        const h2 = h*h;
        const r = h * 0.75;

        let x = Math.floor(Math.cos(t) * r) + h;
        let y = Math.floor(Math.sin(t) * r) + h;

        while ((x-h)*(x-h) + (y-h)*(y-h) < h2) {
          let m = Math.random();
          if (m < 0.25) {
            x -= 1;
          } else if (m < 0.5) {
            x += 1;
          } else if (m < 0.75) {
            y -= 1;
          } else {
            y += 1;
          }

          let idx = (x + y*maxW) * 4;
          imgData.data[idx]   = 255;
          imgData.data[idx+1] = 0;
          imgData.data[idx+2] = 0;
          imgData.data[idx+3] = 255;
        }
        ctx.putImageData(imgData, 0, 0);

        ctx.strokeStyle = "blue";
        ctx.beginPath();
        ctx.arc(h, h, h, 0, Math.PI*2, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(h, h, r, 0, Math.PI*2, false);
        ctx.stroke();
      });
    </script>
  </body>
</html>