今更ながら、CreateJSで万華鏡を作る
今回のポイント
- 万華鏡を表示する部分は、正三角形ShapeでBitmapオブジェクトをクリッピングマスクして作る
- マスクしたBitmapをcontainerに入れて回転させることで、画像とマスクを一緒に回転する
function maskedBMP(imgsrc) {
//imgsrcは、画像ファイル名
var container = new createjs.Container();
//画像
var bmpimg = new createjs.Bitmap(imgsrc);
//mask Bitmapのクリッピングマスク処理
var maskShape = new createjs.Shape();
maskShape.graphics.beginFill("#FF0000");
maskShape.graphics.drawPolyStar(0, 0, 100, 3, 0, 0)
var hen = (2 * 150) / Math.sqrt(3);
maskShape.x = 50;
maskShape.y = hen / 2;
//Bitmapオブジェクトを正三角形Shapeでクリッピングマスク
bmpimg.set({
mask : maskShape
});
//コンテナに入れて返す
container.addChild(bmpimg);
return container;
}
containerオブジェクトを6つ作り、60度ずつ回転させて、6角形になるように置く。
それぞれを、鏡像になるように反転。
マスクしたBitmapをcontainerに入れて回転させることで、画像とマスクを一緒に回転する。
(以下、無駄なコードの書き方してます。)
function create_mangeobj( imgsrc ) {
var hen = (2 * 150) / Math.sqrt(3);
mb1 = maskedBMP(imgsrc);
stage.addChild(mb1);
mb1.regX = 150;
mb1.regY = hen / 2;
mb1.x = 320;
mb1.y = 198;
mb2 = maskedBMP(imgsrc);
stage.addChild(mb2);
mb2.regX = 150;
mb2.regY = hen / 2;
mb2.x = 320;
mb2.y = 198;
mb2.scaleX = 1; //鏡像
mb2.scaleY = -1; //鏡像
mb2.rotation = 60;
mb3 = maskedBMP(imgsrc);
stage.addChild(mb3);
mb3.regX = 150;
mb3.regY = hen / 2;
mb3.x = 320;
mb3.y = 198;
mb3.scaleX = 1;
mb3.scaleY = -1;
mb3.rotation = -60;
mb1b = maskedBMP(imgsrc);
stage.addChild(mb1b);
mb1b.regX = 150;
mb1b.regY = hen / 2;
mb1b.x = 320;
mb1b.y = 198;
mb1b.scaleX = -1;
mb1b.scaleY = 1;
mb2b = maskedBMP(imgsrc);
stage.addChild(mb2b);
mb2b.regX = 150;
mb2b.regY = hen / 2;
mb2b.x = 320;
mb2b.y = 198;
mb2b.scaleX = -1;
mb2b.scaleY = -1;
mb2b.rotation = 60;
mb3b = maskedBMP(imgsrc);
stage.addChild(mb3b);
mb3b.regX = 150;
mb3b.regY = hen / 2;
mb3b.x = 320;
mb3b.y = 198;
mb3b.scaleX = -1;
mb3b.scaleY = -1;
mb3b.rotation = -60;
}
最後に、画像部分を移動させて万華鏡の完成。
//画像ファイルは、はじめにpreloadで読んでおく。
//読み込む外部ファイル情報
var manifest = [
{src: "./images/penguins2.jpg"},
{src: "./images/tulips2.jpg"},
{src: "./images/hydrangeas2.jpg"},
];
// Stageの描画を更新
function handleTick() {
if(mb3b.getChildAt(0).x > -298) {
//万華鏡内の画像を移動
mb1.getChildAt(0).x -= 1;
mb2.getChildAt(0).x -= 1;
mb3.getChildAt(0).x -= 1;
mb1b.getChildAt(0).x -= 1;
mb2b.getChildAt(0).x -= 1;
mb3b.getChildAt(0).x -= 1;
} else {
//万華鏡画像を変更
if ( cnt < 2 ) {
cnt++;
} else {
cnt = 0;
}
create_mangeobj(imgs[cnt]);
}
stage.update();
}