読者です 読者をやめる 読者になる 読者になる

サイドバーにバラ曲線を描画するようにしてみました

プログラミング リリース

以前2chでバラ曲線というものの存在を知って、 なんとなく気になっていたのでcanvasの練習がてら実装してみた。

はてなブログはドメインが管理用のものと分けられているので好き勝手にJavaScriptを設置できる。 そんなわけで、サイドバーに設置してみた。 リロード毎に、何かしらの形になると思う。

<script type="text/javascript">
  function draw(canvas, n, d) {
    var ctx = canvas.getContext('2d');
    if (!ctx)
      throw 'failed to get 2d context';

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = 'rgba(234, 85, 6, 1.0)';
    ctx.beginPath();

    for (
      var t = 0.0, tt = 8 * (2 * Math.PI), r = 0.0;
      (t < tt) || (Math.abs(r) > 0.01);
      t += 0.01, r = Math.sin(t * (n / d))
    ) {
      var x = r * Math.cos(t);
      var y = r * Math.sin(t);
      var xx = x * 0.5 * canvas.width + canvas.width / 2;
      var yy = y * 0.5 * canvas.height + canvas.height / 2;
      if (t == 0.0) {
        ctx.moveTo(xx, yy);
      } else {
        ctx.lineTo(xx, yy);
      }
    }

    ctx.closePath();
    ctx.stroke();
  }

  function update() {
    var canvas = document.getElementById('rose-curve-canvas');
    var n = 1.0 + 8.0 * Math.random();
    var d = 1.0 + 8.0 * Math.random();
    n = Math.round(n);
    d = Math.round(d);
    draw(canvas, n, d);
  }

  $(function() {
    update();
  });
</script>
<canvas id="rose-curve-canvas" width="180" height="180"></canvas>

ソースコードはこんなかんじだけど、妥協した箇所が一箇所ある。それは描画用のforループの終了条件で、今は8周決め打ちで描画している。

結果としてシンプルな図形の場合線が汚くなる。かといってこれを減らすと図形によってはきちんとかかれなくなる。

なんか数学とかちゃんと分かってればちゃんとした終了条件を設定できるんだろうけど、僕はそうでないので妥協するしか無いという感じになってしまった。

shimobayashi/rose-curve-canvas · GitHub