【Wonderfl移植計画】HANABI【6作目】

wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植しようという計画。

ライセンスはMITなのを確認していますが、
制作者様の方から何かアクションがあった場合は削除させていただきます。

83位 HANABI

移植元のFlashソースコード

【CreateJSのデモ】

既に掲載元でFlashソースコードで解説がされていますね。

// EaselJS 0.7
// BitmapData 1.0.0
// -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata
window.onload = init;

var stage;

var WIDTH;
var HEIGHT;

var _particles;
var _glow;
var _rect;
var cTra;
var timer;

var sx;
var sy;

var Particle = (function()
{
	function Particle()
	{
		this.x = 0;
		this.y = 0;
		this.vx = 0;
		this.vy = 0;
		this.c = 0xFFFFFFFF;
	}

	return Particle;
}(window));

function init()
{
	stage = new createjs.Stage('canvas');
	WIDTH = stage.canvas.width;
	HEIGHT = stage.canvas.height;

	// @note オブジェクトの生成
	_particles = new Array();

	_canvas = new createjs.BitmapData(null, WIDTH, HEIGHT, 0x0);
	stage.addChild(new createjs.Bitmap(_canvas.canvas));

	_glow = new createjs.BitmapData(null, WIDTH / 4, HEIGHT / 4, 0x0);
	var bm = stage.addChild(new createjs.Bitmap(_glow));
	bm.scaleX = bm.scaleY = 4;

	_rect = new createjs.Rectangle(0, 0, WIDTH, HEIGHT);

	cTra = new createjs.ColorTransform(.8, .8, .9, 1.0);

	createjs.Ticker.addEventListener('tick', enterFrameHandler);
	createjs.Ticker.setFPS(60);

	setInterval('resetFunc()', 100);
}

function resetFunc(e)
{
	(cTra.redMultiplier > 0.9) ? cTra.redMultiplier = 0.8 : cTra.redMultiplier += 0.01;

	hanabi();
}

function hanabi()
{
	var i = 200;
	sx = Math.random() * WIDTH;
	sy = Math.random() * HEIGHT;
	while(i--) createParticle();
}

function createParticle()
{
	var p = new Particle();
	p.x = sx;
	p.y = sy;

	var radius = Math.sqrt(Math.random()) * 10;
	var angle = Math.random() * (Math.PI) * 2;
	p.vx = Math.cos(angle) * radius;
	p.vy = Math.sin(angle) * radius;

	_particles.push(p);
 }

function enterFrameHandler()
{
	update();
}

function update()
{
	_canvas.applyFilter(_canvas, _rect, new createjs.Point(), new createjs.BlurFilter(1, 1));

	_canvas.colorTransform(_rect, cTra);

	var i = _particles.length;

	while(i--)
	{
		var p = _particles[i];
		p.vy += 0.2;
		p.vx *= 0.9;
		p.vy *= 0.9;
		p.x  += p.vx;
		p.y  += p.vy;
		_canvas.setPixel32(p.x, p.y, p.c);

		if((p.x > WIDTH || p.x < 0) || (p.y < 0 || p.y > HEIGHT)
			|| Math.abs(p.vx) < .01 || Math.abs(p.vy) < .01)
		{
			_particles.splice(i, 1);
		}
	}

	_glow.draw(_canvas, new createjs.Matrix2D(0.25, 0, 0, 0.25));
	_canvas.updateContext();

	stage.update();
}