【Wonderfl移植計画】HelloWorld!!!【3作目】
wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植しようという計画。
ライセンスはMITなのを確認していますが、
制作者様の方から何かアクションがあった場合は削除させていただきます。
58位 Hello World!!!
ソースコードは次回から解説をします。
今回はソースコードを掲載するだけにします。
// EaselJS 0.7 // BitmapData 0.8.5 // -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata window.onload = init; var __extends = this.__extends || function(d, b) { function __() {this.constructor = d;} __.prototype = b.prototype; d.prototype = new __(); } var Circle = (function(_super) { __extends(Circle, _super); function Circle(color) { _super.call(this); var shape = new createjs.Shape(); this.addChild(shape); var _g = shape.graphics; var r = (color >> 16) & 0xff; var g = (color >> 8) & 0xff; var b = color & 0xff; _g.beginFill(createjs.Graphics.getRGB(r, g, b, 1.0)).drawCircle(0, 0, 6).endFill(); } return Circle; }(createjs.Container)); var stage; var bd; // {createjs.BitmapData} /** * 初期設定 */ function init() { stage = new createjs.Stage("canvas"); var W = 40; var H = 30; var tf = new createjs.Text("Hello\nWorld!!!", "12px Arial", "#000000"); bd = new createjs.BitmapData(null, W, H, 0xFF3399FF); tf.filters = [new createjs.BlurFilter(10, 10, 1)]; tf.cache(0, 0, W, H); bd.draw(tf); tf.filters = null; tf.updateCache(); bd.draw(tf); delete tf; for(var i = 0; i < bd.width; ++i) { for(var j = 0; j < bd.height; ++j) { var color = bd.getPixel(i, j); var circle = new Circle(color); randomize(circle); stage.addChild(circle); createjs.Tween.get(circle) .wait((i + j) * 200 * Math.random()) .to({x : i * 10, y : j * 10, alpha : 1.0}, 1000); } } createjs.Ticker.addEventListener("tick", update); createjs.Ticker.setFPS(30); } /** * */ function randomize(d) { d.x = 400 * Math.random(); d.y = 300 * Math.random(); d.alpha = 0.0; } function update() { stage.update(); }