【p5.js】作品「青の時間」【Flow Field】

// 参考にさせていただいた作品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座標に加える
    }
}