しゃぼん

let num = Math.random()*225+75; //円の数

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

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

let vecColor = [];

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));

        vecColor[i] = { r: random(64, 192), g: random(64, 192), b: random(96, 254), a: random(96, 192) };

    }

}

​

function draw() {

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

    noStroke(); //枠線なし

    fill(0, 127, 255); //塗りの色

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

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

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

                fill(vecColor[i].r, vecColor[i].g, vecColor[i].b, vecColor[i].a);

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

            if (vecVelocity[i].x > 20||vecVelocity[i].x < -20) {

                vecVelocity[i].x = vecVelocity[i].x / 10;

            }

            vecVelocity[i].x = vecVelocity[i].x * -1 * random(0.5, 2); //X方向のスピードを反転

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

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

            vecVelocity[i].y = vecVelocity[i].y * -1 * random(0.5, 2); //Y方向のスピードを反転

            if (vecVelocity[i].y > 20||vecVelocity[i].y < -20) {

                vecVelocity[i].y = vecVelocity[i].y / 10;

            }

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

        } else {

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

        }

        fill(vecColor[i].r, vecColor[i].g, vecColor[i].b, vecColor[i].a);

    }

}