せん断 : ActionScript

Tweet

Pocket

グラフィックでよく利用される線形変換の中でせん断のサンプル。

/*
* 3次元アフィン変換
*/
/*
* 3次元アフィン変換
*/
var timer:Number;
function Polygon(points, color, alpha) {
	var points = points;
	var color = color;
	var alpha = alpha;
	this.draw = function(target) {
		target.beginFill(color, alpha);
		target.moveTo(points[0].x, points[1].y);
		for (var i = 0; i<points.length; i++) {
			target.lineTo(points[i].x, points[i].y);
		}
		target.lineTo(points[0].x, points[0].y);
		target.endFill();
	};
}
function AffinTransform() {
	var M = {};
	this.init = function(elem) {
		M.a11 = elem.a11;
		M.a12 = elem.a12;
		M.a13 = elem.a13;
		M.a21 = elem.a21;
		M.a22 = elem.a22;
		M.a23 = elem.a23;
		M.a31 = elem.a31;
		M.a32 = elem.a32;
		M.a33 = elem.a33;
	};
	this.tranceform = function(points) {
		var newpoints = new Array();
		for (var i = 0; i<points.length; i++) {
			newpoints[i] = {};
			newpoints[i].x = M.a11*points[i].x+M.a12*points[i].y+M.a13;
			newpoints[i].y = M.a21*points[i].x+M.a22*points[i].y+M.a23;
			newpoints[i].z = M.a31*points[i].x+M.a32*points[i].y+M.a33;
		}
		return newpoints;
	};
	this.getDet = function() {
		var det = M.a11*M.a22-M.a21*M.a12;
		return det;
	};
}
function Main() {
	// 点
	var a = {x:0, y:0, y:1};
	var b = {x:100, y:0, y:1};
	var c = {x:100, y:100, y:1};
	var d = {x:0, y:100, y:1};
	var points = [a, b, c, d];
	var a12 = 0;
	var a21 = 0;
	var affin;
	var moving = function () {
		a12 += 0.01;
		a21 += 0;
		affin.init({a11:1, a12:a12, a13:0, a21:a21, a22:1, a23:0, a31:0, a32:0, a33:1});
		var newpoints = affin.tranceform(points);
		var o = new Polygon(newpoints, '0xFF0000', 100);
		_root.clear();
		o.draw(_root);
		if (newpoints[2].x>200) {
			clearInterval(timer);
		}
	};
	this.init = function() {
		affin = new AffinTransform();
		timer = setInterval(moving, 50);
	};
}
var m;
m = new Main();
m.init();
play_mc.flag = true;
play_mc.onPress = function() {
	if (this.flag) {
		this.flag = false;
		clearInterval(timer);
		delete m;
	} else {
		trace('hello');
		this.flag = true;
		m = new Main();
		m.init();
	}
};