【p5.js作品】沈む夕日【Flow Field（ベクトル場）】

// 参考にさせていただいた作品URL
// [p5.js勉強会]Flow Fieldをライブコーディング
// https://www.youtube.com/watch?v=UrgvjFTjsdg

let posOrange1 = [];  // orange1の点
let posOrange2 = [];  // orange2の点

function setup() {
    createCanvas(w = 500, w);  // 500x500ピクセルのキャンバスを作成
    background(255);  // 背景を白色に設定
    strokeWeight(1);  // 点の太さを1に設定

    // orange1とorange2の点の位置を初期化
    for (let i = 0; i < 500; i++) {  // 各色の点の数を増やす
        posOrange1[i] = {x: random(w), y: random(w)}; // orange1の点の位置をランダムに設定
        posOrange2[i] = {x: random(w), y: random(w)}; // orange2の点の位置をランダムに設定
    }
}

function draw() {
    stroke(240, 131, 0, 15); // 線の色をorange1に設定
    fill(240, 131, 0, 15); // orange1で塗りつぶす
    for (let i = 0; i < posOrange1.length; i++) {
        ellipse(posOrange1[i].x, posOrange1[i].y, 5, 5); // orange1の円を描く
      
        // ノイズ値に基づいて位置を更新
        let dx = sin(0.5 - noise(posOrange1[i].x / w * 5, posOrange1[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
        let dy = cos(0.5 - noise(posOrange1[i].x / w * 15, posOrange1[i].y / w * 15, 8.5)); // ノイズに基づくyオフセット
      
        posOrange1[i].x += dx; // xオフセットをx座標に加える
        posOrange1[i].y += dy; // yオフセットをy座標に加える
    }
    
    stroke(246, 173, 72, 15); // 線の色をorange2に設定
    fill(246, 173, 72, 15, 15); // orange2で塗りつぶす
    for (let i = 0; i < posOrange2.length; i++) {
        ellipse(posOrange2[i].x, posOrange2[i].y, 5, 5); // orange2の円を描く
      
        // ノイズ値に基づいて位置を更新
        let dx = sin(0.5 - noise(posOrange2[i].x / w * 5, posOrange2[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
        let dy = cos(0.5 - noise(posOrange2[i].x / w * 15, posOrange2[i].y / w * 15, 8.5)); // ノイズに基づくyオフセット
      
        posOrange2[i].x += dx; // xオフセットをx座標に加える
        posOrange2[i].y += dy + dx; // yオフセットをy座標に加える
    }
}

let dx = sin(PI * noise(posOrange1[i].x / w * 5, posOrange1[i].y / w * 15, 0.1)); // ノイズに基づくxオフセット
let dy = cos(PI * noise(posOrange1[i].x / w * 15, posOrange1[i].y / w * 15, 8.5)); // ノイズに基づくyオフセット