feat: colors

presets/meteor-rain-preset.js

@@ -7,17 +7,15 @@ class MeteorRainPreset extends BasePreset {
   constructor(width = 16, height = 16) {
     super(width, height);
     this.meteors = [];
-    this.paletteStops = [
-      { stop: 0.0, color: hexToRgb('0a0126') },
-      { stop: 0.3, color: hexToRgb('123d8b') },
-      { stop: 0.7, color: hexToRgb('21c7d9') },
-      { stop: 1.0, color: hexToRgb('f7ffff') },
-    ];
     this.defaultParameters = {
       meteorCount: 12,
       minSpeed: 4,
       maxSpeed: 10,
       trailDecay: 0.76,
+      color1: '0a0126',
+      color2: '123d8b',
+      color3: '21c7d9',
+      color4: 'f7ffff',
     };
   }
 
@@ -45,7 +43,7 @@ class MeteorRainPreset extends BasePreset {
     };
   }
 
-  drawMeteor(meteor) {
+  drawMeteor(meteor, paletteStops) {
     const col = Math.round(meteor.x);
     const row = Math.round(meteor.y);
     if (col < 0 || col >= this.width || row < 0 || row >= this.height) {
@@ -53,15 +51,15 @@ class MeteorRainPreset extends BasePreset {
     }
 
     const energy = clamp(1.2 - Math.random() * 0.2, 0, 1);
-    this.frame[toIndex(col, row, this.width)] = samplePalette(this.paletteStops, energy);
+    this.frame[toIndex(col, row, this.width)] = samplePalette(paletteStops, energy);
   }
 
-  updateMeteors(deltaSeconds) {
+  updateMeteors(deltaSeconds, paletteStops) {
     this.meteors.forEach((meteor, index) => {
       meteor.x += meteor.vx * deltaSeconds;
       meteor.y += meteor.vy * deltaSeconds;
 
-      this.drawMeteor(meteor);
+      this.drawMeteor(meteor, paletteStops);
 
       if (meteor.x > this.width + 1 || meteor.y > this.height + 1) {
         this.meteors[index] = this.spawnMeteor(this.width, this.height);
@@ -74,6 +72,13 @@ class MeteorRainPreset extends BasePreset {
     const trailDecay = this.getParameter('trailDecay') || 0.76;
     const meteorCount = this.getParameter('meteorCount') || 12;
 
+    const paletteStops = [
+      { stop: 0.0, color: hexToRgb(this.getParameter('color1') || '0a0126') },
+      { stop: 0.3, color: hexToRgb(this.getParameter('color2') || '123d8b') },
+      { stop: 0.7, color: hexToRgb(this.getParameter('color3') || '21c7d9') },
+      { stop: 1.0, color: hexToRgb(this.getParameter('color4') || 'f7ffff') },
+    ];
+
     fadeFrame(this.frame, trailDecay);
 
     // Update meteor count if it changed
@@ -84,7 +89,7 @@ class MeteorRainPreset extends BasePreset {
       this.meteors.pop();
     }
 
-    this.updateMeteors(0.016); // Assume 60 FPS
+    this.updateMeteors(0.016, paletteStops); // Assume 60 FPS
 
     return this.frame;
   }
@@ -98,6 +103,10 @@ class MeteorRainPreset extends BasePreset {
         minSpeed: { type: 'range', min: 2, max: 8, step: 1, default: 4 },
         maxSpeed: { type: 'range', min: 6, max: 15, step: 1, default: 10 },
         trailDecay: { type: 'range', min: 0.6, max: 0.9, step: 0.02, default: 0.76 },
+        color1: { type: 'color', default: '0a0126' },
+        color2: { type: 'color', default: '123d8b' },
+        color3: { type: 'color', default: '21c7d9' },
+        color4: { type: 'color', default: 'f7ffff' },
       },
       width: this.width,
       height: this.height,