Implement kaleidoscope effect

src/components/settings/Settings.vue

@@ -69,6 +69,22 @@
                     @click="quarterTurn()"
                 >&#10561;</button>
             </div>
+            <div class="input-wrapper">
+                <label
+                    for="inputKaleidoscope"
+                    v-t="'settings.kaleidoscope'"
+                    v-tooltip.left="$t('settings.description.kaleidoscope')"
+                ></label>
+                <input
+                    id="inputKaleidoscope"
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    v-model.number="internalValue.kaleidoscope"
+                    @change="saveState()"
+                />
+            </div>
             <div class="input-wrapper">
                 <label
                     for="inputRandom"

src/definitions/types.ts

@@ -28,6 +28,7 @@ export interface SortSettings {
     width: number;
     height: number;
     angle: number;
+    kaleidoscope: number; // normalize 0 - 1
     randomness: number; // normalized 0 - 1
     charLength: number; // normalized 0 - 1
     lowerThreshold: number; // normalized 0 - 1

src/filters/kaleidoscope.ts

@@ -0,0 +1,161 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Igor Zinken 2024 - https://www.igorski.nl
+ * 
+ * Adapted from code by https://www.pepperoni.blog/canvas-kaleidoscope/
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import type { CachedPixelCanvas } from "@/definitions/types";
+import { cacheCanvas, createCanvas } from "@/utils/canvas";
+
+interface KaleidoscopeParams {
+    image: CachedPixelCanvas;
+    size: number;
+}
+
+// todo before caching base image so we don't need to call this multiple times!
+
+export const applyKaleidoscope = async ({ image, size = 150 }: KaleidoscopeParams ): Promise<CachedPixelCanvas> => {
+    const patDim = size;
+    const SqrtOf3_4 = Math.sqrt(3)/2;
+    const height = SqrtOf3_4 * patDim;
+
+    const clone = createCanvas( image.width, image.height );
+
+    // draw mirrored version of the image
+    clone.context.save();
+    clone.context.translate( image.width, 0 );
+    clone.context.scale(-1, 1);
+    clone.context.drawImage( image.canvas, 0, 0 );
+    clone.context.restore();
+
+    const output = createCanvas( image.width, image.height );
+    const c = output.canvas;
+    const ctx = output.context;
+
+    const pat = ctx.createPattern( image.canvas, "repeat");
+    const patR = ctx.createPattern( clone.canvas, "repeat");
+
+    let offset = 0;
+
+    ctx.translate(-0.5*patDim, 0);
+
+    const fn = function( alternateMode: boolean ): void {
+        offset = ( offset - 1 ) % 1024;
+        var i = 0;
+
+        //draw kaleidoscope first row.
+        ctx.save();
+        ctx.fillStyle=pat;
+        ctx.translate(0, offset);
+
+        while( i <= 3 ) {
+            ctx.beginPath();
+            ctx.moveTo(0,-offset);
+            ctx.lineTo(patDim, -offset);
+            ctx.lineTo(0.5*patDim, height-offset);
+            ctx.closePath();
+            ctx.fill();
+
+            const mod = i % 3;
+
+            if ( mod === 0 ) {
+                ctx.translate(patDim,-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(-patDim,offset);
+            }
+            else if ( mod === 1 ) {
+                if ( alternateMode ) {
+                    ctx.rotate(120*Math.PI/180);
+                    ctx.translate(-3*patDim, 0);
+                    ctx.rotate(-120*Math.PI/180);
+                }
+                ctx.translate(0.5*patDim, height-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(-0.5*patDim, -height+offset);
+            }
+            else if( mod === 2 ) {
+                ctx.translate(0,-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(0,offset);
+            }
+            i++;
+        }
+        ctx.restore();
+        ctx.save();
+        ctx.scale(-1,-1);
+        ctx.fillStyle=patR;
+        ctx.translate((-i+(i%3==0?0.5:i%3==1?1.5:-0.5))*patDim, -height+offset);
+        ctx.translate(0, -offset);
+        ctx.rotate(120*Math.PI/180);
+        ctx.translate(0, offset);
+        var j=0;
+
+        while(j < i+1){
+            ctx.beginPath();
+
+            if( j > 0 || !alternateMode ) {
+                ctx.moveTo(0,-offset);
+                ctx.lineTo(patDim, -offset);
+                ctx.lineTo(0.5*patDim, height-offset);
+                ctx.closePath();
+                ctx.fill();
+            }
+            const mod = j % 3;
+
+            if( mod === 1 ) {
+                ctx.translate(patDim,-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(-patDim,offset);
+            }
+            else if( mod === 2 ) {
+                ctx.translate(0.5*patDim, height-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(-0.5*patDim, -height+offset);
+            }
+            else if( mod === 0 ) {
+                ctx.translate(0,-offset);
+                ctx.rotate(-120*Math.PI/180);
+                ctx.translate(0,offset);
+            }
+            j++;
+        }
+        ctx.restore();
+    };
+
+    const patternHeight = Math.floor( SqrtOf3_4 * patDim * 2 );
+
+    const tile = function() {
+        var rowData = ctx.getImageData( 0, 0, patDim * 3, patternHeight );
+        for( let i = 0; patternHeight * i < c.height + SqrtOf3_4 * patDim; i++ ) {
+            for( let j = 0; j * patDim < c.width + patDim; j += 3 ) {
+                ctx.putImageData( rowData, j * patDim, i * patternHeight );
+            }
+        }
+    };
+
+    fn( false );
+    ctx.translate( 1.5 * patDim, height );
+    fn( true );
+    ctx.translate( -1.5 * patDim, -height );
+    tile();
+
+    return cacheCanvas( output );
+};

src/filters/pixel-sorter.ts

@@ -22,10 +22,11 @@
  */
 import type { Size } from "zcanvas";
 import type { CachedPixelCanvas, PixelCanvas } from "@/definitions/types";
-import { applyThreshold } from "@/filters/threshold";
+import { applyKaleidoscope } from "@/filters/kaleidoscope";
 import { getCachedRotation, setCachedRotation, getCachedMask, setCachedMask } from "@/filters/sorter/cache";
 import { IntervalFunction } from "@/filters/sorter/interval";
 import { SortingType } from "@/filters/sorter/sorting";
+import { applyThreshold } from "@/filters/threshold";
 // @ts-expect-error TS lint cannot find module but Vite will take care of it
 import FilterWorker from "@/filters/workers/filter.worker?worker";
 import { useSystemStore } from "@/store/system";
@@ -42,6 +43,7 @@ interface PixelSortParams {
     sortingType?: SortingType,
     intervalFunction?: IntervalFunction;
     angle?: number;
+    kaleidoscope?: number; // normalize 0 - 1 range
 }
 
 type SortingJob = {
@@ -70,7 +72,7 @@ let job: SortingJob | undefined;
  */
 export const pixelsort = async ({ image, maskImage, randomness = 0, charLength = 0.5,
     sortingType = SortingType.LIGHTNESS, intervalFunction = IntervalFunction.THRESHOLD,
-    lowerThreshold = 0.25, upperThreshold = 0.8, angle = 0 }: PixelSortParams ): Promise<PixelCanvas> => {
+    lowerThreshold = 0.25, upperThreshold = 0.8, angle = 0, kaleidoscope = 0 }: PixelSortParams ): Promise<PixelCanvas> => {
 
     prepare(); // prepares the time budget
 
@@ -103,6 +105,20 @@ export const pixelsort = async ({ image, maskImage, randomness = 0, charLength =
             setCachedRotation( id, angle, image );
         }
     }
+
+    // TODO : kaleidoscope should be applied conditionally and before first cache
+    // kaleidoscope should probably be a rotation "upsell"
+
+    kaleidoscope = Math.round( kaleidoscope * image.width );
+    const doKaleidoscope = kaleidoscope > 0;
+    console.info("do kaleidoscope:" + doKaleidoscope + " for value:" + kaleidoscope);
+
+    if ( doKaleidoscope ) {
+        image = await applyKaleidoscope({ image, size: kaleidoscope });
+    }
+
+    // E.O. TODO
+
     const { width, height } = image;
     const size = { width, height };
 

src/messages.json

@@ -19,6 +19,7 @@
         },
         "settings": {
             "angle": "Angle",
+            "kaleidoscope": "Kaleidoscope",
             "randomness": "Randomness",
             "lowerThreshold": "Lower threshold",
             "upperThreshold": "Upper threshold",
@@ -30,6 +31,7 @@
             "mask": "Mask",
             "description": {
                 "angle": "Angle (in degrees) determining the sorting direction",
+                "kaleidoscope": "Mirror the fragments of the source image",
                 "quarterTurn": "Rotate in 90 degree increments",
                 "randomness": "Percentage of pixels NOT to sort (0% = fully sorted, 100% = no sorting)",
                 "charLength": "Characteristic length for the randomized width generation",

src/store/settings.ts

@@ -36,6 +36,7 @@ export const useSettingsStore = defineStore( "settings", {
             width: MAX_IMAGE_SIZE,
             height: MAX_IMAGE_SIZE,
             angle: 0,
+            kaleidoscope: 0,
             randomness: 0,
             charLength: 0.5,
             lowerThreshold: 0.25,