Animation Balls 04

let locationVector = []; // 位置ベクトルの配列

let velocityVector = []; // 速度ベクトルの配列

let diameter = []; // 円の直径の配列

let ballColor = []; // 円の色の配列

const NUM = 50; // 円の数

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 100);

  for (let i = 0; i < NUM; i++) {

    // 位置ベクトルを画面の中心に

    locationVector[i] = createVector(width / 2, height / 2);

    // 速度ベクトルはランダムに

    velocityVector[i] = createVector(random(-width/200, width/200), random(-width/200, width/200));

    // 円の直径は最初は小さく揃える

    diameter[i] = width/400;

    // 円の色はランダムに

    ballColor[i] = color(random(180, 260), 80, 80, 80);

  }

}

​

function draw() {

  // 色の設定

  background(0);

  noStroke();

  for (let i = 0; i < NUM; i++) {

    // 速度ベクトルを位置ベクトルに足し合わせる

    locationVector[i].add(velocityVector[i]);

    // 円を描く

    fill(ballColor[i]);

    circle(locationVector[i].x, locationVector[i].y, diameter[i]);

    // 画面の端で円をバウンドさせる

    if (locationVector[i].x < 0 || locationVector[i].x > width) {

      velocityVector[i].x = velocityVector[i].x * -1;

      // バウンドする際にボールのサイズ増加

      diameter[i] *= 1.5;

      // サイズが一定以上になったらリセット

      if(diameter[i] > width/3){

        diameter[i] = width/400;

      }

    }

    if (locationVector[i].y < 0 || locationVector[i].y > height) {

      velocityVector[i].y = velocityVector[i].y * -1;

      // バウンドする際に色と大きさをランダムに再設定

      diameter[i] *= 1.5;

      // サイズが一定以上になったらリセット

      if(diameter[i] > width/3){

        diameter[i] = width/400;

      }

    }

  }

}