カラフルボール

let num = 100 //円の数

let vecLocation = []; //円の中心ベクトル

let vecVelocity = []; //円の速度ベクトル

let colorR = [];

let colorG = [];

let colorB = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);　//画面生成

  frameRate(60); //フレームレート

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

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

    vecVelocity[i] = createVector(random(-10, 10), random(-10, 10));

    colorR[i] = random(255); 

    colorG[i] = random(255); 

    colorB[i] = random(255); 

  }

​

}

​

function draw(){

  background(0); //背景描画

  noStroke();

  fill(random(255), random(255), random(255));

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

    vecLocation[i].add(vecVelocity[i]); //円の座標更新

    fill(colorR[i], colorG[i], colorB[i]);

    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20); //指定した位置に円を描画

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

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

    }

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

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

    }

  }

}