前回の第18回
今回は，
図1 4つのロゴをパーティクルにしてアニメーションさせる
2015年10月9日付ライブラリによる変更
例によって，
// var Cast = require("awayjs-display/lib/utils/Cast");
// var MethodRendererPool = require("awayjs-methodmaterials/lib/pool/MethodRendererPool");
function createView(width, height, backgroundColor) {
// var defaultRenderer = new DefaultRenderer(MethodRendererPool);
var defaultRenderer = new DefaultRenderer();
var view = new View(defaultRenderer);
}
function onResourceComplete(eventObject) {
// var asset = eventObject.assets[0];
// var bitmapData = Cast.bitmapData(asset);
var bitmapData = eventObject.assets[0];
}
ロゴの縁を抜く
前回の結びにほのめかしていたアニメーションの気になるところを先に直そう。それは，
function initialize() {
view = createView(window.innerWidth, window.innerHeight, 0xFFFFFF); // 0x0);
}
図2 ロゴのパーティクルに四角い縁がある
元画像のPNGファイルは，
図3 ロゴの画像ファイルは縁がアルファで抜かれている
function setParticlesData(bitmapData, size, colorValues, colorPoints) {
var color = bitmapData.getPixel32(i, j);
if (((color >> 24) & 0xff) > 0xb0) {
colorValues.push(rgbColor);
colorPoints.push(point);
}
}
4つのビットマップからバーティクルをつくる
では，
図4 SafariとInternet Explorerのロゴ画像
画像ファイルのURLは配列の変数
var assetsURLs = [
"assets/chrome.png",
"assets/firefox.png",
"assets/safari.png",
"assets/ie.png"
];
function onResourceComplete(eventObject) {
var bitmapData = eventObject.assets[0];
switch (eventObject.url) {
case assetsURLs[0]:
bitmapDatas[0] = bitmapData;
break;
case assetsURLs[1]:
bitmapDatas[1] = bitmapData;
break;
case assetsURLs[2]:
bitmapDatas[2] = bitmapData;
break;
case assetsURLs[3]:
bitmapDatas[3] = bitmapData;
break;
}
}
そして，
var bitmapDatas = new Array(assetsURLs.length);
function onResourceComplete(eventObject) {
if (allDataExists(bitmapDatas)) {
var colorGeometry = createParticles();
startParticleAnimation(colorGeometry, assetsURLs.length);
}
}
function allDataExists(array) {
var count = array.length;
for (var i = 0; i < count; i++) {
if (!array[i]) {
return false;
}
}
return true;
}
あとは，
function initColorParticle(properties) {
var index = properties.index;
var endPoint = new Vector3D();
if (index < colorSeparations[0]) {
endPoint.x = size;
// } else {
} else if (index < colorSeparations[1]) {
endPoint.x = -size;
} else if (index < colorSeparations[2]) {
endPoint.z = size;
} else {
endPoint.z = -size;
}
}
