デザインとプログラミング

let num = 150; //円の数

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

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

let rad = [];

let col = ["#ffff00","#0000ff","#ffffff"];

function setup() {

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

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

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

vecLocation[i] = createVector(random(windowWidth), random(windowHeight));

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

rad[i] = random(5,50);//半径

}

}

​

function draw() {

background(0); //背景を描画  

let n = int(random(col.length));

​

//円の数だけくりかえす

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

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

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

​

if (vecLocation[i].x < 0 || vecLocation[i].x > width) { //もし画面の左端、または右端に到達したら

vecVelocity[i].x = vecVelocity[i].x * -1; //X方向のスピードを反転

 fill(col[n]);  

}

if (vecLocation[i].y < 0 || vecLocation[i].y > height) { //もし画面の下端、または上端に到達したら

vecVelocity[i].y = vecVelocity[i].y * -1; //Y方向のスピードを反転         

}

}

}

​