その他５ ■面白■　回転するキラキラボール

■原本説明■
HTMLのCanvasを利用して3Dのボールを描写してます。
Canvasのサイズは、CSSで指定したらおかしくなります。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>その他５ ■面白■　回転するキラキラボール</title>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*********************************************
サイトSakef Blog : http://sakef.jp/blog/
**********************************************/
// 計算用の定数
var N_POINT1=60;
var N_POINT2=60;
var N_POINT3=3600;
var RADIUS = 100;
var RADIAN = Math.PI / 180; 
var FOCUS = 280;
var CENTER_X = ((600 / 2) | 0);
var CENTER_Y  = ((400 / 2) | 0);
 
// 変数
var width;
var height;
var context;
var points;
var bmpd;
var bmpdArray;
var theta;
var i, j, p, xx, yy, zz, scale;
 
window.onload = function()
{
   var canvas = document.getElementById('myCanvas');
   if (! canvas || ! canvas.getContext ) {return false;}
   else
   {
      width = canvas.width;
      height = canvas.height;
      theta = 0;
      points = [];
       
      // contextの初期化
      context = canvas.getContext('2d');
 
      // 3Dポイントの初期化
      var theta1, theta2;
      for(i=0; i < N_POINT1; i++)
      {
         theta1 =(360 / N_POINT1) * i * RADIAN;
         for(j=0; j < N_POINT2; j++)
         {
            theta2=((180 / N_POINT2) * j - 90) * RADIAN;
            xx=RADIUS * Math.cos(theta2) * Math.sin(theta1);
            yy=RADIUS * Math.sin(theta2);
            zz=RADIUS * Math.cos(theta2) * Math.cos(theta1);
            points[i * N_POINT2 + j]=new Point3D(xx, yy, zz, "#00FF00");
         }
      }
 
      // レンダリング開始
      setInterval("onFrame()", 30);
   }
}
 
function onFrame()
{
   context.fillStyle = "#000000";   
   context.fillRect(0,0,width, height);
   bmpd = context.getImageData(0, 0, width, height);
   bmpdArray = bmpd.data;
    
   for(i=0 ; i < N_POINT3; i++)
   {
      p=points[i];
 
      // 回転行列で回転 (x軸回転とy軸回転の積を展開したもの)
      xx=p.x * Math.cos(theta * RADIAN) + p.y * Math.sin(theta * RADIAN) * Math.sin(theta * RADIAN) - p.z * Math.sin(theta * RADIAN) * Math.cos(theta * RADIAN);
      yy=p.y * Math.cos(theta * RADIAN) + p.z * Math.sin(theta * RADIAN);
      zz=p.x * Math.sin(theta * RADIAN) - p.y * Math.sin(theta * RADIAN) * Math.cos(theta * RADIAN) + p.z * Math.cos(theta * RADIAN) * Math.cos(theta * RADIAN);
                        
      scale = FOCUS * 1.5 / (FOCUS - zz);
      xx = ((xx * scale)|0) + CENTER_X;
      yy = ((yy * scale)|0) * (-1) + CENTER_Y;
 
      // 範囲内なら点を打つ
      if (xx >= 0 && yy >= 0 && xx < width && yy < height) 
      {
         j = (yy * width + xx)*4;
         bmpdArray[j] = p.cR;
         bmpdArray[j + 1] = p.cG;
         bmpdArray[j + 2] = 255;
         bmpdArray[j + 3] = 255;
      }
   }
   context.putImageData(bmpd,0,0);
   theta ++;
}
 
function Point3D(x, y, z, color)
{
   this.x = x;
   this.y = y;
   this.z = z;
    
   this.cR = Math.random() * 255;
   this.cG = Math.random() * 255;
}

// -->
</script>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>

<body>

<!--★ここからコピー。画像位置-->
<canvas id="myCanvas" width="600" height="400"></canvas>
<!--★ここまでコピー-->
<p>
■原本説明■<br>
HTMLのCanvasを利用して3Dのボールを描写してます。<br>
Canvasのサイズは、CSSで指定したらおかしくなります。</p>

</body>
</html>

その他５ ■面白■ 回転するキラキラボール UP日時 : 2014/05/03

その他５ ■面白■　　回転するキラキラボール　　　　UP日時 : 2014/05/03