ETERNITY DESIGN BLOG

EaselJSでBlurFilterのモーション [CreateJS]

前回のエントリーに続けて、CreateJSというか、EaselJSのエントリーです。

最近、ホームをリニューアルしました。
以前はFlashだったのですが、ずっとFlashをやめたかったので、ようやくという感じです。
(Flashが嫌いになったとかではないです。)

以前のFlashサイトの背景にあった、サークルとブラーフィルタによる表現だけは残したかったので、EaselJSでの実装を進めていたのですが、最終的に、公開バージョンへの実装はやめました。

特にコードを最適化したわけでもありませんが、EaselJSによるブラーフィルタのアニメーションにはまだ無理があるということなのでしょうか。

IE10でのモーションが一番いい感じ、次にFirefoxがいい感じ。
WebKitは(ほぼ)固まる。

デモはこちら

function Main() {
	this.canvas;
	this.stage;
	this._width = 500;
	this._height = 500;
	this.circles = new Array();
	this.basePosX = 0;
	this.basePosY = 0;
	this._FPS = 20;

	this.init();
}

Main.prototype.init = function() {
	this.canvas = document.getElementById('ed_ver5');
	this.resizeEvent();

	this.stage = new createjs.Stage(this.canvas);
	this.stage.compositeOperation = "lighter";

	createjs.Ticker.setFPS(this._FPS);
	createjs.Ticker.addEventListener("tick", delegate(this.tickEvent, this));
}

Main.prototype.setCircleTimerEvent = function() {
	var circle = new Circle();
	circle.view.x = this.basePosX + (100 * Math.random());
	circle.view.y = this.basePosY + (100 * Math.random());
	this.stage.addChild(circle.view);

	this.circles.push(circle);
}

Main.prototype.tickEvent = function(e) {
	this.setCircleTimerEvent();
	var max = this.circles.length;

	for(var i = 0; i < max; i++) {
		var circle = this.circles[i];

		if(circle != null) {
			circle.count++;

			if(circle.count > 20) {
				this.stage.removeChild(circle.view);
				circle = null;
				this.circles[i] = null;
			}
			else {
				var blurFilter = new createjs.BoxBlurFilter(2 * circle.count, 2 * circle.count, 1);
				var bounds = blurFilter.getBounds();

				circle.view.filters = [blurFilter];
				circle.view.cache(-50 + bounds.x, -50 + bounds.y, 100 + bounds.width, 100 + bounds.height);
				circle.view.updateCache();
			}
		}
	}

	this.stage.update();

	this.circles = this.circles.filter(this.isCountOver);
}

Main.prototype.isCountOver = function(element, index, array) {
	return (element != null);
}

Main.prototype.resizeEvent = function() {
	// console.log($(window).width());
	this._width = $('body').innerWidth();
	this._height = $('body').innerHeight();

	this.canvas.width = this._width;
	this.canvas.height = this._height;
}

Main.prototype.finalize = function() {

}

function delegate(func, scp) {
	var dlgt = function() {
		return func.apply(scp, arguments);
	}

	dlgt.func = func;
	dlgt.scp = scp;

	return dlgt; 
}




function Circle() {
	this.view = null;
	this.count = 1;
	this.init();
}

Circle.prototype.init = function() {
	var color = "#" + this.hsv2rgb(360 * Math.random(), 100, 100);

	this.view = new createjs.Shape();
	this.view.graphics.setStrokeStyle(3);
	this.view.graphics.beginFill("rgba(0, 0, 0, 0)");
	this.view.graphics.beginStroke(color);
	this.view.graphics.drawCircle(0, 0, 50);
	this.view.graphics.endFill();

	var scale = 2 * Math.random();
	this.view.scaleX = scale;
	this.view.scaleY = scale;

	var blurFilter = new createjs.BoxBlurFilter(2, 2, 1);
	var bounds = blurFilter.getBounds();

	this.view.filters = [blurFilter];
	this.view.cache(-50 + bounds.x, -50 + bounds.y, 100 + bounds.width, 100 + bounds.height);
}

Circle.prototype.hsv2rgb = function(h, s, v) {
	var r;
	var g;
	var b;

	h = (h < 0) ? h % 360 + 360 : (h >= 360) ? h % 360 : h;
	s = (s < 0) ? 0 : (s > 100) ? 100 : s;
	v = (v < 0) ? 0 : (v > 100) ? 100 : v;

	s *= 0.01;
	v *= 0.01;

	// 彩度が0の場合は、RGBともvと等しい
	if(s == 0) {
		var val = v * 255;
		r = g = b = Math.round(val);
		//return getUintRGB(val, val, val);
	}
	else {
		var hi = Math.floor(h / 60) % 6;
		var f = h / 60 - hi;
		var p = v * (1 - s);
		var q = v * (1 - s * f);
		var t = v * (1 - (s * (1 - f)));

		switch(hi) {
			case 0:
				r = v;
				g = t;
				b = p;
				break;

			case 1:
				r = q;
				g = v;
				b = p;
				break;

			case 2:
				r = p;
				g = v;
				b = t;
				break;

			case 3:
				r = p;
				g = q;
				b = v;
				break;

			case 4:
				r = t;
				g = p;
				b = v;
				break;

			case 5:
				r = v;
				g = p;
				b = q;
				break;
		}

		r = Math.round(r * 255);
		g = Math.round(g * 255);
		b = Math.round(b * 255);
	}

	var color = ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
	return color;
}

Circle.prototype.finalize = function() {

}

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS