1Cr18Ni9/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Recently, fascinating on Matrix.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .box {
      width: 500px;
      height: 400px;
      background-color: lightgray;
    }

  .content {
      width: 120px;
      height: 120px;
      background-color: #333;
      transform-origin: left top;
      color: blue;
      font-size: 30px;
      line-height: 120px;
      text-align: center;
    	background-image: url(https://source.unsplash.com/120x120);
    }
  </style>
</head>

<body>

<div class="box">
  <div id="target" class="content">F__Q</div>
</div>


<script>
function Matrix3 (arr) {
    if (arr) { this.elements = arr; }
    else {
        this.elements = [
            1, 0, 0,
            0, 1, 0,
            0, 0, 1
        ];
    }
}
Matrix3.prototype.identity = function () {
    this.elements = [
        1, 0, 0,
        0, 1, 0,
        0, 0, 1
    ];
    return this;
};
Matrix3.prototype.multiply = function (m) {
    var a = this.elements,
        b = m.elements;
    var a11 = a[0], a12 = a[1], a13 = a[2],
        a21 = a[3], a22 = a[4], a23 = a[5],
        a31 = a[6], a32 = a[7], a33 = a[8],

        b11 = b[0], b12 = b[1], b13 = b[2],
        b21 = b[3], b22 = b[4], b23 = b[5],
        b31 = b[6], b32 = b[7], b33 = b[8];

    var c11 = a11 * b11 + a12 * b21 + a13 * b31;
    var c12 = a11 * b12 + a12 * b22 + a13 * b32;
    var c13 = a11 * b13 + a12 * b23 + a13 * b33;

    var c21 = a21 * b11 + a22 * b21 + a23 * b31;
    var c22 = a21 * b12 + a22 * b22 + a23 * b32;
    var c23 = a21 * b13 + a22 * b23 + a23 * b33;

    var c31 = a31 * b11 + a32 * b21 + a33 * b31;
    var c32 = a31 * b12 + a32 * b22 + a33 * b32;
    var c33 = a31 * b13 + a32 * b23 + a33 * b33;

    this.elements = [
        c11, c12, c13,
        c21, c22, c23,
        c31, c32, c33
    ];
    return this;
};
Matrix3.prototype.toArray = function () {
    return this.elements;
};
Matrix3.prototype.to2DMatrix = function () {
    var a = this.elements;
    return [a[0], a[3], a[1], a[4], a[2], a[5]];
};


Matrix3.translate = function (tx, ty) {
    return new Matrix3([
        1, 0, tx,
        0, 1, ty,
        0, 0, 1
    ]);
};
Matrix3.scale = function (s) {
    return new Matrix3([
        s, 0, 0,
        0, s, 0,
        0, 0, 1
    ]);
};
Matrix3.rotate = function (rad) {
    var s = Math.sin(rad);
    var c = Math.cos(rad);
    return new Matrix3([
        c, -s, 0,
        s, c, 0,
        0, 0, 1
    ]);
};


var m = new Matrix3();
var config = {
  tx: 100, ty: 50,
  scale: 1.5,
  rad: 35
}
var target = document.getElementById("target");


function evt () {
  var res = m.identity()
    .multiply(Matrix3.translate(config.tx, config.ty))
    .multiply(Matrix3.rotate(config.rad * Math.PI / 180))
    .multiply(Matrix3.scale(config.scale))
    .to2DMatrix();
  target.style.transform = "matrix(" + res.join(",") + ")";
}
var gui = new dat.GUI();
gui.add(config, "tx", 0, 600).onChange(evt);
gui.add(config, "ty", 0, 400).onChange(evt);
gui.add(config, "scale", 0.2, 2).onChange(evt);
gui.add(config, "rad", 0, 360).onChange(evt);

evt();

</script>

</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.box {
	width: 500px;
	height: 400px;
	background-color: lightgray;
	}

	.content {
	width: 120px;
	height: 120px;
	background-color: #333;
	transform-origin: left top;
	color: blue;
	font-size: 30px;
	line-height: 120px;
	text-align: center;
	background-image: url(https://source.unsplash.com/120x120);
	}
	</style>
	</head>

	<body>

	<div class="box">
	<div id="target" class="content">F__Q</div>
	</div>


	<script>
	function Matrix3 (arr) {
	if (arr) { this.elements = arr; }
	else {
	this.elements = [
	1, 0, 0,
	0, 1, 0,
	0, 0, 1
	];
	}
	}
	Matrix3.prototype.identity = function () {
	this.elements = [
	1, 0, 0,
	0, 1, 0,
	0, 0, 1
	];
	return this;
	};
	Matrix3.prototype.multiply = function (m) {
	var a = this.elements,
	b = m.elements;
	var a11 = a[0], a12 = a[1], a13 = a[2],
	a21 = a[3], a22 = a[4], a23 = a[5],
	a31 = a[6], a32 = a[7], a33 = a[8],

	b11 = b[0], b12 = b[1], b13 = b[2],
	b21 = b[3], b22 = b[4], b23 = b[5],
	b31 = b[6], b32 = b[7], b33 = b[8];

	var c11 = a11 * b11 + a12 * b21 + a13 * b31;
	var c12 = a11 * b12 + a12 * b22 + a13 * b32;
	var c13 = a11 * b13 + a12 * b23 + a13 * b33;

	var c21 = a21 * b11 + a22 * b21 + a23 * b31;
	var c22 = a21 * b12 + a22 * b22 + a23 * b32;
	var c23 = a21 * b13 + a22 * b23 + a23 * b33;

	var c31 = a31 * b11 + a32 * b21 + a33 * b31;
	var c32 = a31 * b12 + a32 * b22 + a33 * b32;
	var c33 = a31 * b13 + a32 * b23 + a33 * b33;

	this.elements = [
	c11, c12, c13,
	c21, c22, c23,
	c31, c32, c33
	];
	return this;
	};
	Matrix3.prototype.toArray = function () {
	return this.elements;
	};
	Matrix3.prototype.to2DMatrix = function () {
	var a = this.elements;
	return [a[0], a[3], a[1], a[4], a[2], a[5]];
	};


	Matrix3.translate = function (tx, ty) {
	return new Matrix3([
	1, 0, tx,
	0, 1, ty,
	0, 0, 1
	]);
	};
	Matrix3.scale = function (s) {
	return new Matrix3([
	s, 0, 0,
	0, s, 0,
	0, 0, 1
	]);
	};
	Matrix3.rotate = function (rad) {
	var s = Math.sin(rad);
	var c = Math.cos(rad);
	return new Matrix3([
	c, -s, 0,
	s, c, 0,
	0, 0, 1
	]);
	};




	var m = new Matrix3();
	var config = {
	tx: 100, ty: 50,
	scale: 1.5,
	rad: 35
	}
	var target = document.getElementById("target");



	function evt () {
	var res = m.identity()
	.multiply(Matrix3.translate(config.tx, config.ty))
	.multiply(Matrix3.rotate(config.rad * Math.PI / 180))
	.multiply(Matrix3.scale(config.scale))
	.to2DMatrix();
	target.style.transform = "matrix(" + res.join(",") + ")";
	}
	var gui = new dat.GUI();
	gui.add(config, "tx", 0, 600).onChange(evt);
	gui.add(config, "ty", 0, 400).onChange(evt);
	gui.add(config, "scale", 0.2, 2).onChange(evt);
	gui.add(config, "rad", 0, 360).onChange(evt);

	evt();

	</script>

	</body>