【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(); }