//----------------------------
// min以上〜max以下までの範囲でランダムな変数を生成
// 参考記事: https://qiita.com/uto-usui/items/7193db237175ba15aaa3
//----------------------------
function randRange(min,max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

//----------------------------
// ランダムなカラーコード生成
// 参考記事: https://qiita.com/_shimizu/items/e3826359b328974c9911
//----------------------------
function colorGen(){ 
    return '#'+Math.floor(Math.random()*16777215).toString(16); 
}

var colorSetArray = [
  ["#0f3057", "#00587a", "#008891", "#e7e7de"],
  ["#ffc7c7", "#ffe2e2", "#f6f6f6", "#8785a2"],
  ["#005874", "#1c819e", "#e6e6d4", "#ffbe00"]
];
//----------------------------
// 指定範囲の色を生成
//----------------------------
function colorGenRange(colorSetNum){
  if(colorSetNum == 0){ // 値が0だったらランダム生成
    return colorGen();
  }else{ // 値が1だったら指定されたカラーコードのパレットよりランダムに生成
    return colorSetArray[colorSetNum-1][randRange(1,4)];
  }
}

//----------------------------
// Canvasを画面いっぱいに表示
// 参考記事: http://weathercook.hatenadiary.jp/entry/20111118/1321600756
//----------------------------
var cv = document.getElementById('cv');
var ctx = cv.getContext("2d");
expandCanvas();
function expandCanvas(){
    var b = document.body;
    var d = document.documentElement;
    cv.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
    cv.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
}

//----------------------------
// Circleオブジェクト
//----------------------------
var Circle = function(){
  // オブジェクト生成と同時に値をセット
  return this.set();
}
// オブジェクトの初期化
Circle.prototype.set = function(){
  this.x = randRange(0, cv.width); 
  this.y = randRange(0, cv.height); 
  this.size = Math.random() * 4 + 1;
  this.speed = Math.random() * 1 + 2;
  this.color = colorGenRange(0);
  var radian = Math.random() * (Math.PI * 360);
  this.to_x = Math.cos( radian );
  this.to_y = Math.sin( radian );
}
// オブジェクトを動かす操作
Circle.prototype.move = function(){
  this.x += this.to_x * this.speed;
  this.y += this.to_y * this.speed;
  this.out_square_in();
}
// オブジェクトがウインドウ外に出た際の処理
Circle.prototype.out_square_in = function(){
  if( this.x + this.size < 0 ) this.x = cv.width;
  if( cv.width < this.x ) this.x = 0 - this.size;
  if( this.y + this.size < 0 ) this.y = cv.height;
  if( cv.height < this.y ) this.y = 0 - this.size;
}
// インスタンス化
var circleNum = 30;
var circles = [];
for( var i = 1; i <= circleNum; i++ ){
  circles.push( new Circle() );
}
document.getElementById("now-circle-num").innerHTML = "※現在の粒の数: "+ circleNum +"個"


function myCanvasRun(){
  ctx.clearRect(0, 0, cv.width, cv.height);
 
  // ドローイング関数で実際にCanvas上に描画
  function draw(){
    // 背景の描画
    ctx.fillStyle = "#000"; // setting background color
    ctx.fillRect( 0, 0, cv.width, cv.height ); // drawing background
    // オブジェクトの描画
    var p;
    for ( var i = 0; i < circles.length; i++) {
      p = circles[i];
      ctx.fillStyle = p.color; // setting the color of an instance
      ctx.beginPath(); // パス書きの指定
      ctx.arc(p.x, p.y, p.size, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
      ctx.fill();
      p.move();
    }

  }

  setInterval(draw, 20);
}

window.onload = myCanvasRun(0);

function circlesColorChange(colorSetNum){
  var p;
  for ( var i = 0; i < circles.length; i++) {
    p = circles[i];
    p.color = colorGenRange(colorSetNum);
  }
}

function increaseCircle(){
  circleNum += 10;
  document.getElementById("now-circle-num").innerHTML = "※現在の粒の数: "+ circleNum +"個"
  for( var i = 1; i <= 10; i++ ){
    var p = new Circle();
    circles.push( new Circle() );    
  }
}