Inversion (v0.0.1-alpha.4)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

src/components/pages/Generator/CanvasSection/CanvasSection.tsx

@@ -7,9 +7,10 @@ import {SectionTitle} from '../SectionTitle';
 import {saveImage} from './utils/saveImage';
 import {draw} from './utils/draw';
 import {Switch} from '@/components/ui/Switch';
+import {getCanvasDimensions} from './utils/getCanvasDimensions';
 import {clearCanvas} from './utils/clearCanvas';
 import {drawNormal} from './utils/drawNormal';
-import {getCanvasDimensions} from './utils/getCanvasDimensions';
+import {drawInvert} from './utils/drawInvert';
 
 export function CanvasSection() {
   const [is8k, setIs8k] = useState<boolean>(false);
@@ -115,7 +116,21 @@ export function CanvasSection() {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    saveImage({canvas, fileName: 'displacementx-gen'});
+    const dateTimeString = (): string => {
+      const now = new Date();
+      const y = now.getFullYear();
+      const m = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+      const d = String(now.getDate()).padStart(2, '0');
+      const hh = String(now.getHours()).padStart(2, '0');
+      const mm = String(now.getMinutes()).padStart(2, '0');
+      const ss = String(now.getSeconds()).padStart(2, '0');
+      return `${y}-${m}-${d}-${hh}${mm}${ss}`;
+    };
+
+    saveImage({
+      canvas,
+      fileName: `DisplacementX_${width}x${height}_${dateTimeString()}`,
+    });
   };
 
   const onIs8kChange = (is8k: boolean) => {
@@ -129,6 +144,24 @@ export function CanvasSection() {
     setIs8k(is8k);
   };
 
+  const invert = () => {
+    const renderTimeStartMs: number = performance.now();
+    setIsRendering(true);
+    setIsNormalPreview(false);
+
+    const updateCanvas = () => {
+      const ctx2d = getCtx2d(canvasRef);
+      drawInvert(ctx2d);
+    };
+
+    // Put a small timeout to allow the UI to update before canvas takes the main thread over
+    setTimeout(() => {
+      updateCanvas();
+      setIsRendering(false);
+      setRenderTimeMs(performance.now() - renderTimeStartMs);
+    }, 20);
+  };
+
   const toggleNormalPreview = () => {
     const isNormalPreviewNew = !isNormalPreview;
     const renderTimeStartMs: number = performance.now();
@@ -140,7 +173,7 @@ export function CanvasSection() {
       if (isNormalPreviewNew) {
         // Draw normal preview
         canvasOriginalPreviewDataUrl.current = ctx2d.canvas.toDataURL();
-        drawNormal({ctx2d, ctx2dNormal: ctx2d});
+        drawNormal(ctx2d);
       } else {
         // Restore original preview
         const dataUrl = canvasOriginalPreviewDataUrl.current;
@@ -197,6 +230,12 @@ export function CanvasSection() {
         </Button>
       </div>
       <div className='flex flex-wrap gap-1 pt-2'>
+        <Button
+          disabled={isPristine || isRendering || isNormalPreview}
+          onClick={invert}
+        >
+          Invert
+        </Button>
         <Button
           disabled={isPristine || isRendering}
           onClick={toggleNormalPreview}

src/components/pages/Generator/CanvasSection/utils/drawInvert.ts

@@ -0,0 +1,16 @@
+import {getCanvasDimensions} from './getCanvasDimensions';
+
+export const drawInvert = (ctx2d: CanvasRenderingContext2D): void => {
+  const {w, h} = getCanvasDimensions(ctx2d);
+
+  const imageData = ctx2d.getImageData(0, 0, w, h);
+  const {data} = imageData;
+
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = 255 - data[i];
+    data[i + 1] = 255 - data[i + 1];
+    data[i + 2] = 255 - data[i + 2];
+  }
+
+  ctx2d.putImageData(imageData, 0, 0);
+};

src/components/pages/Generator/CanvasSection/utils/drawNormal.ts

@@ -1,21 +1,10 @@
 import {getCanvasDimensions} from './getCanvasDimensions';
 
-/**
- * Draws the normal map.
- * - "ctx2d" is the canvas context to read from.
- * - "ctx2dNormal" is the canvas context to write to.
- */
-export const drawNormal = ({
-  ctx2d,
-  ctx2dNormal,
-}: {
-  ctx2d: CanvasRenderingContext2D;
-  ctx2dNormal: CanvasRenderingContext2D;
-}): void => {
+export const drawNormal = (ctx2d: CanvasRenderingContext2D): void => {
   const {w, h} = getCanvasDimensions(ctx2d);
 
   const source = ctx2d.getImageData(0, 0, w, h);
-  const destination = ctx2dNormal.createImageData(w, h);
+  const destination = ctx2d.createImageData(w, h);
 
   for (let i = 0, l = w * h * 4; i < l; i += 4) {
     let x1;
@@ -51,5 +40,5 @@ export const drawNormal = ({
     destination.data[i + 3] = 255;
   }
 
-  ctx2dNormal.putImageData(destination, 0, 0);
+  ctx2d.putImageData(destination, 0, 0);
 };