WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで正多角形を描き回転させる - WebGLでレトロPCグラフィックスを楽しむ(17)

公開:2016-04-22 06:27
更新:2017-09-22 05:40
カテゴリ:PCグラフィックス,javascript,webgl,html5,glsl,WebGLでレトロPCグラフィックスを楽しむ

正多角形の描画は何とかできた。

指定した角数の多角形を描くようなコードにしてみた。三角形未満は当然ながら描画されない。

今回は正多角形を書く部分のコードも載せておこう。もっといいアルゴリズムがあるかもしれないが。。

  function *polygonLoop(colors,cx,cy,a,t)
  {
      let colorDiv = colors.length / 2;

      for(let i = 0;i < 128;++i)
      {
        for(let x1 = 0,ex1 = 40;x1 < ex1;++x1){
          for(let y1 = 0,ey1 = 25;y1 < ey1;++y1){
            let tx = x1 - cx;
            let ty = y1 - cy;
            let cost = Math.cos(t/4),sint = Math.sin(t/4);
            let dx = cost * tx - sint * ty;
            let dy = sint * tx + cost * ty;
            let theta = Math.atan2(dy,dx);
            let theta1 = (Math.floor(theta / (2 * Math.PI / a)) * (2 * Math.PI / a) + Math.PI / a);
            let x2 = dx * Math.cos(theta1) + dy * Math.sin(theta1);
            let c = colors[(Math.sin(x2 + t) * colorDiv + colorDiv) | 0];
            setColor(x1,y1,c[0],c[1]);         
          }
        }
        print(0,0,('0' + a).slice(-2) +'カクケイ',7,0,true);
        t += 0.1;
        yield;
      }

      return t;  

  }

次は動画か、ポリゴンの描画あたりかな。。やっぱりブレゼンハムかな。。迷うな。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160422/css/sfstyle.css

/dev/graphics/devver/20160422/index.html

/dev/graphics/devver/20160422/js/bundle.js

/dev/graphics/devver/20160422/test.html