Sketch 2026-03-17 00:49

function setup() {
  createCanvas(windowWidth, windowHeight);
  // ヒント: windowWidth/windowHeightを使うと、キャンバスがレスポンシブになります
  
  initializeDots(); // ドットを初期化する関数を呼び出します
}

function draw() {
  background(0, 50, 150); // 濃い青色の背景 (ネイビーに近い色)

  noStroke(); // ドットの枠線なし
  fill(255);  // ドットの色を白に設定

  // 各ドットを更新して描画します
  for (let i = 0; i < dots.length; i++) {
    let dot = dots[i];

    // ドットを垂直方向に動かします (縦の流れ)
    dot.y += flowSpeed;

    // ドットが画面の下端を越えたら、上端にリセットします
    // x座標にも少しランダムなオフセットを加えて、より自然な流れに見せます
    if (dot.y > height + spacing) {
      dot.y = -spacing + random(-randomOffsetRange, randomOffsetRange);
      dot.x = (dot.x + random(-randomOffsetRange, randomOffsetRange)) % (width + spacing);
      // JavaScriptの%演算子は負の数を返すことがあるため、x座標が負になった場合は調整します
      if (dot.x < -spacing) dot.x += width + spacing;
    }

    // ドットを描画します
    ellipse(dot.x, dot.y, dot.size);
  }
}

function initializeDots() {
  dots = []; // 既存のドットをクリアします

  // グリッド状にドットを配置し、それぞれにランダムなオフセットを加えます
  for (let y = 0; y < height + spacing; y += spacing) {
    for (let x = 0; x < width + spacing; x += spacing) {
      // ランダムな条件を満たす場合にのみドットを追加して、まばらな配置にします
      if (random() < 0.8) { // 80%の確率でドットが出現
        dots.push({
          x: x + random(-randomOffsetRange, randomOffsetRange),
          y: y + random(-randomOffsetRange, randomOffsetRange),
          size: dotSize // ドットのサイズは均一になります
        });
      }
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // キャンバスのサイズが変更されたら、ドットの配置も再計算します
  initializeDots();
}