Tool: Morph / Liquify – Bildverformung im Browser

Bild laden und mittels Morphing bearbeiten

Die Bearbeitung läuft vollständig im Browser – es werden keine Daten übertragen.

Touch/Tablet: Ziehen = Morph. Scrollen in der Scrollbox bleibt möglich.
Shortcuts (falls Tastatur): Z=Undo, Y=Redo, O=Overlay, M=Mask, E=Export

Morph-Tool: Kurzanleitung zu den Modi und Kontrollelementen

Modus-Einstellungen (Morph-Werkzeuge)

Im Dropdown „Modus“ wird ausgewählt wie das Bild beim Ziehen mit dem Pointer/Finger verformt wird.

  • Push (Drag): Schiebt Pixel in Zugrichtung mit – wie „verflüssigen/verschieben“.
  • Pull: Zieht Umgebung zum Pinselzentrum hin (sogartig, „ranholen“).
  • Pinch: „Kneift“/komprimiert Richtung Zentrum (stärkerer Zug zur Mitte, wirkt wie Zusammenziehen).
  • Smooth: Glättet die Verzerrung (mischt/beruhigt das Verschiebungsfeld), praktisch um Artefakte zu reduzieren.
  • Freeze Paint: „Maskiert“ Bereiche – eingefrorene Pixel werden bei Push/Pull/Pinch/Smooth nicht mehr verändert.
  • Unfreeze: Hebt die Freeze-Maske wieder auf (macht Bereiche wieder editierbar).

Wichtige Kontrollelemente (Header)

  • Datei: Bild lokal laden.
  • Kamera: Webcam-/Kamera-Dialog öffnen (Foto aufnehmen → Bild wird übernommen).
  • Rebuild: Bild/Canvas neu auf Fensterbreite fitten (Auto-Fit).

Pinselparameter

  • Pinsel: Radius/Größe des Wirkbereichs.
  • Stärke: Intensität der Verformung bzw. beim Smooth die Mischstärke.

Verlauf / Rückgängig

  • Undo / Redo: Schrittweise zurück/vor (auch per Tastatur Z/Y).
  • Reset: Setzt Verformung + Freeze-Maske komplett zurück (neuer History-Schritt).

History-Leiste (Thumbnails)

Jeder Stroke landet als Schritt; Klick auf ein Thumbnail stellt den Zustand wieder her.

Overlays & Masken

  • Original-Overlay: Legt das Original halbtransparent über das Ergebnis, zum Vergleich.
  • Alpha: Transparenz des Original-Overlays.
  • Mask-Overlay: Zeigt die Freeze-Maske als rotes Overlay (praktisch zum Kontrollieren, was „eingefroren“ ist).

Ansicht / Bedienung

Zoom: Skaliert die Anzeige (nur Darstellung, nicht die interne Bildauflösung).

Scrollbox-Höhe: Höhe des Scroll-Bereichs (Slider + Zahlenfeld).

Export

Export mit Overlay: Wenn aktiv, wird beim Export das Original-Overlay (mit Alpha) mit in die PNG gerendert.

Export PNG: Speichert das aktuelle Ergebnis als PNG.

Kurzbedienung

Touch/Tablet: „Ziehen = Morph“, Scrollen in der Scrollbox bleibt möglich.

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

Erklärung des Morphing-Algorithmus

Der Morphing-Algorithmus arbeitet intern wie ein Liquify-Warp: Für jedes Pixel wird ein Verschiebungsfeld gespeichert (zwei Arrays dx/dy, je Pixel ein Versatz), das beim Laden des Bildes initial auf 0 gesetzt wird.

Beim Rendern wird dann inverse Abbildung erzeugt: Für jedes Zielpixel(x,y) wird die Quelle an (sx,sy)=(x−dx,y−dy) abgetastet und per bilinearer Interpolation (zwischen den vier Nachbarpixeln) gemischt, damit der Warp weich aussieht und keine Treppchen entstehen.

Die Werkzeuge (Push/Pull/Pinch) verändern dieses Verschiebungsfeld lokal innerhalb eines Pinselradius: Es wird eine Distanz-abhängige Falloff-Kurve berechnet und daraus ein „amount“ (aus Stärke und Bewegungsanteil), der dann in dx/dy addiert wird; „Freeze“ setzt eine Maske (frozen), wodurch betroffene Pixel beim Verformen übersprungen werden.

'Smooth' glättet das Feld, indem es in der Region jeweils Nachbarschaftsmittelwerte (3×3) berechnet und die aktuellen dx/dy-Werte kontrolliert in Richtung dieser Mittelwerte blendet.