added color offset

src/Mandelbrot.ts

@@ -12,6 +12,7 @@ export default class Mandelbrot {
     protected workersFinished: boolean[] = [];
     protected workers: Worker[] = [];
     protected rgb: RGBColorPalette = DEFAULT_RGB;
+    public colorOffset: number = 0;
 
     constructor(canvas: HTMLCanvasElement, doneCallback?: Function) {
         if (!canvas) throw new Error("canvas was not provided")
@@ -35,6 +36,7 @@ export default class Mandelbrot {
             da: (x2 - x1) / width,
             db: (y2 - y1) / height,
             iterations: this.iterations,
+            colorOffset: this.colorOffset,
             imageData: this.ctx.getImageData(0, 0, width, height),
         }
         this.workersFinished = Array(this.workersNumber);

src/index.html

@@ -49,6 +49,10 @@
             <option value="3840x2160">3840x2160 4K</option>
          </select>
          <span>Larger canvas sizes as well as larger maximum iteration values ​​can take much longer to compute.</span><br>
+         <label>
+            Color offset: 
+            <input id="color-offset" type="number" value="0" min="0" step="1"/>
+         </label>
          <input id="reset" type="button" value="Reset"/>
          <input id="zoom_minus" type="button" value="Zoom -"/>
          <input id="zoom_plus" type="button" value="Zoom +"/>

src/index.ts

@@ -15,6 +15,7 @@ const INPUTS = {
     Y1: document.querySelector("#y1") as HTMLInputElement,
     ITER: document.querySelector("#iter") as HTMLInputElement,
     CSIZE: document.querySelector("#cSize") as HTMLInputElement,
+    COLOR_OFFSET: document.querySelector("#color-offset") as HTMLInputElement,
 }
 
 const input = {
@@ -41,7 +42,7 @@ function draw() {
 }
 
 function reset() {
-if (canvas == null) throw new Error('canvas is not defined');
+    if (canvas == null) throw new Error('canvas is not defined');
     input.set(INPUTS.LEN, 3);
     input.set(INPUTS.LEN2, 3 / canvas.width * canvas.height);
     input.set(INPUTS.X1, -2);
@@ -90,7 +91,11 @@ document.getElementById("zoom_plus")?.addEventListener("click", e => click(0.5,
 document.getElementById("zoom_minus")?.addEventListener("click", e => click(0.5, 0.5, 0.5));
 document.getElementById("download")?.addEventListener("click", e => download());
 INPUTS.ITER.addEventListener("change", draw);
-
+INPUTS.COLOR_OFFSET.addEventListener('change', () => {
+    mandelbrot.colorOffset = +INPUTS.COLOR_OFFSET.value;
+    draw();
+}) 
+
 INPUTS.CSIZE.addEventListener("change", () => {
     let [width, height] = INPUTS.CSIZE.value.split("x");
     canvas.width = +width;

src/types.ts

@@ -11,6 +11,7 @@ export interface Task {
     db: number;
     iterations: number;
     imageData?: ImageData;
+    colorOffset: number,
 }
 
 export type RGBColorPalette = [number, number, number][];

src/workers/mandelbrot.worker.ts

@@ -40,15 +40,15 @@ class MandelbrotWorker {
         });
     }
     protected calculateLine(y: number): ImageData {
-        const { x1, y1, da, db, iterations, w } = this.task;
+        const { x1, y1, da, db, iterations, w, colorOffset } = this.task;
         const line = new ImageData(w, 1);
         let c: [number, number, number];
         for(let x = 0; x < w*4; x+=4){
             let diverge = isInSet(x1 + (x/4 * da), y1 + (y * db), iterations);
             if (!diverge) { 
                 c = [0, 0, 0]; // point belongs to the set
             } else { 
-                let color = diverge % this.rgb.length;
+                let color = (diverge + colorOffset) % this.rgb.length;
                 c = this.rgb[color]; // colors outer points
             }
             line.data[x] = c[0];