About

Image Play Lab

A project for Image Processing. Built to make abstract algorithms tangible: upload a real image, adjust real parameters, and see the math come alive in the browser.

Contributors

Gage

Backend + Deployment

All image processing algorithms in TypeScript from scratch (filtering, edge detection, Otsu thresholding, morphology, metrics), the data layer, and Vercel deployment.

Sam

Frontend + UI/UX

Component architecture, visual design system (dark theme, amber accent, mono typography), image workspace (split/slider/result views), and histogram rendering.

Why I built this

Image processing is one of those subjects where the gap between reading about it and understanding it is wide. A Gaussian blur formula on a slide is abstract. A slider that lets you move σ from 0.5 to 10 and watch detail dissolve. That sticks.

Image Play Lab is built for that gap. Every module combines the intuition and the math, then puts you in control of the parameters. You can see that a median filter outperforms Gaussian blur on salt-and-pepper noise in seconds, not after three lectures.

Concepts covered

01Pixel modelRGB color space, luminance weighting, channel isolation

02Noise modelsGaussian (additive), salt-and-pepper (impulsive), uniform

03Spatial filteringLinear convolution, box / Gaussian / median kernels

04Edge detectionSobel, Laplacian, full Canny pipeline

05ThresholdingBinary, inverse, Otsu inter-class variance

06Histogram analysisDistributions, CDF-based equalization

07Morphological opsErosion, dilation, opening, closing

08Quality metricsMSE, PSNR in dB, structural similarity (SSIM)

Technical approach

Every algorithm is implemented from scratch in TypeScript using only the browser's Canvas API. No image-processing library; the code itself is readable and educational. Processing is fully client-side: images never leave the device.

Slider updates are debounced to avoid blocking the main thread. Images above 800 px are downscaled on load for real-time responsiveness.

Next.js 16App framework + Turbopack

TypeScriptStrict mode throughout

Tailwind CSSUtility-first styling

Canvas APIAll processing client-side

VercelZero-config deployment

Architecture

app/
  page.tsx                 Home / landing
  lab/page.tsx             Interactive lab
  about/page.tsx           This page
components/
  layout/                  Header · Footer
  lab/                     LabShell · ImageUploader · ImageWorkspace
  │                        ModuleTabs · ControlPanel · ExplanationCard
  │                        HistogramView · MetricCard
  ui/                      SliderControl · SegmentedControl · Badge
lib/image-processing/
  canvas-utils.ts          Shared canvas helpers
  basics / noise / filtering / edge-detection
  thresholding / histogram / morphology / metrics
  processor.ts             Operation router
data/modules.ts            Module definitions + educational copy
types/image.ts             TypeScript interfaces

Try it yourself

No login. No install.
Open the lab and start learning.

Open Lab →