004/2025/1/7

// 参考にさせていただいた作品URL

// [p5.js勉強会]Flow Fieldをライブコーディング

// https://www.youtube.com/watch?v=UrgvjFTjsdg

​

let posBlue = [];  // 青色の点

let posCyan = [];  // 水色の点

​

function setup() {

    createCanvas(w = 500, w);  // 500x500ピクセルのキャンバスを作成

    background(255);  // 背景を白色に設定

    strokeWeight(1);  // 点の太さを1に設定

​

    // 青色と水色の点の位置を初期化

    for (let i = 0; i < 1700; i++) {  // 各色の点の数を増やす

        posBlue[i] = {x: random(w), y: random(w)}; // 青色の点の位置をランダムに設定

        posCyan[i] = {x: random(w), y: random(w)}; // 水色の点の位置をランダムに設定

    }

}

​

function draw() {

    stroke(43, 123, 202, 15); // 線の色を青色に設定

    fill(43, 123, 202, 15); // 青色で塗りつぶす

    for (let i = 0; i < posBlue.length; i++) {

        ellipse(posBlue[i].x, posBlue[i].y, 5, 5); // 青色の円を描く

        // ノイズ値に基づいて位置を更新

        let dx = 0.5 - noise(posBlue[i].x / w * 5, posBlue[i].y / w * 15, 0.1); // ノイズに基づくxオフセット

        let dy = 0.5 - noise(posBlue[i].x / w * 15, posBlue[i].y / w * 15, 8.5); // ノイズに基づくyオフセット

        posBlue[i].x += dx; // xオフセットをx座標に加える

        posBlue[i].y += dy; // yオフセットをy座標に加える

    }

    stroke(0, 191, 255, 15); // 線の色を水色に設定

    fill(0, 191, 255, 15); // 水色で塗りつぶす

    for (let i = 0; i < posCyan.length; i++) {

        ellipse(posCyan[i].x, posCyan[i].y, 5, 5); // 水色の円を描く

        // ノイズ値に基づいて位置を更新

        let dx = 0.5 - noise(posCyan[i].x / w * 5, posCyan[i].y / w * 15, 0.1); // ノイズに基づくxオフセット

        let dy = 0.5 - noise(posCyan[i].x / w * 15, posCyan[i].y / w * 15, 8.5); // ノイズに基づくyオフセット

        posCyan[i].x += dx; // xオフセットをx座標に加える

        posCyan[i].y += dy + dx; // yオフセットをy座標に加える

    }

}

​