Haar Wavelet Collage With Reversible Detail

A Haar wavelet collage can separate an image into coarse structure and three directional detail bands, then treat those bands as visual material without losing the route back to the source. Reversibility is the discipline: analysis coefficients reconstruct exactly before art direction changes them.

This tutorial implements a 2D transform, proves the round trip, and then composes swaps, masks, and color treatments as named edits rather than pretending the altered collage is lossless.

A Haar wavelet collage has two truths

The first truth is analytical: a chosen Haar convention transforms a rectangular pixel array into one approximation band and horizontal, vertical, and diagonal detail bands, and the inverse reconstructs the input within the declared numeric representation. The second truth is editorial: swapping, thresholding, recoloring, or spatially masking those bands creates a new image that no longer equals the source. Haar wavelet collage practice becomes clearer when the two stages have separate manifests.

Start with a small grayscale image whose dimensions are compatible with the selected decomposition depth. Convert color and alpha through an explicit policy, preserve the untouched source hash, and run the inverse immediately. Do not begin art direction until maximum absolute error and channel policy pass. Reversibility is a testable property of the transform pipeline, not an aesthetic resemblance.

Reversible image bands describe the untouched analysis path, not every artwork made from them. A Haar wavelet collage should publish the exact reconstruction error before any band swap, mask, gain, or threshold is applied.

Anchor the transform in primary references

Mallat's work on a theory for multiresolution signal decomposition supplies foundational context for wavelet representations. PyWavelets documents 2D forward and inverse discrete wavelet transforms, including coefficient organization and boundary modes. The HTML Canvas specification defines the browser pixel surface used for this implementation. Each source supports a different layer rather than one combined artistic recipe.

This article uses the simplest Haar construction and a pinned edge policy; it does not claim novel compression, denoising, or general superiority over other wavelets. The collage is a creative interpretation built on a reversible reference transform. Record coefficient order and normalization because libraries can present band labels and axes in ways that are easy to transpose accidentally.

The cited theory establishes multiresolution context, while the library reference fixes callable conventions. Record both because a 2D discrete wavelet transform can vary by coefficient ordering, normalization, extension mode, and channel policy.

Derive one two-dimensional Haar step

For each adjacent pixel pair in a row, compute an average-like low value and a difference-like high value under one chosen normalization. Apply the same operation down columns of those temporary bands. The combinations produce low-low approximation, low-high and high-low directional details, and high-high diagonal detail. The inverse undoes the column step and then the row step using the exact paired equations.

Write the four-pixel case on paper and keep it as a unit test. A Haar wavelet collage pipeline should also test constant fields, horizontal stripes, vertical stripes, a checkerboard, an impulse, odd dimensions, alpha edges, and multi-level decomposition. These fixtures reveal swapped bands and scaling mistakes far faster than a portrait, where a wrong transform can still look plausibly artistic.

Derive the four outputs for one 2×2 block and invert them by hand before scaling up. That tiny proof catches sign, order, and normalization mistakes that a visually plausible reconstruction can hide.

Choose numeric and boundary policy explicitly

Integer pixels transformed through division may require floating coefficients. Keep analysis in a sufficient floating representation and compare reconstruction before clamping back to display bytes. If exact integer-to-integer recovery is required, use and document a lifting or rounding convention designed for that promise rather than assuming generic division will remain exact for every value. The tiny article artifact uses values that round-trip exactly under its stated equations; it is a proof of code shape, not every storage policy.

At image edges, symmetric extension, periodic extension, padding, or cropping can produce different coefficients. Pick one mode and include it in the edition ID. The failure mode is comparing outputs from two tools with different default boundaries and calling the discrepancy an implementation bug. A parity test must align dimensions, axes, normalization, extension, channel conversion, and coefficient ordering first.

Choose float precision, boundary extension, decomposition depth, alpha treatment, color space, and odd-dimension policy explicitly. Exactness is meaningful only inside those declared numeric and image-domain decisions.

Render coefficients without destroying their sign

Detail bands contain positive and negative values around zero, so mapping their raw minimum and maximum independently to black and white can hide comparability. Use a symmetric display range with neutral midtone at zero, label the scale, and keep the analytical arrays separate from the visualization. Approximation coefficients use a different range and should be identified clearly. A Haar wavelet collage contact sheet becomes legible when every panel names band, level, range, and source.

Do not infer directional meaning from a thumbnail without checking axis conventions. A library's horizontal label may refer to the differencing direction or the feature orientation, which readers can interpret differently. Include stripe fixtures beside the band map. The article's semantic table and inline diagram then remain understandable even if the colorful coefficient image is unavailable.

Wavelet detail coefficients are signed values, so a display map needs a documented zero point and symmetric scale. Never feed the decorative visualization back into reconstruction as if it were untouched coefficient data.

Art-direct bands through named operations

Begin with operations that preserve provenance: swap one detail band between two registered sources, attenuate another by a scalar, mask a third through a hand-drawn region, and leave approximation from the primary image. Every output pixel can then be related to source band, level, transform version, and edit. Create a contact sheet that changes only one operation at a time before combining them.

The interesting aesthetic tension comes from scale ownership. Coarse facial or architectural structure can remain stable while textile edges, handwriting, foliage, or another image's directional energy interrupts it. Avoid using random coefficient replacement as the whole idea. My preferred Haar wavelet collage has a clear editorial reason for which source owns mass, which owns texture, and where a mask lets one detail vocabulary cross into another.

Name each artistic operation by band, region, source, and strength. Reversible image bands may be copied and archived, while the edited working set becomes a separate authored branch with its own digest.

Reconstruct after every edit

Each art-directed coefficient set passes through the same inverse function as the untouched reference. Check for non-finite values, out-of-range energy, alpha discontinuities, clipped channels, and unexpected seams. Keep a difference image between the edited reconstruction and its unedited base, because that is the most honest map of where the collage acts. Export both linear working data and a color-managed display image where the browser pipeline permits.

The reversible claim applies only to the untouched analysis coefficients. Once bands are altered, inversion remains mathematically defined but returns the new collage, not the original. State this in captions. Haar wavelet collage documentation should never use “lossless edit” when a threshold discarded coefficients or an 8-bit export clipped reconstructed values. Precise language lets creative destruction remain intentional instead of being disguised as technical magic.

Run inverse reconstruction after every operation and compare against the intended branch. Untouched coefficients should match the source tolerance; edited coefficients should match a stored recipe and produce a deliberate difference.

Build the browser pipeline away from input

Decode an image, draw or read it through Canvas with explicit dimensions, obtain pixel data, convert to the working color representation, transform channels, compose bands, invert, and write a new image. Large images should process in a worker or otherwise avoid blocking input; transfer buffers deliberately and cap dimensions before allocation. Preserve an accessible static result and textual band recipe when interactive Canvas is unavailable.

Compare the method with quadtree mosaics, WebGPU generative art, SVG filter textures, and offscreen canvas posters. Those approaches allocate detail by geometry, shaders, filters, or worker rendering. Wavelet bands are the right material when scale and directional detail—not merely tiling or texture—drive the composition.

Canvas image processing should happen in a worker or bounded task, with decoded dimensions and memory estimated before allocation. Preserve original bytes and transform arrays outside the display canvas so resizing cannot destroy evidence.

Runnable artifact: The dependency-free four-pixel fixture applies one orthonormal-style Haar step and reconstructs every original value exactly. Save it as haar-roundtrip.test.mjs and run node haar-roundtrip.test.mjs. Expected final line: PASS: Haar pixels round-tripped.

import assert from "node:assert/strict";
const forward=([a,b,c,d])=>[(a+b+c+d)/2,(a+b-c-d)/2,(a-b+c-d)/2,(a-b-c+d)/2];
const inverse=([ll,lh,hl,hh])=>[(ll+lh+hl+hh)/2,(ll+lh-hl-hh)/2,(ll-lh+hl-hh)/2,(ll-lh-hl+hh)/2];
const pixels=[12,48,90,22];assert.deepEqual(inverse(forward(pixels)),pixels);
console.log("PASS: Haar pixels round-tripped");

Publish the source and edition ledgers

The source ledger includes image rights, filenames and hashes, dimensions, orientation, color and alpha policy, resize filter, transform convention, levels, boundary mode, coefficient array hashes, untouched reconstruction error, and reference-library parity. The edition ledger adds selected sources per band, masks, gain curves, thresholds, palette or color conversion, crop, output profile, browser and hardware, code hash, and final assets. Keep the analytical coefficient data when size and rights permit.

A Haar wavelet collage is compelling because exact engineering and expressive recombination can coexist without being confused. Prove the unedited round trip, visualize signed bands honestly, make each edit addressable, and reconstruct through one tested inverse. The final image can be rough, surprising, and materially layered while its technical story remains unusually clean: structure and detail separated, redirected, and reunited under an authored recipe.

The final package should contain two explicit receipts. The analysis receipt proves that untouched coefficients under the pinned transform, boundary, channel, and numeric policies reconstruct the source within the promised error. The edition receipt admits that the Haar wavelet collage changes selected bands, then names every source, mask, gain, threshold, reconstruction, color conversion, and crop responsible for the new image.

Show the source, signed coefficient map, untouched reconstruction difference, edited-band recipe, and final collage in one sequence. A reader can then distinguish mathematical reversibility from artistic intervention without reducing the work to a tutorial screenshot. Repeat the source proof after transform or Canvas changes, and repeat the physical proof when profile, paper, or scale changes. The strongest result lets coarse identity and borrowed directional detail remain visible while the ledger explains exactly where one image stopped and the authored edition began.