Skip to content

Instantly share code, notes, and snippets.

@shogito
Last active December 5, 2018 08:12
Show Gist options
  • Save shogito/8436825 to your computer and use it in GitHub Desktop.
Save shogito/8436825 to your computer and use it in GitHub Desktop.
JavascriptからCSS3のmatrixをいじる用関数達
// random関数定義
var random = function(_num){
return Math.floor(Math.random() * _num);
}
// range関数定義
var range = function(_start, _end, _step){
if (arguments.length <= 1){
_end = _start || 0;
_start = 0;
}
_step = arguments[2] || 1;
var _length = Math.max(Math.ceil((_end - _start) / _step), 0);
var _idx = 0;
var _range = new Array(_length);
while (_idx < _length){
_range[_idx++] = _start;
_start += _step;
}
return _range;
}
// 3D操作関連
//transform3d設定値をmatrix化
function matrix3dToArray(matrix3d){
var re = /matrix3d\((.*)\)/;
var vals = matrix3d.match(re)[1].replace(/ /g, "").split(",");
vals = vals.map(Number)
var matrix = [new Array(4),new Array(4),new Array(4),new Array(4)];
matrix[0][0] = vals[0];
matrix[0][1] = vals[1];
matrix[0][2] = vals[2];
matrix[0][3] = vals[3];
matrix[1][0] = vals[4];
matrix[1][1] = vals[5];
matrix[1][2] = vals[6];
matrix[1][3] = vals[7];
matrix[2][0] = vals[8];
matrix[2][1] = vals[9];
matrix[2][2] = vals[10];
matrix[2][3] = vals[11];
matrix[3][0] = vals[12];
matrix[3][1] = vals[13];
matrix[3][2] = vals[14];
matrix[3][3] = vals[15];
return matrix;
}
//非3dのtransform設定値をmatrix化
function matrixToArray(matrix3d){
var re = /matrix\((.*)\)/;
var vals = matrix3d.match(re)[1].replace(/ /g, "").split(",");
vals = vals.map(Number)
var matrix = [new Array(4),new Array(4),new Array(4),new Array(4)];
matrix[0][0] = vals[0];
matrix[0][1] = vals[1];
matrix[0][2] = 0;
matrix[0][3] = 0;
matrix[1][0] = vals[2];
matrix[1][1] = vals[3];
matrix[1][2] = 0;
matrix[1][3] = 0;
matrix[2][0] = 0;
matrix[2][1] = 0;
matrix[2][2] = 1;
matrix[2][3] = 0;
matrix[3][0] = vals[4];
matrix[3][1] = vals[5];
matrix[3][2] = 0;
matrix[3][3] = 1;
return matrix;
}
//htmlオブジェクトから2d/3d matrix設定値を参照
function getMatrix(element){
function browserCheck(element){
var matrix = getComputedStyle(element, null).getPropertyValue("-moz-transform");
if(matrix){
return matrix;
}
var matrix = getComputedStyle(element, null).getPropertyValue("-webkit-transform");
if(matrix){
return matrix;
}
}
var matrix = browserCheck(element);
var re = /matrix3d\((.*)\)/;
if (matrix.match(re)){
return matrix3dToArray(matrix);
}
var re = /matrix\((.*)\)/;
if (matrix.match(re)){
return matrixToArray(matrix);
}
return [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]];
}
//matrixをtransform3d値に変換
function matrixToMatrix3d(matrix){
var vals = [];
vals[0] = matrix[0][0].toFixed(20);
vals[1] = matrix[0][1].toFixed(20);
vals[2] = matrix[0][2].toFixed(20);
vals[3] = matrix[0][3].toFixed(20);
vals[4] = matrix[1][0].toFixed(20);
vals[5] = matrix[1][1].toFixed(20);
vals[6] = matrix[1][2].toFixed(20);
vals[7] = matrix[1][3].toFixed(20);
vals[8] = matrix[2][0].toFixed(20);
vals[9] = matrix[2][1].toFixed(20);
vals[10] = matrix[2][2].toFixed(20);
vals[11] = matrix[2][3].toFixed(20);
vals[12] = matrix[3][0].toFixed(20);
vals[13] = matrix[3][1].toFixed(20);
vals[14] = matrix[3][2].toFixed(20);
vals[15] = matrix[3][3].toFixed(20);
var matrix3d = "matrix3d(" +
vals[0] + "," +
vals[1] + "," +
vals[2] + "," +
vals[3] + "," +
vals[4] + "," +
vals[5] + "," +
vals[6] + "," +
vals[7] + "," +
vals[8] + "," +
vals[9] + "," +
vals[10] + "," +
vals[11] + "," +
vals[12] + "," +
vals[13] + "," +
vals[14] + "," +
vals[15] + ")";
return matrix3d;
}
//度/ラジアン変換
function deg2rad(deg){
var rad = deg * Math.PI / 180;
return rad;
}
//平行移動
function translate(tx, ty, tz){
var matrix = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[tx,ty,tz,1]];
return matrix;
}
//角運動 X軸
function rotateX(rx){
var rad = deg2rad(rx);
var matrix = [
[1,0,0,0],
[0,Math.cos(rad),Math.sin(rad),0],
[0,-Math.sin(rad),Math.cos(rad),0],
[0,0,0,1]
]
return matrix;
}
//角運動 Y軸
function rotateY(ry){
var rad = deg2rad(ry);
var matrix = [
[Math.cos(rad),0,-Math.sin(rad),0],
[0,1,0,0],
[Math.sin(rad),0,Math.cos(rad),0],
[0,0,0,1]
]
return matrix;
}
//角運動 Z軸
function rotateZ(rz){
var rad = deg2rad(rz);
var matrix = [
[Math.cos(rad),Math.sin(rad),0,0],
[-Math.sin(rad),Math.cos(rad),0,0],
[0,0,1,0],
[0,0,0,1]
]
return matrix;
}
//
function rotateElement(elm, rx, ry, rz){
var matrix = getMatrix(elm);
if (rx !== 0){
var rx = rotateX(rx);
var matrix = numeric.dot(matrix, rx);
}
if (ry !== 0){
var ry = rotateY(ry);
var matrix = numeric.dot(matrix, ry);
}
if (rz !== 0){
var rz = rotateY(rz);
var matrix = numeric.dot(matrix, rz);
}
var matrix3d = matrixToMatrix3d(matrix);
compatiTransform(elm, matrix3d);
}
//
function compatiTransform(elm, matrix3d){
if (elm.style.webkitTransform !== undefined){
elm.style.webkitTransform = matrix3d;
}
if (elm.style.MozTransform !== undefined){
elm.style.MozTransform = matrix3d;
}
}
//操作対象element生成関連
//対象の親オブジェクトにmainPanelつくる
function createMainPanel(parentNode, className){
if(className === undefined){ className = 'mainPanel'}
var element = document.createElement('div');
element.id = "mainPanel";
// element.textContent = "panel";
element.className = "mainPanel";
parentNode.appendChild(element);
return element;
}
//親の下に子element生成
function createChilds(args){
// args{ className, textContet, parent, childs }
if(args.className === undefined){ args.className = 'childNode'}
var childNodes = {};
for (var _i = 0; _i < args.childs.length; _i++){
var element = document.createElement('div');
if(args.id !== undefined){ element.id = args.id ; }
if(args.textContent !== undefined){ element.textContent = args.textContent ; }
if(args.className !== undefined){ element.className = args.className ; } else { element.className = 'childNode';}
args.parent.appendChild(element);
childNodes[_i] = element;
}
return childNodes;
}
@guzuomuse
Copy link

hi,glade to see this code,can you explain how to use it ? thank you!

@misaki-s
Copy link

https://qiita.com/shogito/items/a5be366464d8cca5bafb

var rz = rotateY(rz);
拝見しました。
219行目のコードrotateYではなくrotateZではないですか?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment