var W = window.innerWidth;
var H = window.innerHeight;
var bubbleNum = 50; // bubbleの数
var bubbleRadius = 30; // bubbleのサイズ
var colorCode1 = {
  c1: "0x394a51",
  c2: "0x7fa99b",
  c3: "0xfdc57b",
  c4: "0xfbf2d5"
};
var colorCode2 = {
  c1: "0x434343",
  c2: "0xa64452",
  c3: "0xf7c873",
  c4: "0xf8f8f8"
};

// -----------------------------
// ランダムで-1か1を返す
function randomSign(){
  return Math.round(Math.random());
}
// ランダムなカラーコードを返す
function randomColor(colorCode){
  if(Math.round( Math.random()*3) == 0){
    return colorCode.c2;
  }else if(Math.round( Math.random()*3) == 1){
    return colorCode.c3;
  }else if(Math.round( Math.random()*3) == 2){
    return colorCode.c4;
  }
  return colorCode.c2;
}

// -----------------------------
var app = new PIXI.Application(
  {
    width: W,
    height: H,
    antialias: true,
    backgroundColor: colorCode1.c1,
  }
);
document.body.appendChild(app.view);
app.stage.interactive = true;

var bubbles = [];
for( var i = 0; i < bubbleNum; i++ ) {
  var bb = new PIXI.Graphics();
  bb.beginFill(randomColor(colorCode1));
  bb.drawCircle(
    Math.round(Math.random()*W), 
    Math.round(Math.random()*H), 
    Math.round(Math.random()*bubbleRadius)
  );
  bb.endFill();
  
  bubbles.push(bb);
  app.stage.addChild(bb);
}

app.ticker.add(delta => {
  for( var i = 0; i < bubbleNum; i++ ) {
    var bb = bubbles[i];
    bb.x += 0;    
    // Memo: 
    // 本来は「-bubbleRadius*2」でいいはずだが、どうにもうまくいかなかった…
    // PixiJSでのY座標位置は円の中心点ではない可能性…??それはないか…
    // 単純に処理落ちかもしれない
    if(bb.y < -bubbleRadius*10)
      bb.y = H + bubbleRadius*2;
    else
      bb.y += Math.random() * 5 * -1;
  }
});