feat: colors

presets/lava-lamp-preset.js

@@ -7,20 +7,18 @@ class LavaLampPreset extends BasePreset {
   constructor(width = 16, height = 16) {
     super(width, height);
     this.blobs = [];
-    this.paletteStops = [
-      { stop: 0.0, color: hexToRgb('050319') },
-      { stop: 0.28, color: hexToRgb('2a0c4f') },
-      { stop: 0.55, color: hexToRgb('8f1f73') },
-      { stop: 0.75, color: hexToRgb('ff4a22') },
-      { stop: 0.9, color: hexToRgb('ff9333') },
-      { stop: 1.0, color: hexToRgb('fff7b0') },
-    ];
     this.defaultParameters = {
       blobCount: 6,
       blobSpeed: 0.18,
       minBlobRadius: 0.18,
       maxBlobRadius: 0.38,
       intensity: 1.0,
+      color1: '050319',
+      color2: '2a0c4f',
+      color3: '8f1f73',
+      color4: 'ff4a22',
+      color5: 'ff9333',
+      color6: 'fff7b0',
     };
   }
 
@@ -85,11 +83,19 @@ class LavaLampPreset extends BasePreset {
     this.updateBlobs(0.016); // Assume 60 FPS
 
     const frame = createFrame(this.width, this.height);
+    const paletteStops = [
+      { stop: 0.0, color: hexToRgb(this.getParameter('color1') || '050319') },
+      { stop: 0.28, color: hexToRgb(this.getParameter('color2') || '2a0c4f') },
+      { stop: 0.55, color: hexToRgb(this.getParameter('color3') || '8f1f73') },
+      { stop: 0.75, color: hexToRgb(this.getParameter('color4') || 'ff4a22') },
+      { stop: 0.9, color: hexToRgb(this.getParameter('color5') || 'ff9333') },
+      { stop: 1.0, color: hexToRgb(this.getParameter('color6') || 'fff7b0') },
+    ];
 
     for (let row = 0; row < this.height; ++row) {
       for (let col = 0; col < this.width; ++col) {
         const energy = this.calculateEnergyAt(col, row);
-        const color = samplePalette(this.paletteStops, energy);
+        const color = samplePalette(paletteStops, energy);
         frame[toIndex(col, row, this.width)] = color;
       }
     }
@@ -136,6 +142,12 @@ class LavaLampPreset extends BasePreset {
         minBlobRadius: { type: 'range', min: 0.1, max: 0.3, step: 0.02, default: 0.18 },
         maxBlobRadius: { type: 'range', min: 0.2, max: 0.5, step: 0.02, default: 0.38 },
         intensity: { type: 'range', min: 0.5, max: 2.0, step: 0.1, default: 1.0 },
+        color1: { type: 'color', default: '050319' },
+        color2: { type: 'color', default: '2a0c4f' },
+        color3: { type: 'color', default: '8f1f73' },
+        color4: { type: 'color', default: 'ff4a22' },
+        color5: { type: 'color', default: 'ff9333' },
+        color6: { type: 'color', default: 'fff7b0' },
       },
       width: this.width,
       height: this.height,