【作品と詩】流るる星のごとく

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

let posYellow1 = [];  // 黄色の点1の位置
let posYellow2 = [];  // 黄色の点2の位置

function setup() {
    createCanvas(w = 500, w);  // 500x500ピクセルのキャンバスを作成
    background(252, 200, 0);  // 背景を黄色に設定

    // 黄色の点の位置を初期化
    for (let i = 0; i < 70; i++) {  // 各色の点の数を増やす
      // 黄色の点1の位置をランダムに設定
        posYellow1[i] = {x: random(w), y: random(w)};  
       // 黄色の点2の位置をランダムに設定
        posYellow2[i] = {x: random(w), y: random(w)}; 
    }
}

function draw() {
    background(252, 200, 0);  // 背景を黄色で塗りつぶす

    stroke(248, 181, 0);  // 線の色を濃い黄色に設定
    fill(248, 181, 0);  // 濃い黄色で塗りつぶす
    // 参照型の配列を使用
    for (let i = 0; i < posYellow1.length; i++) {
        drawStar(posYellow1[i].x, posYellow1[i].y, 10, 30, 5);  // 黄色の星を描く（半径を大きく）
      
        // ノイズ値に基づいて位置を更新
        let dx = noise(posYellow1[i].x / w * 15, posYellow1[i].y / w * 15, 0.1);  // ノイズに基づくxオフセット
        let dy = noise(posYellow1[i].x / w * 15, posYellow1[i].y / w * 15, 8.5);  // ノイズに基づくyオフセット
      
        posYellow1[i].x += dx;  // xオフセットをx座標に加える
        posYellow1[i].y += dy;  // yオフセットをy座標に加える
    }
    
    stroke(252, 220, 0);  // 線の色を薄い黄色に設定
    fill(252, 220, 0);  // 薄い黄色で塗りつぶす
    for (let i = 0; i < posYellow2.length; i++) {
        drawStar(posYellow2[i].x, posYellow2[i].y, 10, 30, 5);  // 薄い黄色の星を描く（半径を大きく）
      
        // ノイズ値に基づいて位置を更新
        let dx = noise(posYellow2[i].x / w * 15, posYellow2[i].y / w * 15, 0.1);  // ノイズに基づくxオフセット
        let dy = noise(posYellow2[i].x / w * 15, posYellow2[i].y / w * 15, 8.5);  // ノイズに基づくyオフセット
      
        posYellow2[i].x += dx;  // xオフセットをx座標に加える
        posYellow2[i].y += dy;  // yオフセットをy座標に加える
    }
}

// 星を描く関数
function drawStar(x, y, radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

// 星を描く関数
function drawStar(x, y, radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}