// 表示するcanvasを用意
let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

//表示をする画像の数
let totalSprites = 100;

//パーティクルの設定
let sprites = new PIXI.particles.ParticleContainer(totalSprites, {
    scale: true,
    position: true
});

//ステージに反映
app.stage.addChild(sprites);

// 複数の画像を設定
let hayachi = [];

//画像分をtotalSprites回数分ループ
for (let i = 0; i < totalSprites; i++) {

    // 画像の設定
    let dude = PIXI.Sprite.fromImage('http://hayachi.github.io/images/hayachi-blue.png');
    
    // 画像の中心地をきめる
    dude.anchor.set(0.5);

    // 画像のサイズのランダムにきめる
    dude.scale.set(0.01 + Math.random() * 0.1);

    // ランダムに散らす
    dude.x = Math.random() * app.screen.width;
    dude.y = Math.random() * app.screen.height;

    // ランダムな速度を0〜2の間で作ります。
    dude.speed = (200 + Math.random() * 0.5) * 0.5;

    // 生成された画像の配列をpushして簡単にアクセスできるようにします
    hayachi.push(dude);

    // ループのデータを反映
    sprites.addChild(dude);
}

//アニメーションの初期値値
let tick = 0;
//ステージの高さ
const HEIGHT = 620;

app.ticker.add(function() {

    // 画像を繰り返し処理して位置を更新する
    for (let i = 0; i < hayachi.length; i++) {
        //配列を代入
        let dude = hayachi[i];
        //横の位置
        dude.x += (Math.random() - 0.5) * 1 * dude.scale.x;
        //縦の位置
        dude.y += dude.scale.y * dude.speed;
      
      　　　　//画面の一番下に行った時縦の位置をリセット、横の位置をランダムに配置
        if (dude.y > HEIGHT) {
             dude.y = -10;
             dude.x += (Math.random() - 0.5) * 1 * dude.scale.x;
         }
    }

    // ティッカーを増やす
    tick += 0.1;
});

//------テキストの描画-----//

// スタイルを指定
let styleBig = new PIXI.TextStyle({
    fontFamily: 'Comfortaa',
    fontSize: 70,
    fill: '#ffffff',
    lineJoin: 'round',
    stroke: '#1099bb',
    strokeThickness: 30,
    align: 'center',
    wordWrapWidth: 1000,
    wordWrap: true
});
let styleSmall =  new PIXI.TextStyle({
    fontFamily: 'Comfortaa',
    fontSize: 40,
    fill: '#ffffff',
    lineJoin: 'round',
    stroke: '#1099bb',
    strokeThickness: 30,
    align: 'center',
    wordWrapWidth: 1000,
    wordWrap: true
});

// スタイルを反映
let textBig = new PIXI.Text('Pixi.js', styleBig);
let textSmall = new PIXI.Text('Particle animation', styleSmall);

// テキストの位置を指定
textBig.x = 300;
textBig.y = 220;
textSmall.x = 200;
textSmall.y = 320;

// ステージに表示させる
app.stage.addChild(textBig);
app.stage.addChild(textSmall);