Examples

Image Processing

Procedural fractal generation, false-color elevation maps, and pixel data manipulation.

Image Generation & Processing

color-schemes-js is ideal for procedural image generation, fractals, pseudocolor false-color mapping, and pixel data manipulation in JavaScript and TypeScript.

Pixel Data Processing Engine

Julia Parameter (cRe): -0.40

Julia Parameter (cIm): 0.60

image-processing.ts

import { colorschemes, get } from 'color-schemes-js';

function drawJuliaFractal(ctx: CanvasRenderingContext2D, width: number, height: number) {
  const imgData = ctx.createImageData(width, height);
  const data = imgData.data;
  const scheme = colorschemes.vermeer;

  const cRe = -0.4;
  const cIm = 0.6;
  const maxIter = 80;

  for (let y = 0; y < height; y++) {
    const zy0 = (y / height) * 2.4 - 1.2;
    for (let x = 0; x < width; x++) {
      const zx0 = (x / width) * 3.6 - 1.8;

      let zx = zx0, zy = zy0, iter = 0;
      while (zx * zx + zy * zy < 4 && iter < maxIter) {
        const tmp = zx * zx - zy * zy + cRe;
        zy = 2 * zx * zy + cIm;
        zx = tmp;
        iter++;
      }

      // Continuous colormap index t ∈ [0.0, 1.0]
      const t = iter / maxIter;
      const color = get(scheme, t);

      const idx = (y * width + x) * 4;
      data[idx]     = Math.round(color.r * 255);
      data[idx + 1] = Math.round(color.g * 255);
      data[idx + 2] = Math.round(color.b * 255);
      data[idx + 3] = 255;
    }
  }

  ctx.putImageData(imgData, 0, 0);
}

Procedural Fractals

When generating mathematical structures such as Julia Set or Mandelbrot fractals, each pixel's iteration count is normalized into $t \in 0.0, 1.0$ and mapped directly to a continuous colormap using get(scheme, t).

False-Color Pseudocolor Mapping

Pseudocolor mapping converts single-channel scalar data (such as topographic elevation heightmaps, thermal infrared, and medical ultrasound scans) into perceptually uniform colormaps. By combining continuous sampling with step quantization, you can generate topographic contour isolines or smooth elevation heatmaps without perceptual artifacts.

Edit this pageorReport an issue

Plotting & 3D

Integrate color schemes with Three.js, WebGL 3D shaders, and HTML5 Canvas 2D engines.

References

Academic papers, palette citations, and perceptual color science literature.