datchの日記

気がついたら社会人。気になる技術的なことについて少しずつ書いていけたらと思っております。

【Wonderfl移植計画】LightningEffect【2作目】

wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植するプロジェクト。


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

66位 LightningEffect


移植元のFlashソースコード

ソースコードは次回から解説をします。


今回はソースコードを掲載するだけにします。


// EaselJS 0.7

// EaselJS 0.7
// BitmapData 0.8.5
// -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata

window.onload = init;

var W = 465;
var H = 465;
var RANGE = 5;

var _p;	
var _sp;
var _ctf;

var _canvas;
var _glow;

var stage;
var fill;

var _matrix;

function init()
{
	stage = new createjs.Stage("canvas");
	
	_p = new createjs.Point(W / 2, H / 2);
	_sp = new createjs.Shape();
	_sp.cache(0, 0, W, H);
	_ctf = new createjs.ColorTransform(0.9, 0.96, 1, 0.9, 0, 0, 0, -1);
	_canvas = new createjs.BitmapData(null, W, H, 0x00000000);
	var bm = new createjs.Bitmap(_canvas.canvas);
	_glow = new createjs.BitmapData(null, W / RANGE, H / RANGE, 0x00000000);
	_glow.clearRect(0, 0, W, H);
	var glowBm = new createjs.Bitmap(_glow.canvas);
	glowBm.compositeOperation = "lighter";
	glowBm.scaleX = glowBm.scaleY = RANGE;
	_matrix = new createjs.Matrix2D(1 / RANGE, 0, 0, 1 / RANGE);
	fill = new createjs.Shape();
	fill.graphics.beginFill("#000000").drawRect(0, 0, W, H);

	stage.addChild(fill);
	stage.addChild(bm);
	stage.addChild(glowBm);

	createjs.Ticker.addEventListener("tick", update);
	createjs.Ticker.setFPS(30);
	stage.addEventListener("stagemousedown", onDown);
}

function onDown(e)
{
	_p = new createjs.Point(e.stageX, e.stageY);
}

function update()
{
	var p = new createjs.Point();
	var num = Math.random() * 5;
	p.x = _p.x;
	p.y = _p.y;
	var g = _sp.graphics;
	g.clear();
	g.beginStroke(createjs.Graphics.getRGB(255, 255, 255, 1 - (num / 10)))
	.setStrokeStyle(num)
	.moveTo(p.x, p.y);
	var i = p.y;
	while(i < H)
	{
		var n = Math.random() * 10;
		i += n;
		p.y = i;
		p.x += Math.random() * (n * 2) - n;
		g.lineTo(p.x, p.y);
	}
	_sp.updateCache();
	_canvas.colorTransform(_canvas.rect, _ctf);
	_canvas.draw(_sp);
	_glow.colorTransform(_glow.rect, _ctf);
	_glow.draw(_canvas, _matrix, null, null, null, true);
	stage.update();
}