Phase 3

src/hooks/useConvolution.ts

@@ -26,11 +26,21 @@ export function useConvolution() {
   const generatorRef = useRef<Generator<ConvolutionStep> | null>(null)
   const isPausedRef = useRef(false)
   const stepModeRef = useRef(false)
+  const frameStartRef = useRef<number>(0)
 
   const kernel = selectedKernel?.matrix ?? customKernelMatrix
   const normalize = selectedKernel?.normalize ?? customKernelNormalize
   const padding = settings.padding
 
+  // Calculate optimal batch size for ~60fps (16.67ms per frame)
+  // Aim to spend ~8ms on computation, leaving ~8ms for rendering
+  const getBatchSize = useCallback(() => {
+    const baseStepsPerMs = 500 // approximate steps per ms on modern hardware
+    const targetComputeTime = 8 // ms
+    const speedMultiplier = settings.animationSpeed
+    return Math.max(1, Math.floor(baseStepsPerMs * targetComputeTime * speedMultiplier))
+  }, [settings.animationSpeed])
+
   const runConvolution = useCallback(async () => {
     if (!originalImageData || !kernel) return
 
@@ -54,26 +64,27 @@ export function useConvolution() {
       generatorRef.current = gen
 
       const processBatch = () => {
-        if (isPausedRef.current || stepModeRef.current) {
+        if (isPausedRef.current) {
           animationRef.current = requestAnimationFrame(processBatch)
           return
         }
 
-        const batchSize = Math.max(1, Math.floor(1000 * settings.animationSpeed))
+        if (stepModeRef.current) {
+          // In step mode, don't auto-advance
+          animationRef.current = requestAnimationFrame(processBatch)
+          return
+        }
+
+        frameStartRef.current = performance.now()
+        const batchSize = getBatchSize()
         let lastStep: ConvolutionStep | null = null
+        let stepsProcessed = 0
 
         for (let i = 0; i < batchSize; i++) {
           const result = gen.next()
           if (result.done) {
             if (lastStep && lastStep.x === -1) {
               // Final step with output image
-              const outputImageData = new ImageData(
-                new Uint8ClampedArray(originalImageData.data.length),
-                originalImageData.width,
-                originalImageData.height
-              )
-              // We need to reconstruct from the generator's final output
-              // For now, use the direct convolution
               const output = convolveImage(originalImageData, kernel, padding, normalize)
               completeConvolution(output)
             }
@@ -81,6 +92,12 @@ export function useConvolution() {
           }
           lastStep = result.value
           updateConvolutionStep(result.value)
+          stepsProcessed++
+
+          // Check if we've spent too much time in this frame (yield to main thread)
+          if (performance.now() - frameStartRef.current > 8) {
+            break
+          }
         }
 
         animationRef.current = requestAnimationFrame(processBatch)
@@ -102,6 +119,7 @@ export function useConvolution() {
     updateConvolutionProgress,
     completeConvolution,
     setConvolutionError,
+    getBatchSize,
   ])
 
   const pause = useCallback(() => {

src/lib/convolution/engine.ts

@@ -133,6 +133,10 @@ export function* convolutionSteps(
 
   const outputData = new Float32Array(width * height * channels)
 
+  // For progressive rendering: yield partial output every N rows
+  const rowsPerYield = Math.max(1, Math.floor(height / 20)) // ~20 yields per image
+  let rowsSinceYield = 0
+
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       for (let c = 0; c < channels; c++) {
@@ -166,6 +170,49 @@ export function* convolutionSteps(
         processedPixels++
         const progress = processedPixels / totalPixels
 
+        // Create partial output image for progressive rendering
+        let partialOutputImageData: ImageData | undefined
+        let isPartialOutput = false
+
+        if (c === channels - 1 && x === width - 1) {
+          // End of row - check if we should yield partial output
+          rowsSinceYield++
+          if (rowsSinceYield >= rowsPerYield || y === height - 1) {
+            // Create partial output image
+            const partialImageData = new ImageData(width, height)
+            for (let i = 0; i < outputData.length; i++) {
+              // Only fill up to current progress
+              const pixelIdx = Math.floor(i / channels)
+              const currentPixelIdx = y * width + x
+              if (pixelIdx <= currentPixelIdx) {
+                partialImageData.data[i] = Math.max(0, Math.min(255, Math.round(outputData[i] * 255)))
+              } else {
+                // Unprocessed pixels - show as transparent or original
+                partialImageData.data[i] = 0
+                partialImageData.data[i + 3] = 0 // transparent alpha for unprocessed
+              }
+            }
+            // Fill alpha for processed pixels
+            for (let py = 0; py <= y; py++) {
+              for (let px = 0; px < width; px++) {
+                for (let pc = 0; pc < channels; pc++) {
+                  const idx = (py * width + px) * channels + pc
+                  const imgIdx = (py * width + px) * 4 + pc
+                  if (pc < 3) {
+                    partialImageData.data[imgIdx] = Math.max(0, Math.min(255, Math.round(outputData[idx] * 255)))
+                  } else {
+                    partialImageData.data[imgIdx] = 255
+                  }
+                }
+              }
+            }
+
+            partialOutputImageData = partialImageData
+            isPartialOutput = true
+            rowsSinceYield = 0
+          }
+        }
+
         yield {
           x,
           y,
@@ -177,6 +224,8 @@ export function* convolutionSteps(
           outputValue: normalizedValue,
           normalizedValue,
           progress,
+          partialOutputImageData,
+          isPartialOutput,
         }
 
         if (onProgress) onProgress(progress)
@@ -202,6 +251,8 @@ export function* convolutionSteps(
     outputValue: 0,
     normalizedValue: 0,
     progress: 1,
+    partialOutputImageData: outputImageData,
+    isPartialOutput: true,
   }
 }
 

src/store/index.ts

@@ -265,12 +265,22 @@ export const useAppStore = create<AppStore>()(
       })),
 
     updateConvolutionStep: (step) =>
-      set((state) => ({
-        convolution: {
-          ...state.convolution,
-          currentStep: step,
-        },
-      })),
+      set((state) => {
+        const newState = {
+          convolution: {
+            ...state.convolution,
+            currentStep: step,
+          },
+        }
+        // If this step has a partial output image, update the processed image data
+        if (step.isPartialOutput && step.partialOutputImageData) {
+          return {
+            ...newState,
+            processedImageData: step.partialOutputImageData,
+          }
+        }
+        return newState
+      }),
 
     updateConvolutionProgress: (progress, processedPixels, elapsedTime) =>
       set((state) => ({

src/types/index.ts

@@ -32,6 +32,9 @@ export interface ConvolutionStep {
   outputValue: number
   normalizedValue: number
   progress: number
+  // Progressive output (optional, set periodically during animation)
+  partialOutputImageData?: ImageData
+  isPartialOutput?: boolean
 }
 
 export interface ConvolutionProgress {