Tool: Morph / Liquify – image warping in the browser

Load an image and edit it with morphing

Editing happens entirely in the browser – no data is transmitted.

Morph tool: quick guide to modes and controls

Mode settings (morph tools)

The “Mode” dropdown selects how the image is deformed when dragging with the pointer or finger.

• Push (Drag): Moves pixels in the drag direction – similar to a liquify/push tool.
• Pull: Draws the surrounding area toward the brush center.
• Pinch: Compresses toward the center, creating a tightening effect.
• Smooth: Smooths the distortion by blending and calming the displacement field, useful for reducing artifacts.
• Freeze Paint: Masks areas – frozen pixels are no longer modified by Push/Pull/Pinch/Smooth.
• Unfreeze: Removes the freeze mask again, making areas editable once more.

Important controls (header)

• File: load an image locally.
• Camera: open the webcam/camera dialog (take photo → image is imported).
• Rebuild: refit the image/canvas to the window width.

Brush parameters

• Brush: radius/size of the effective area.
• Strength: intensity of the deformation, or in Smooth mode the blend strength.

History / undo

• Undo / Redo: step backward/forward, also via keyboard Z/Y.
• Reset: fully resets deformation and freeze mask as a new history step.

History bar (thumbnails)

Each stroke becomes one step; clicking a thumbnail restores that state.

Overlays & masks

• Original overlay: places the original semi-transparently over the result for comparison.
• Alpha: transparency of the original overlay.
• Mask overlay: shows the freeze mask as a red overlay, useful for checking what is frozen.

View / operation

Zoom: scales the display only, not the internal image resolution.

Scroll box height: height of the scroll area (slider + numeric field).

Export

Export with overlay: if enabled, the original overlay including alpha is rendered into the PNG export.

Export PNG: saves the current result as a PNG.

Quick use

Touch/tablet: dragging = morphing, while scrolling inside the scroll box remains possible.

Shortcuts: Z=Undo, Y=Redo, O=Overlay, M=Mask, E=Export.

Explanation of the morphing algorithm

Internally, the morphing algorithm works like a liquify warp: for each pixel, a displacement field is stored (two arrays `dx`/`dy`, one offset per pixel), which is initialized to 0 when the image is loaded.

During rendering, inverse mapping is applied: for each target pixel `(x,y)`, the source at `(sx,sy)=(x−dx,y−dy)` is sampled and blended using bilinear interpolation between the four neighboring pixels so that the warp looks smooth and avoids stair-stepping.

The tools (Push/Pull/Pinch) modify this displacement field locally within a brush radius: a distance-dependent falloff curve is computed and used to derive an amount from strength and movement, which is then added to `dx`/`dy`; `Freeze` sets a mask (`frozen`) so affected pixels are skipped during deformation.

`Smooth` softens the field by computing local neighborhood averages (3×3) inside the region and blending the current `dx`/`dy` values toward those averages in a controlled way.