const colorPalletes = [ { name: "DeepEmeraldGold", colors: ["#005e55", "#fff9bf", "#edb50c", "#b8003d", "#5e001f"], }, { name: "WarmRainbow", colors: ["#01204E", "#028391", "#F6DCAC", "#FAA968", "#F85525"], }, { name: "ChocolateAndCream", colors: ["#D54751", "#EF9A48", "#FFFCC7", "#4DA394", "#59322B"], }, { name: "PopArt", colors: ["#241965", "#653993", "#9F4094", "#B73D6E", "#F19406"], }, { name: "DeepEmeraldGold", colors: ["#F87523", "#FFC31B", "#E7DCC9", "#1DB7B9", "#126D68"], }, { name: "GreenPink", colors: ["#01B999", "#FAB3B3", "#DC958F", "#A1D8CE", "#F1FAF7"], }, { name: "NatureTranquility", colors: ["#106A6B", "#07374B", "#CAB381", "#E9E0CE"], }, { name: "VibrantHarmony", colors: ["#F15946", "#5681CB", "#FAAA2D", "#296647", "#453945"], }, { name: "Serenity Bliss", colors: ["#FFB4B8", "#EF4B28", "#0A563A", "#FFBC54", "#ECE9E0"], } ]; class GradStyle { /** * 指定されたモードに基づいて描画スタイルを設定します。 * @param {string|p5.Color} c - 使用する色（有効なp5.jsの色または文字列）。 * @param {string} mode - スタイルモード："fill"（塗りつぶし）、"stroke"（線）、または"grad"（グラデーション）。デフォルトは"fill"。 * @throws {Error} 色が指定されていない場合や無効なモードの場合にエラーをスローします。 */ setStyle(c, mode = "fill") { if (!c) { throw new Error('Color must be specified'); // 有効な色が提供されているか確認。 } switch (mode) { case "fill": // 塗りつぶしスタイルを適用：線なし、指定された色で図形を塗りつぶします。 noStroke(); fill(c); break; case "stroke": // 線スタイルを適用：塗りつぶしなし、細い線幅を設定し、指定された色で線を描画します。 noFill(); strokeWeight(0.01); // 細い線幅で正確に描画。 stroke(c); break; case "grad": // グラデーションスタイルを適用：複数のカラーストップを持つ線形グラデーションを作成。 const ctx = drawingContext; // 2Dキャンバス描画コンテキストにアクセス。 const gradient = ctx.createLinearGradient(-0.5, -0.5, 0.5, 0.5); // グラデーションの方向を定義。 // グラデーションにカラーストップを追加（透明度と明るさが異なる）。 gradient.addColorStop(0, color(red(c), green(c), blue(c), 150)); // 半透明の基本色で開始。 gradient.addColorStop(0.3, color(red(c) + 50, green(c) + 50, blue(c) + 50, 255)); // 明るい中間点。 gradient.addColorStop(0.6, color(red(c), green(c), blue(c), 220)); // やや暗いトーン。 gradient.addColorStop(1, color(red(c) - 30, green(c) - 30, blue(c) - 30, 255)); // 暗い終点。 fill(255); // 一時的な塗りつぶし設定（p5.jsで正しくレンダリングするため）。 noStroke(); // グラデーション描画時には線なし。 ctx.fillStyle = gradient; // キャンバスコンテキストの塗りスタイルをグラデーションに設定。 break; default: throw new Error('Invalid style mode'); // 無効なモード入力の場合の処理。 } } /** * 楕円を指定された位置、サイズ、および回転角で描画します。 * @param {number} x - 楕円の中心X座標。 * @param {number} y - 楕円の中心Y座標。 * @param {number} w - 楕円の幅。 * @param {number} h - 楕円の高さ。 * @param {number} angle - 回転角（ラジアン単位）。デフォルトは0。 * @throws {Error} パラメーターが数値でない場合にエラーをスローします。 */ adjustedEllipse(x, y, w, h, angle = 0) { if ([x, y, w, h, angle].some(param => typeof param !== 'number')) { throw new Error('All parameters must be numbers'); // パラメーターの型を検証。 } push(); // 現在の変換状態を保存。 translate(x, y); // 指定された中心位置に移動。 rotate(angle); // 指定された角度（ラジアン単位）で回転。 scale(w, h); // 幅と高さの比率に合わせてスケール調整。 ellipse(0, 0, 1, 1); // 原点に正規化された楕円を描画（`scale()`によって拡大/縮小）。 pop(); // 前の変換状態を復元。 }; /** * 長方形を指定された位置、サイズ、および回転角で描画します。 * @param {number} x - 長方形の中心X座標。 * @param {number} y - 長方形の中心Y座標。 * @param {number} w - 長方形の幅。 * @param {number} h - 長方形の高さ。 * @param {number} angle - 回転角（ラジアン単位）。デフォルトは0。 * @throws {Error} パラメーターが数値でない場合にエラーをスローします。 */ adjustedRect(x, y, w, h, angle = 0) { if ([x, y, w, h, angle].some(param => typeof param !== 'number')) { throw new Error('All parameters must be numbers'); // パラメーターの型を検証。 } push(); // 現在の変換状態を保存。 translate(x, y); // 指定された中心位置に移動。 rotate(angle); // 指定された角度（ラジアン単位）で回転。 scale(w, h); // 幅と高さの比率に合わせてスケール調整。 rectMode(CENTER); // 長方形モードを中心から描画するよう設定。 rect(0, 0, 1, 1); // 原点に正規化された長方形を描画（`scale()`によって拡大/縮小）。 pop(); // 前の変換状態を復元。 }; } /** * Generative Visual Music (GVM) クラス * BPMベースの時間管理とイージングを組み合わせた視覚的な音楽生成を支援 */ class GVM { static DEFAULT_BPM = 100; static DEFAULT_CYCLE_LENGTH = 8; static DEFAULT_EASE_DURATION = 2; static MIN_BPM = 0; static MAX_BPM = 1000; static MAX_TIME_DIFF = 50000; static RECORD_INTERVAL = 5; /** * @param {number} bpm - 1分あたりの拍数（Beats Per Minute） * @throws {Error} BPMが範囲外の場合 */ constructor(bpm = GVM.DEFAULT_BPM) { this.validateBPM(bpm); this.bpm_ = bpm; this.lastCount_ = null; this.lastCountTime_ = null; this.recordTimes_ = []; } /** * BPMの値を検証 * @param {number} bpm - 検証するBPM値 * @throws {Error} 無効なBPM値の場合 */ validateBPM(bpm) { if (!Number.isFinite(bpm) || bpm < GVM.MIN_BPM || bpm > GVM.MAX_BPM) { throw new Error(`BPM must be between ${GVM.MIN_BPM} and ${GVM.MAX_BPM}`); } } /** * BPMの値を更新 * @param {number} bpm - 更新するBPM値 */ setBPM(bpm) { this.validateBPM(bpm); this.bpm_ = bpm; } /** * 現在のBPM値を取得する * @returns {number} 現在のBPM値 */ getBPM() { return this.bpm_; } /** * 現在の拍カウントを取得（キャッシュ機能付き） * @returns {number} 現在の拍カウント */ count() { const currentTime = millis(); if (this.lastCount_ !== null && this.lastCountTime_ === currentTime) { return this.lastCount_; } const beatIntervalMs = (60 / this.bpm_) * 1000; this.lastCount_ = currentTime / beatIntervalMs; this.lastCountTime_ = currentTime; return this.lastCount_; } /** * イージング適用済みのフェーズを取得 * @param {number} cycleLength - サイクルの長さ * @param {number} easeDuration - イージングの持続時間 * @param {Function} easeFunction - イージング関数 * @returns {number} イージング適用済みのフェーズ値 */ getPhase( cycleLength = GVM.DEFAULT_CYCLE_LENGTH, easeDuration = GVM.DEFAULT_EASE_DURATION, easeFunction = Easing.easeInOutSine ) { if (cycleLength <= 0) throw new Error('Cycle length must be positive'); if (easeDuration <= 0 || easeDuration > cycleLength) { throw new Error('Ease duration must be positive and not greater than cycle length'); } const easeStartOffset = cycleLength - easeDuration; const basePhase = Math.floor(this.count() / cycleLength); const cyclePosition = this.count() % cycleLength; const easeProgress = (Math.max(easeStartOffset, cyclePosition) - easeStartOffset) / easeDuration; const easeValue = easeFunction(fract(easeProgress)); return basePhase + easeValue; } /** * ノイズ値をイージングで補間 * @param {number} cycleLength - サイクルの長さ * @param {number} easeDuration - イージングの持続時間 * @param {Array} seed - ノイズのシード値 [x, y] * @param {Function} easeFunction - イージング関数 * @returns {number} 補間されたノイズ値 */ leapNoise( cycleLength = GVM.DEFAULT_CYCLE_LENGTH, easeDuration = GVM.DEFAULT_EASE_DURATION, seed = [0, 0], easeFunction = Easing.easeInOutSine ) { if (!Array.isArray(seed) || seed.length !== 2) { throw new Error('Seed must be an array of two numbers'); } const currentPhase = Math.floor(this.count() / cycleLength); const nextPhase = currentPhase + 1; const currentNoise = noise(currentPhase, seed[0], seed[1]); const nextNoise = noise(nextPhase, seed[0], seed[1]); const easeProgress = fract(this.getPhase(cycleLength, easeDuration, easeFunction)); return lerp(currentNoise, nextNoise, easeProgress); } /** * タップテンポのための関数 */ tapTempo() { const currentTimeMs = millis(); this.recordTimes_.push(currentTimeMs); // class GVM の static プロパティとして使うので GVM.MAX_TIME_DIFF とする this.recordTimes_ = this.recordTimes_.filter(time => currentTimeMs - time <= GVM.MAX_TIME_DIFF); // こちらも GVM.RECORD_INTERVAL と修正 if (this.recordTimes_.length >= GVM.RECORD_INTERVAL) { let totalDiffMs = 0; for (let i = 1; i < GVM.RECORD_INTERVAL; i++) { totalDiffMs += this.recordTimes_[this.recordTimes_.length - i] - this.recordTimes_[this.recordTimes_.length - i - 1]; } const averageDiffMs = totalDiffMs / (GVM.RECORD_INTERVAL - 1); const bpm = 60000 / averageDiffMs; this.setBPM(bpm); } } } /** * イージング関数を提供するユーティリティクラス * 各関数は0から1の範囲で動作 */ class Easing { static c1_ = 1.70158; static c2_ = Easing.c1_ * 1.525; static c3_ = Easing.c1_ + 1; /** * @param {number} x - 進行度 (0-1) * @returns {number} イージング適用後の値 */ static easeInSine(x) { return 1 - Math.cos((x * Math.PI) / 2); } static easeOutSine(x) { return Math.sin((x * Math.PI) / 2); } static easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; } static easeInQuad(x) { return x * x; } static easeOutQuad(x) { return 1 - (1 - x) * (1 - x); } static easeInOutQuad(x) { return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; } static easeInCubic(x) { return x * x * x; } static easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); } static easeInOutCubic(x) { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } static easeInQuart(x) { return x * x * x * x; } static easeOutQuart(x) { return 1 - Math.pow(1 - x, 4); } static easeInOutQuart(x) { return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2; } static easeInQuint(x) { return x * x * x * x * x; } static easeOutQuint(x) { return 1 - Math.pow(1 - x, 5); } static easeInOutQuint(x) { return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2; } static easeInExpo(x) { return x === 0 ? 0 : Math.pow(2, 10 * x - 10); } static easeOutExpo(x) { return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); } static easeInOutExpo(x) { return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2; } static easeInCirc(x) { return 1 - Math.sqrt(1 - Math.pow(x, 2)); } static easeOutCirc(x) { return Math.sqrt(1 - Math.pow(x - 1, 2)); } static easeInOutCirc(x) { return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2; } static easeOutBack(x) { return 1 + Easing.c3_ * Math.pow(x - 1, 3) + Easing.c1_ * Math.pow(x - 1, 2); } static easeInOutBack(x) { return x < 0.5 ? (Math.pow(2 * x, 2) * ((Easing.c2_ + 1) * 2 * x - Easing.c2_)) / 2 : (Math.pow(2 * x - 2, 2) * ((Easing.c2_ + 1) * (x * 2 - 2) + Easing.c2_) + 2) / 2; } } // ========================================== const BPM = 100; const gvm = new GVM(BPM); const grad = new GradStyle(); let cp; function setup() { createCanvas(windowWidth, windowHeight); cp = random(colorPalletes).colors; } function draw() { background(0, 240); blendMode(ADD); const n = 10; const grid = width / n; for(let x = grid * 0.5; x < width; x += grid){ for(let y = grid * 0.5; y < height; y += grid){ push(); const angle = gvm.getPhase(8, 2) * TAU / 4; const c = cp[floor(map(sin((x+y+frameCount * 0.01)), -1, 1, 0, 10) % cp.length)]; const scl = map(abs(fract(gvm.getPhase(8, 2)) * 2 - 1), 1, 0, 1, 5); const s = grid * scl; grad.setStyle(c, "grad"); grad.adjustedRect(x, y, s, s, angle); pop(); } } blendMode(BLEND); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function keyPressed() { // Space key if (keyCode === 32) { let fs = fullscreen(); fullscreen(!fs); } }