@labcat2020/p5.audioreactive 0.1.2

package/README.md

@@ -0,0 +1,68 @@
+# @labcat2020/p5.audioreactive
+
+p5.js audio-reactive toolkit — MIDI/FFT helpers, sound boot, and shared sketch utilities for Animation Lab series.
+
+> Renamed from `@labcat2020/audio-react` → `@labcat2020/p5.audioreactive` (Sep 2026). Published to npm.
+
+## Install
+```bash
+pnpm add @labcat2020/p5.audioreactive p5
+# optional peers already handled by host:
+# p5@^2.2.3
+```
+
+## Exports
+```json
+{
+  ".": "./src/p5.audioReact.js",
+  "./p5.audioReact.js": "./src/p5.audioReact.js",
+  "./p5.colorGenerator.js": "./src/p5.colorGenerator.js",
+  "./p5.Polar.min.js": "./src/p5.Polar.min.js",
+  "./p5.polygon.js": "./src/p5.polygon.js",
+  "./p5.pattern.js": "./src/p5.pattern.js",
+  "./p5.randomColor.js": "./src/p5.randomColor.js",
+  "./sacredGeometry.js": "./src/sacredGeometry.js"
+}
+```
+- `p5.audioReact.js` — `getSongPlaybackTime()`, `scheduleCueSet()`, `loadSong()`/`loadMidi` via `@tonejs/midi` + `p5.sound` boot (`p5.soundBoot.js`, `p5.setGlobalP5.js`).
+- `p5.colorGenerator.js` / `p5.randomColor.js` — palette helpers (randomColor port).
+- `p5.Polar.min.js` (Liz Peng) — `polarTriangle`, `polarEllipse`, etc.
+- `p5.polygon.js` — **deprecated re-export** → canonical is `@labcat2020/p5.polygon`.
+- `p5.pattern.js` (Taichi Sayama) — pattern fills.
+- `sacredGeometry.js` — now canonical is `@labcat2020/p5.sacredgeometry`; kept here for compat.
+
+## Usage
+```js
+import p5 from 'p5';
+import '@labcat2020/p5.audioreactive/p5.audioReact.js';
+import ColorGenerator from '@labcat2020/p5.audioreactive/p5.colorGenerator.js';
+
+// in sketch setup:
+await p.loadSong(audioUrl, midiUrl, (data) => {
+  p.midiPpq = data.header.ppq;
+  p.scheduleCueSet(data.tracks[0].notes, 'onCue');
+});
+p.fft = new p5.FFT();
+```
+
+Geometry (prefer new libs for new code):
+```js
+import '@labcat2020/p5.audioreactive/p5.Polar.min.js';
+import '@labcat2020/p5.polygon'; // or @labcat2020/p5.audioreactive/p5.polygon.js (compat)
+import { PTN } from '@labcat2020/p5.audioreactive/p5.pattern.js';
+```
+
+## Migration
+
+- `audio-react` → `p5.audioreactive` — update imports `@labcat2020/audio-react` → `@labcat2020/p5.audioreactive`.
+- For polygons only (no audio), use `@labcat2020/p5.polygon` (70 lines, no Tone/MIDI).
+- For sacred geometry, use `@labcat2020/p5.sacredgeometry`.
+
+## Peers & deps
+
+- `peerDependencies: p5@^2.2.3`
+- `dependencies: @tonejs/midi@^2.0.28, p5.sound@^0.2.0`
+
+## License
+
+MIT — LABCAT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@labcat2020/p5.audioreactive",
+  "version": "0.1.2",
+  "type": "module",
+  "description": "p5.js audio-reactive helpers, sound boot, and shared sketch utilities",
+  "exports": {
+    ".": "./src/p5.audioReact.js",
+    "./p5.audioReact.js": "./src/p5.audioReact.js",
+    "./p5.colorGenerator.js": "./src/p5.colorGenerator.js",
+    "./p5.Polar.min.js": "./src/p5.Polar.min.js",
+    "./p5.polygon.js": "./src/p5.polygon.js",
+    "./p5.pattern.js": "./src/p5.pattern.js",
+    "./p5.randomColor.js": "./src/p5.randomColor.js",
+    "./sacredGeometry.js": "./src/sacredGeometry.js"
+  },
+  "files": [
+    "src",
+    "patches"
+  ],
+  "sideEffects": [
+    "./src/p5.audioReact.js",
+    "./src/p5.soundBoot.js",
+    "./src/p5.setGlobalP5.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tonejs/midi": "^2.0.28",
+    "p5.sound": "^0.2.0"
+  },
+  "peerDependencies": {
+    "p5": "^2.2.3"
+  },
+  "license": "MIT",
+  "author": "LABCAT (labcat.nz)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LABCAT/animations.labcat.nz.git",
+    "directory": "packages/p5.audioreactive"
+  },
+  "keywords": [
+    "p5",
+    "audio",
+    "midi",
+    "generative",
+    "labcat"
+  ]
+}

package/patches/p5.sound@0.2.0.patch

@@ -0,0 +1,11 @@
+diff --git a/package.json b/package.json
+index 0000000..0000000 100644
+--- a/package.json
++++ b/package.json
+@@ -39,5 +39,5 @@
+     "webpack": "^5.91.0",
+     "webpack-cli": "^5.1.4"
+   },
+-  "sideEffects": false
++  "sideEffects": ["dist/p5.sound.js", "dist/p5.sound.min.js"]
+ }

package/src/p5.Polar.min.js

@@ -0,0 +1,3 @@
+// p5.Polar.min.js, version 2.3 Sep 5th 2023, created by Liz Peng
+import p5 from 'p5';
+p5.prototype.setCenter=function(t,s){void 0===this.center&&(this.center={x:t,y:s}),this.translate(this.center.x=t,this.center.y=s)},p5.prototype.shiftRotate=function(t,s){const i=this.radians(t);this.translate(this.sin(i)*s,this.cos(i)*-s),this.rotate(this.radians(t))},p5.prototype.polarDrawCallback=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)this.push(),this.shiftRotate(p*h,i),o(p,h,s,i),this.pop()},p5.prototype.polarTriangle=function(t,s,i){this.push(),this.shiftRotate(t,i),this.triangle(this.sin(0),this.cos(0)*-s,this.sin(1*this.TWO_PI/3)*s,this.cos(1*this.TWO_PI/3)*-s,this.sin(2*this.TWO_PI/3)*s,this.cos(2*this.TWO_PI/3)*-s),this.pop()},p5.prototype.polarTriangles=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarTriangle(t[0]*t[1],t[2],t[3])}else this.polarTriangle(p*h,s,i)},p5.prototype.polarEllipse=function(t,s,i,o){this.push(),this.shiftRotate(t,o),this.ellipse(0,0,2*s,2*i),this.pop()},p5.prototype.polarEllipses=function(t,s,i,o,h){const p=360/t;for(let e=1;e<=t;e++)if(h){const t=h(e,p,s,i,o);this.polarEllipse(t[0]*t[1],t[2],t[3],t[4])}else this.polarEllipse(e*p,s,i,o)},p5.prototype.polarLine=function(t,s,i){this.push(),this.shiftRotate(t,i),this.line(0,s,0,-s),this.pop()},p5.prototype.polarLines=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarLine(t[0]*t[1],t[2],t[3])}else this.polarLine(p*h,s,i)},p5.prototype.polarSquare=function(t,s,i){this.push(),this.shiftRotate(t,i),this.square(-s,-s,2*s),this.pop()},p5.prototype.polarSquares=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarSquare(t[0]*t[1],t[2],t[3])}else this.polarSquare(p*h,s,i)},p5.prototype.polarPentagon=function(t,s,i){this.push();const o=this.radians(t);this.translate(this.sin(o)*i,this.cos(o)*-i),this.rotate(this.radians(t)+60),this.beginShape();for(let t=1;t<=5;t++)this.vertex(this.cos(this.TWO_PI*t/5)*s,this.sin(this.TWO_PI*t/5)*s);this.endShape(this.CLOSE),this.pop()},p5.prototype.polarPentagons=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarPentagon(t[0]*t[1],t[2],t[3])}else this.polarPentagon(p*h,s,i)},p5.prototype.polarHexagon=function(t,s,i){this.push(),this.shiftRotate(t,i),this.beginShape();for(let t=0;t<6;t++)this.vertex(this.cos(this.TWO_PI*t/6)*s,this.sin(this.TWO_PI*t/6)*s);this.endShape(this.CLOSE),this.pop()},p5.prototype.polarHexagons=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarHexagon(t[0]*t[1],t[2],t[3])}else this.polarHexagon(p*h,s,i)},p5.prototype.polarHeptagon=function(t,s,i){this.push();const o=this.radians(t);this.translate(this.sin(o)*i,this.cos(o)*-i),this.rotate(this.radians(t)+11),this.beginShape();for(let t=1;t<=7;t++)this.vertex(this.cos(this.TWO_PI*t/7)*s,this.sin(this.TWO_PI*t/7)*s);this.endShape(this.CLOSE),this.pop()},p5.prototype.polarHeptagons=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarHeptagon(t[0]*t[1],t[2],t[3])}else this.polarHeptagon(p*h,s,i)},p5.prototype.polarOctagon=function(t,s,i){this.push(),this.shiftRotate(t,i),this.beginShape();for(let t=1;t<=8;t++)this.vertex(this.cos(this.TWO_PI*t/8)*s,this.sin(this.TWO_PI*t/8)*s);this.endShape(this.CLOSE),this.pop()},p5.prototype.polarOctagons=function(t,s,i,o){const h=360/t;for(let p=1;p<=t;p++)if(o){const t=o(p,h,s,i);this.polarOctagon(t[0]*t[1],t[2],t[3])}else this.polarOctagon(p*h,s,i)},p5.prototype.polarPolygon=function(t,s,i,o){this.push(),this.shiftRotate(s,o),this.beginShape();for(let s=1;s<=t;s++)this.vertex(this.cos(this.TWO_PI*s/t)*i,this.sin(this.TWO_PI*s/t)*i);this.endShape(this.CLOSE),this.pop()},p5.prototype.polarPolygons=function(t,s,i,o,h){const p=360/t;for(let e=1;e<=t;e++)if(h){const t=h(e,p,s,i,o);this.polarPolygon(t[2],t[0]*t[1],t[3],t[4])}else this.polarPolygon(s,e*p,i,o)};

package/src/p5.audioReact.js

@@ -0,0 +1,221 @@
+import './p5.soundBoot.js';
+import p5 from 'p5';
+import { Midi } from '@tonejs/midi';
+
+p5.prototype.getSongPlaybackTime = function () {
+  if (!this.song) return NaN;
+  if (
+    this.captureInProgress &&
+    typeof this.audioSampleRate === 'number' &&
+    this.audioSampleRate > 0 &&
+    typeof this.song._lastPos === 'number'
+  ) {
+    const t = this.song._lastPos / this.audioSampleRate;
+    if (Number.isFinite(t)) return t;
+  }
+  if (this.song.isPlaying()) {
+    if (this._playbackWallStartPerf == null) return 0;
+    const rate = this.song.speed ?? 1;
+    return (
+      this._playbackSongSecondsAtWallStart +
+      ((performance.now() - this._playbackWallStartPerf) / 1000) * rate
+    );
+  }
+  return Number.isFinite(this._playbackFrozenSec) ? this._playbackFrozenSec : 0;
+};
+
+p5.prototype._stopMidiCuePoll = function () {
+  if (this._midiCuePollId != null) {
+    clearInterval(this._midiCuePollId);
+    this._midiCuePollId = null;
+  }
+};
+
+p5.prototype._reindexMidiCues = function (fromSeconds) {
+  const sorted = [...(this._midiTransportCues || [])].sort((a, b) => a.time - b.time);
+  const t0 = Math.max(0, fromSeconds);
+  let i = 0;
+  while (i < sorted.length && sorted[i].time < t0 - 1e-4) {
+    i++;
+  }
+  this._midiCueSorted = sorted;
+  this._midiCueNext = i;
+};
+
+p5.prototype._midiCuePollTick = function () {
+  if (!this.song?.isPlaying()) return;
+  const t = this.getSongPlaybackTime();
+  if (!Number.isFinite(t)) return;
+  const cues = this._midiCueSorted;
+  if (!cues?.length) return;
+  const slack = 0.03;
+  while (this._midiCueNext < cues.length && cues[this._midiCueNext].time <= t + slack) {
+    const { fn, note } = cues[this._midiCueNext];
+    this._midiCueNext++;
+    fn.call(this, note);
+  }
+};
+
+p5.prototype._startSongPlayback = function (fromSec = 0) {
+  this._playbackWallStartPerf = performance.now();
+  this._playbackSongSecondsAtWallStart = fromSec;
+  this._reindexMidiCues(fromSec);
+  this._stopMidiCuePoll();
+  this.userStartAudio();
+  this.song.play();
+  this._midiCuePollId = setInterval(() => this._midiCuePollTick(), 20);
+  this._midiCuePollTick();
+  this.showingStatic = false;
+  this.songHasFinished = false;
+  if (this.canvas) {
+    this.canvas.classList.add('p5Canvas--cursor-pause');
+    this.canvas.classList.remove('p5Canvas--cursor-play');
+  }
+};
+
+p5.prototype._restartSongPlayback = function () {
+  this.resetAnimation?.();
+  this.song.stop();
+  this.song.paused = false;
+  this.song.playing = false;
+  this._playbackFrozenSec = 0;
+  this._startSongPlayback(0);
+};
+
+p5.prototype.loadSong = async function (audioUrl, midiUrl, callback) {
+  try {
+    const sound = await this.loadSound(audioUrl);
+    this.song = sound;
+    this.songHasFinished = false;
+    this.loopAudio = this.loopAudio ?? false;
+    this._midiTransportCues = [];
+    this._midiCueSorted = [];
+    this._midiCueNext = 0;
+    this._stopMidiCuePoll();
+    this.song._cues = [];
+
+    this.audioSampleRate = sound.sampleRate?.() ?? 44100;
+    this.totalAnimationFrames = Math.floor((sound.duration() || 0) * 60);
+
+    sound.onended(() => {
+      if (this.loopAudio) {
+        if (this.captureEnabled && this.captureInProgress) {
+          this.captureInProgress = false;
+          this.downloadFrames?.();
+          return;
+        }
+        this._restartSongPlayback();
+        return;
+      }
+
+      this.songHasFinished = true;
+      this.song.playing = false;
+      this.song.paused = false;
+      this._stopMidiCuePoll();
+      this._playbackWallStartPerf = null;
+      const dur = this.song.duration?.() ?? 0;
+      this._playbackFrozenSec = Number.isFinite(dur) ? dur : 0;
+      if (this.canvas) {
+        this.canvas.classList.add('p5Canvas--cursor-play');
+        this.canvas.classList.remove('p5Canvas--cursor-pause');
+      }
+      if (this.captureEnabled && this.captureInProgress) {
+        this.captureInProgress = false;
+        this.downloadFrames?.();
+      }
+    });
+
+    const midiData = await this.loadMidi(midiUrl);
+    callback?.(midiData);
+    this.hideLoader();
+    return midiData;
+  } catch (error) {
+    console.error('Failed to load song or MIDI:', error);
+    this.hideLoader();
+    return null;
+  }
+};
+
+p5.prototype.scheduleCueSet = function (noteSet, callbackName, polyMode = false) {
+  const fn = this[callbackName];
+  if (typeof fn !== 'function') {
+    console.error(`scheduleCueSet: missing handler "${callbackName}"`);
+    return;
+  }
+  if (!this.song?._cues) {
+    this.song._cues = [];
+  }
+  if (!this._midiTransportCues) {
+    this._midiTransportCues = [];
+  }
+  let lastTicks = -1;
+  let currentCue = 1;
+  for (let i = 0; i < noteSet.length; i++) {
+    const note = noteSet[i];
+    const { ticks, time } = note;
+    if (ticks !== lastTicks || polyMode) {
+      note.currentCue = currentCue;
+      const cueTime = time <= 0 ? 1e-6 : time;
+      this.song._cues.push({ time: cueTime, callback: fn, val: note, scope: this });
+      this._midiTransportCues.push({ time: cueTime, fn, note });
+      lastTicks = ticks;
+      currentCue++;
+    }
+  }
+};
+
+p5.prototype.loadMidi = async function (midiUrl) {
+  const result = await Midi.fromUrl(midiUrl);
+  console.log('MIDI loaded:', result);
+  return result;
+};
+
+p5.prototype.hideLoader = function () {
+  const loader = document.getElementById('loader');
+  const playIcon = document.getElementById('play-icon');
+  if (loader) loader.classList.add('loading--complete');
+  if (playIcon) playIcon.classList.add('fade-in');
+  this.audioLoaded = true;
+};
+
+p5.prototype.togglePlayback = function () {
+  if (this.audioLoaded && this.song) {
+    if (this.captureEnabled) {
+      this.startCapture();
+      return;
+    }
+    if (this.song.isPlaying()) {
+      if (this._playbackWallStartPerf != null) {
+        const rate = this.song.speed ?? 1;
+        this._playbackFrozenSec =
+          this._playbackSongSecondsAtWallStart +
+          ((performance.now() - this._playbackWallStartPerf) / 1000) * rate;
+      }
+      this._playbackWallStartPerf = null;
+      this._stopMidiCuePoll();
+      this.song.pause();
+      this.canvas.classList.add('p5Canvas--cursor-play');
+      this.canvas.classList.remove('p5Canvas--cursor-pause');
+    } else {
+      let fromSec = Math.max(0, this.getSongPlaybackTime() || 0);
+      const atEnd = this.songHasFinished;
+      if (atEnd) {
+        this._restartSongPlayback();
+        return;
+      }
+
+      const playIcon = document.getElementById('play-icon');
+      if (playIcon) playIcon.classList.remove('fade-in');
+
+      this._startSongPlayback(fromSec);
+    }
+  }
+};
+
+p5.prototype.saveSketchImage = function () {
+  if (this.keyIsDown(this.CONTROL) && this.key === 's') {
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    this.save(`sketch_${timestamp}.png`);
+    return false;
+  }
+};

package/src/p5.colorGenerator.js

@@ -0,0 +1,205 @@
+export default class ColorGenerator {
+    /**
+     * Constructor for ColorGenerator.
+     * Initializes the generator with a base color. If no color is provided, it generates a random one.
+     * @param {string} colorString - The base color in any valid p5.js color format (e.g., hex or RGB).
+     * @param {number} [opacity=1] - The opacity of the color, defaults to 1.
+     */
+     constructor(p5, colorString, opacity = 1) {
+        this.p5 = p5;
+        this.opacity = opacity;
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+
+        if (colorString === undefined) {
+            let h = this.p5.random(0, 360);
+            let s = this.p5.random(0, 100);
+            let b = this.p5.random(0, 100);
+            colorString = this.p5.color(h, s, b, this.opacity);
+        } else if (colorString === 'bright') {
+            colorString = this.getBrightColor();
+        } else {
+            let c = this.p5.color(colorString);
+            colorString = this.p5.color(this.p5.hue(c), this.p5.saturation(c), this.p5.brightness(c), this.opacity);
+        }
+
+        // Store the color and its HSB components
+        this.color = this.p5.color(colorString);
+        this.h = this.p5.hue(this.color);
+        this.s = this.p5.saturation(this.color);
+        this.b = this.p5.brightness(this.color);
+        this.p5.pop();
+    }
+
+    /**
+     * Generates a bright color with high saturation and brightness values.
+     * @return {Object} A bright p5.Color object.
+     */
+    getBrightColor() {
+        return this.p5.color(
+            this.p5.random(0, 360),    // Full hue range for variety
+            this.p5.random(80, 100),   // High saturation (80-100)
+            this.p5.random(80, 100),   // High brightness (80-100)
+            this.opacity
+        );
+    }
+
+    /**
+     * Generates shades of the base color by decreasing brightness.
+     * @param {number} nr - The number of shades to generate.
+     * @param {number} limit - The minimum brightness value to limit the shades (default: 0).
+     * @return {array} An array of colors in HSB format.
+     */
+    getShades(nr, limit = 0) {
+        this.p5.push(); // Use this.p5 directly
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1); // Use this.p5 directly
+        let result = [];
+
+        limit = this.p5.constrain(limit, 0, this.b); // Use this.p5 directly
+
+        let equalDifference = (this.b - limit) / nr;
+        for (let i = 0; i < nr; i++) {
+            result.push(this.p5.color(this.h, this.s, this.b - (i * equalDifference), this.opacity)); 
+        }
+        this.p5.pop(); // Use this.p5 directly
+        return result;
+    }
+
+    /**
+     * Generates tints of the base color by increasing brightness.
+     * @param {number} nr - The number of tints to generate.
+     * @param {number} limit - The maximum brightness value to limit the tints (default: 100).
+     * @return {array} An array of colors in HSB format.
+     */
+    getTints(nr, limit = 100) {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let result = [];
+
+        limit = this.p5.constrain(limit, this.b, 100);
+
+        let equalDifferenceBrightness = (limit - this.b) / nr;
+        let equalDifferenceSaturation = this.s / nr;
+
+        for (let i = 0; i < nr; i++) {
+            result.push(this.p5.color(this.h, this.s - (i * equalDifferenceSaturation), this.b + (i * equalDifferenceBrightness), this.opacity)); 
+        }
+        this.p5.pop();
+        return result;
+    }
+
+    /**
+     * Generates a monochromatic palette by adjusting saturation and brightness.
+     * @param {number} nr - The number of monochromatic colors to generate.
+     * @param {boolean} increaseSaturation - Whether to increase saturation for each color (default: false).
+     * @param {boolean} increaseBrightness - Whether to increase brightness for each color (default: false).
+     * @return {array} An array of colors in HSB format.
+     */
+    getMonochromatic(nr, increaseSaturation = false, increaseBrightness = false) {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let result = [];
+
+        // Calculate saturation and brightness steps
+        let satDifference = this.s / nr;
+        let brightDifference = (100 - this.b) / nr;
+
+        for (let i = 0; i < nr; i++) {
+            let currentSaturation, currentBrightness;
+
+            // Adjust saturation based on the direction
+            currentSaturation = increaseSaturation
+                ? this.p5.constrain(this.s + (i * satDifference), 0, 100)
+                : this.p5.constrain(this.s - (i * satDifference), 0, 100);
+
+            // Adjust brightness based on the direction
+            currentBrightness = increaseBrightness
+                ? this.p5.constrain(this.b + (i * brightDifference), 0, 100)
+                : this.p5.constrain(this.b - (i * brightDifference), 0, 100);
+
+            result.push(this.p5.color(this.h, currentSaturation, currentBrightness, this.opacity)); 
+        }
+
+        this.p5.pop();
+        return result;
+    }
+
+    /**
+     * Generates the complementary color of the base color (180 degrees on the color wheel).
+     * @return {array} An array with the base color and its complementary color.
+     */
+    getComplementary() {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let complementaryColor = this.p5.color((this.h + 180) % 360, this.s, this.b, this.opacity); 
+        this.p5.pop();
+        return [this.color, complementaryColor];
+    }
+
+    /**
+     * Generates a triadic color scheme (three colors evenly spaced on the color wheel, 120 degrees apart).
+     * @return {array} An array of three colors in HSB format.
+     */
+    getTriadic() {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let triadicColors = [
+            this.color,
+            this.p5.color((this.h + 120) % 360, this.s, this.b, this.opacity), 
+            this.p5.color((this.h + 240) % 360, this.s, this.b, this.opacity)  
+        ];
+        this.p5.pop();
+        return triadicColors;
+    }
+
+    /**
+     * Generates a split complementary color scheme (two colors adjacent to the complementary color).
+     * @param {number} degree - The degree difference from the complementary color (default: 30).
+     * @return {array} An array of three colors in HSB format.
+     */
+    getSplitComplementary(degree = 30) {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let splitComplementaryColors = [
+            this.color,
+            this.p5.color((this.h + 180 - degree + 360) % 360, this.s, this.b, this.opacity),
+            this.p5.color((this.h + 180 + degree) % 360, this.s, this.b, this.opacity)
+        ];
+        this.p5.pop();
+        return splitComplementaryColors;
+    }
+
+    /**
+     * Generates a tetradic color scheme (four colors, two complementary pairs).
+     * @return {array} An array of four colors in HSB format.
+     */
+    getTetradic() {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let tetradicColors = [
+            this.color,
+            this.p5.color((this.h + 90) % 360, this.s, this.b, this.opacity),
+            this.p5.color((this.h + 180) % 360, this.s, this.b, this.opacity),
+            this.p5.color((this.h + 270) % 360, this.s, this.b, this.opacity)
+        ];
+        this.p5.pop();
+        return tetradicColors;
+    }
+
+    /**
+     * Generates an array of colors with varying opacities based on the base color.
+     * @param {number} numColors - The number of colors to generate.
+     * @return {array} An array of colors with different opacities.
+     */
+    getOpacityVariations(numColors) {
+        this.p5.push();
+        this.p5.colorMode(this.p5.HSB, 360, 100, 100, 1);
+        let result = [];
+        for (let i = 1; i <= numColors; i++) {
+            let currentOpacity = i / numColors;
+            result.push(this.p5.color(this.h, this.s, this.b, currentOpacity));
+        }
+        this.p5.pop();
+        return result;
+    }
+}