寂しい雨

var skyBox;

let num = 50; //円の数

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

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

​

function setup() {

  createCanvas(1112, 834);  

  skyBox = createImage(1112, 834);

  mouseX = width / 2

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

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

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

}

}

​

function draw(){

  skyBox.loadPixels();

  for(i = 0; i<skyBox.width; i++){

    for(var j = 0; j<skyBox.height; j++){

      skyBox.set(i, j, [(sin(j/834)+1)*mouseX/11, (sin(j/834)+1)*mouseX/8, (sin(j/834)+1)*mouseX/5, 255]);

    }

  }

  skyBox.updatePixels();

​

  image(skyBox, 0, 0, 1112, 834);

  noStroke(); //枠線なし

fill(random(255),random(255),40); //塗りの色

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

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

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

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

​

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

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

}

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

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

}

}

}