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

S.F. Page

Programming,Music,etc...

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

PCグラフィックス JavaScript WebGL HTML5 GLSL 古典的グラフィック技術を懐かしむ

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

動くデモ: http://github.sfpgmr.net/graphics/devver/20160422/

ソースコード: GitHub - sfpgmr/graphics at a5818c1534ff5922243f6c3c8a8b990a02ab169d

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

https://41.media.tumblr.com/4d0e1a37aa9f065fcf5f890deec552af/tumblr_o605r0IrGJ1s44dwzo1_1280.png

https://40.media.tumblr.com/44372eb47f3d8a72e28c9d64e0636c0e/tumblr_o605r0IrGJ1s44dwzo2_1280.png

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

  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;  
    
  }  

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