3D アニメーションサンプル

hikatsuka

2010-06-25 16:21:39

License: MIT License

Fork: 8

Fav: 12

View: 3620

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 141 lines
HTML 9 lines
CSS 1 lines

3D アニメーションサンプル

var canvas;  //キャンバス
var ctx;  //キャンバスコンテキスト
var timerDrawID;  //描画タイマーID
var cW = 450;  //キャンバス横サイズ
var cH = 420;  //キャンバス縦サイズ
var cX_3d = cW / 2;  //3D軸の中心点のX座標
var cY_3d = cH / 2;  //3D軸の中心点のY座標
var zMax_3d = 500;  //Z軸の視点側の最大距離
var objArr = new Array();  //オブジェクト情報配列
var mouseX = 0;  //マウスのX座標
var mouseY = 0;  //マウスのY座標
var animeFrame = 30;  //アニメーションのフレーム数
var nowForm = 0;  //現在の形状パターン
var allRX = 0;  //全体のX角度
var allRY = 0;  //全体のY角度
var afterimage = 0.2;  //残像
window.onload = function() {
  init();
};
function init(){
  //キャンバスの初期処理
  canvas = document.getElementById('testCanvas');
  if ( ! canvas || ! canvas.getContext ) return false;
  //2Dコンテキスト
  ctx = canvas.getContext('2d');
  //イベント
  canvas.addEventListener("mousedown", mouseDownListner, false);
  canvas.addEventListener("mousemove", mouseMoveListner, false);
  //オブジェクト生成
  initObj();
  //デフォルト形状
  changeForm(0);
  //タイマー開始
  setTimerDraw();
  //デフォルトラジオボタン
  var rb = document.getElementById('rb0');
  rb.checked = true;
}
function initObj(){
  for (i = 0; i < 27; i++) {
    var obj = new Object();
    obj.x = 0;
    obj.y = 0;
    obj.z = 0;
    obj.rx = 0;
    obj.ry = 0;
    obj.rz = 0;
    objArr.push(obj);
  }
}
function setTimerDraw(){
  clearInterval(timerDrawID);
  timerDrawID = setInterval("draw()", 50);
}
function draw() {
  //背景
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.globalAlpha = afterimage;
  ctx.fillRect(0, 0, cW, cH);  //塗りつぶした矩形を描画
  //角度調整
  allRX += (mouseX - cW / 2) / 20;
  allRY += (mouseY - cH / 2) / 20;
  //各オブジェクトを描画
  for (i = 0; i < objArr.length; i++) {
    //座標計算
    objArr[i].rx = allRX;
    objArr[i].ry = allRY;
    var rX = objArr[i].rx * Math.PI / 180;
    var rY = objArr[i].ry * Math.PI / 180;
    var rZ = objArr[i].rz * Math.PI / 180;
    var cX = objArr[i].x;
    var cY = objArr[i].y;
    var cZ = objArr[i].z;
    //X軸についての回転
    var nX;
    var nY;
    var nZ;
    nX = cX;
    nZ = cZ;
    cX = nX * Math.cos(rX) - nZ * Math.sin(rX);
    cZ = nZ * Math.cos(rX) + nX * Math.sin(rX);
    //Y軸についての回転
    nZ = cZ;
    nY = cY
    cZ = nZ * Math.cos(rY) - nY * Math.sin(rY);
    cY = nY * Math.cos(rY) + nZ * Math.sin(rY);
    //Z軸についての回転
    nX = cX;
    nY = cY;
    cX = nX * Math.cos(rZ) - nY * Math.sin(rZ);
    cY = nX * Math.sin(rZ) + nY * Math.cos(rZ);
    //実座標(X/Y/Scale)に置き換え
    nZ = zMax_3d / (zMax_3d - cZ); //奥行きの係数を求める
    nZ = nZ > 0 ? nZ : 0; //負の値は無し
    var X = cX * nZ + cX_3d; //X軸計算
    var Y = cY * nZ + cY_3d; //Y軸計算
    var S = 10 * nZ; //Z軸計算
    //円を描く
    ctx.beginPath();
    ctx.fillStyle = "#FF6600";
    ctx.globalAlpha = 1;
    ctx.arc(X, Y, S, 0, Math.PI * 2, false);
    ctx.fill();
  }
}
function changeForm(n){
  for (j = 0; j < objArr.length; j++) {
    var r = 360 / objArr.length * j;
    if (n == 0) {
      objArr[j].x = Math.cos(r * Math.PI / 180) * 150;
      objArr[j].y = 0;
      objArr[j].z = Math.sin(r * Math.PI / 180) * 150;
    } else if (n == 1) {
      objArr[j].x = Math.cos(r * 3 * Math.PI / 180) * 50;
      objArr[j].y = Math.sin(r * 3 * Math.PI / 180) * 50;
      objArr[j].z = j * 10 - 150;
    } else if (n == 2) {
      objArr[j].x = (Math.floor(j / 3) - Math.floor(j / 9) * 3) * 100 - 100;
      objArr[j].x += 10;
      objArr[j].y = j % 3 * 100 - 100;
      objArr[j].y += 10;
      objArr[j].z = Math.floor(j / 9) * 100 - 100;
    }
  }
}
function mouseDownListner(e) {
  nowForm++;
  if (nowForm >= 3) nowForm = 0;
  changeForm(nowForm);
}
function mouseMoveListner(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
}
//残像
function changeAI(n) {
  afterimage = n;
}

3D アニメーションサンプル

var canvas; //キャンバス var ctx; //キャンバスコンテキスト var timerDrawID; //描画タイマーID var cW = 450; //キャンバス横サイズ var cH = 420; //キャンバス縦サイズ var cX_3d = cW / 2; //3D軸の中心点のX座標 var cY_3d = cH / 2; //3D軸の中心点のY座標 var zMax_3d = 500; //Z軸の視点側の最大距離 var objArr = new Array(); //オブジェクト情報配列 var mouseX = 0; //マウスのX座標 var mouseY = 0; //マウスのY座標 var animeFrame = 30; //アニメーションのフレーム数 var nowForm = 0; //現在の形状パターン var allRX = 0; //全体のX角度 var allRY = 0; //全体のY角度 var afterimage = 0.2; //残像 window.onload = function() { init(); }; function init(){ //キャンバスの初期処理 canvas = document.getElementById('testCanvas'); if ( ! canvas || ! canvas.getContext ) return false; //2Dコンテキスト ctx = canvas.getContext('2d'); //イベント canvas.addEventListener("mousedown", mouseDownListner, false); canvas.addEventListener("mousemove", mouseMoveListner, false); //オブジェクト生成 initObj(); //デフォルト形状 changeForm(0); //タイマー開始 setTimerDraw(); //デフォルトラジオボタン var rb = document.getElementById('rb0'); rb.checked = true; } function initObj(){ for (i = 0; i < 27; i++) { var obj = new Object(); obj.x = 0; obj.y = 0; obj.z = 0; obj.rx = 0; obj.ry = 0; obj.rz = 0; objArr.push(obj); } } function setTimerDraw(){ clearInterval(timerDrawID); timerDrawID = setInterval("draw()", 50); } function draw() { //背景 ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.globalAlpha = afterimage; ctx.fillRect(0, 0, cW, cH); //塗りつぶした矩形を描画 //角度調整 allRX += (mouseX - cW / 2) / 20; allRY += (mouseY - cH / 2) / 20; //各オブジェクトを描画 for (i = 0; i < objArr.length; i++) { //座標計算 objArr[i].rx = allRX; objArr[i].ry = allRY; var rX = objArr[i].rx * Math.PI / 180; var rY = objArr[i].ry * Math.PI / 180; var rZ = objArr[i].rz * Math.PI / 180; var cX = objArr[i].x; var cY = objArr[i].y; var cZ = objArr[i].z; //X軸についての回転 var nX; var nY; var nZ; nX = cX; nZ = cZ; cX = nX * Math.cos(rX) - nZ * Math.sin(rX); cZ = nZ * Math.cos(rX) + nX * Math.sin(rX); //Y軸についての回転 nZ = cZ; nY = cY cZ = nZ * Math.cos(rY) - nY * Math.sin(rY); cY = nY * Math.cos(rY) + nZ * Math.sin(rY); //Z軸についての回転 nX = cX; nY = cY; cX = nX * Math.cos(rZ) - nY * Math.sin(rZ); cY = nX * Math.sin(rZ) + nY * Math.cos(rZ); //実座標(X/Y/Scale)に置き換え nZ = zMax_3d / (zMax_3d - cZ); //奥行きの係数を求める nZ = nZ > 0 ? nZ : 0; //負の値は無し var X = cX * nZ + cX_3d; //X軸計算 var Y = cY * nZ + cY_3d; //Y軸計算 var S = 10 * nZ; //Z軸計算 //円を描く ctx.beginPath(); ctx.fillStyle = "#FF6600"; ctx.globalAlpha = 1; ctx.arc(X, Y, S, 0, Math.PI * 2, false); ctx.fill(); } } function changeForm(n){ for (j = 0; j < objArr.length; j++) { var r = 360 / objArr.length * j; if (n == 0) { objArr[j].x = Math.cos(r * Math.PI / 180) * 150; objArr[j].y = 0; objArr[j].z = Math.sin(r * Math.PI / 180) * 150; } else if (n == 1) { objArr[j].x = Math.cos(r * 3 * Math.PI / 180) * 50; objArr[j].y = Math.sin(r * 3 * Math.PI / 180) * 50; objArr[j].z = j * 10 - 150; } else if (n == 2) { objArr[j].x = (Math.floor(j / 3) - Math.floor(j / 9) * 3) * 100 - 100; objArr[j].x += 10; objArr[j].y = j % 3 * 100 - 100; objArr[j].y += 10; objArr[j].z = Math.floor(j / 9) * 100 - 100; } } } function mouseDownListner(e) { nowForm++; if (nowForm >= 3) nowForm = 0; changeForm(nowForm); } function mouseMoveListner(e) { var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } //残像 function changeAI(n) { afterimage = n; } <canvas id="testCanvas" width="450" height="420" style="border:1px solid #CCC;"></canvas> <div style="text-align:center;font-size:12px;"> <input name="mode" type="radio" value="10" id="rb0" onClick="changeAI(0.15)" /><label for="rb0">残像：強</label>　 <input name="mode" type="radio" value="20" id="rb1" onClick="changeAI(0.5)" /><label for="rb1">残像：弱</label>　 <input name="mode" type="radio" value="30" id="rb2" onClick="changeAI(1)" /><label for="rb2">残像：無</label> </div> body { background-color: #DDDDDD; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/xh7d/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/hikatsuka/xh7d" title="3D アニメーションサンプル">3D アニメーションサンプル - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code