Mesh warp guide
Every control
Every control in the panel, top to bottom. Display and Info start closed; tap their titles to open them.
Load and save
They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them.
- Image AButton
- Your picture. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. A new picture starts a fresh grid.
- SwapButton
- Changes which tile Mesh warp bends, so a picture you added as B in another tool can be used here. When the other tile is empty, the sample comes back.
- Image BButton
- A second kept picture. Mesh warp bends one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
- Save PNGButton
- Saves the bent picture as mesh-warp.png, without the grid or points.
- Record videoButton
- Starts recording the canvas as a video. Press it again, now named Stop recording, to save the file. See record video.
- CopyButton
- Copies the bent picture to the clipboard, without the grid or points. See clipboard.
Image
Here, a line shows the size of your picture, and the size it was fit to when it was bigger than 800 pixels.
Grid
- Grid sizePick one · 3×3 · 4×4 · 5×5 · 6×6 · 8×8 · 10×10 · 12×12
- How many points go across and down. Picking a size starts a fresh grid: your bends, pins and undo steps are cleared.
- 3×3: Nine points. Broad, simple bends.
- 4×4: Sixteen points.
- 5×5: Twenty-five points.
- 6×6: Thirty-six points. The size the page opens with.
- 8×8: Sixty-four points.
- 10×10: A hundred points, for smaller, closer bends.
- 12×12: A hundred and forty-four points. The finest grid.
Brush
- RadiusSlider · 1 to 5 · starts at 2
- How far the pull of a drag reaches, counted in grid steps. At 1, only the point you drag moves.
- StrengthSlider · 0.1 to 1 · starts at 0.6
- How much the nearby points follow the one you drag. At 1 they follow as fully as the falloff allows. The point you drag always moves all the way. See warp strength.
- FalloffPick one · Linear · Gaussian · Sharp
- How the pull fades from the point you drag to the edge of the radius. See falloff.
- Linear: Fades evenly with distance.
- Gaussian: Strong near the point, then fading smoothly, like a bell curve. See Gaussian falloff.
- Sharp: Full pull for the first part of the radius, then an even fade to nothing.
Presets
- Wave · Bulge · Pinch · Twist · Flag · Shear · Barrel · RandomPick one
- Bends the whole grid in one go. Each preset starts from the rest pose, so it replaces your bends instead of adding to them. Pinned points stay put, and Undo takes a preset back. See preset.
- Wave: Soft waves across and down.
- Bulge: Swells the middle outward. See bulge.
- Pinch: Pulls the middle inward. See pinch.
- Twist: Turns the middle more than the edges. See twist.
- Flag: A ripple that grows towards the right edge, like cloth on a pole. See flag wave.
- Shear: Slides the top edge one way and the bottom edge the other. See shear.
- Barrel: Pushes the points outward, more the further they are from the middle, so the edges bow out. See barrel distortion.
- Random: Nudges every point a small, random amount. Each press gives a new result.
Animation
- AnimateOn or off · starts off
- Moves the grid on its own in a loop. While it plays, it sets every point that is not pinned, so drags and presets do not stay. Turned off, those points go back to the rest pose. See warp animation.
- Animation modePick one · Wave · Breathe · Flag · Twist
- The movement Animate plays.
- SpeedSlider · 0.2 to 5 · starts at 1.5
- How fast the movement plays.
- AmplitudeSlider · 0.05 to 1 · starts at 0.4
- How far the points move. See amplitude.
Display
- Show gridOn or off · starts on
- Draws the grid lines over the picture. See grid overlay.
- Show pointsOn or off · starts on
- Draws the control points. Turn it off to see the picture alone; you can still drag where the points are.
- Point colorColour · starts #10B981
- The colour of points that have not moved. Moved, pinned and dragged points keep their own colours.
- Point sizeSlider · 3 to 12 · starts at 5
- How big the points are drawn. Bigger points are also easier to catch.
Actions
- UndoButton
- Steps back one change: a drag, a reset point, a preset or Reset mesh. Up to 50 are kept. It does not bring back pins. See undo.
- Reset meshButton
- Puts every point back in the rest pose and clears the pins. The grid size and settings stay, and Undo can take the points back.
Info
Four counts: how many points the grid has, how many are pinned, how many have moved, and how many undo steps are kept.
Reset
- ResetButton
- Puts every setting back to how the page opened, with a fresh 6 × 6 grid, no pins, no undo steps and Animate off.