ETERNITY DESIGN BLOG

EaselJSでCircleとBlurFilter [CreateJS]

EaselJSでブラーフィルタを適用した円を描画してみます。
カラーもサイズも位置もランダム。

端は切れているのは、Shape.cache()だろうか。

サンプルはこちら

以下コード。
元のコードから適当に該当部分だけ取り出した感じなので、察してください。

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

	this.init();
}

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

	this.stage = new createjs.Stage(this.canvas);

	var circle = new Circle();
	circle.view.x = this._width * Math.random();
	circle.view.y = this._height * Math.random();
	this.stage.addChild(circle.view);

	this.stage.update();
}

Main.prototype.resizeEvent = function() {
	this._width = $('body').innerWidth();
	this._height = $('body').innerHeight();

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

Main.prototype.finalize = function() {

}




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