Contour
Open studio
Contour is a design tool for original line artwork, where you place peaks and ridges on a sheet, drag them, and the lines follow
Every plate above is a live drawing. The tint under the lines is built from the same paths, so it moves with them. The paper relief is cut from those tint shapes, so each sheet of card ends exactly on a line, and each shadow is its own sheet made a little larger about the point under the lamp.
Export gives you what is on the stage: an SVG where every line stays its own path, a relief where each outline is written once and reused, or a wallpaper or poster drawn from the same field at a new shape. The address of this page always holds the drawing you see, so a link brings it back.
How a drawing is made
Five things happen between a point you drag and a file you can open. The figure takes the plate on the stage apart into those five, so every number beside it belongs to that drawing and changes when you change it.
The same line, before and after
The grid gives every line a node at each grid edge it crosses, which is far more than its shape needs. Simplifying keeps the nodes that hold the shape, and a proof limits how far any path can move. Slide along one line of the repo's Quiet ridge scene to see both versions on the grid they came from.
- Node from the grid
- Node kept in the file
- Proved bound, 0.221 units either side
Loading the measured scene
12,104to1,771
19,312to5,506
Grid error is a different distance, from the extracted lines to the true ones. It reaches about 0.79 units at one near-flat saddle on this scene, simplifying does nothing to it, and no export bound includes it.
What the worker buys, and what it costs
I expected the worker to make drafts faster, and it does not. A trip to the worker and back costs more than a small draft does. What it prevents is a frozen page, which is why the page still uses one.
The page keeps moving
The worker is the slowest, and misses the target here
Stress scene with a 1024 grid and 64 levels, the same scripted drag, the mean of 5 runs with the lowest and highest run marked, on one laptop. The target was set for the lighter scene, where the worker meets it at 17 ms against 10 ms on the main thread.
How it was checked
Six plates
Each plate is a field with its own print. The first three are the repo's starter scenes and the other three were placed by hand for this project. Nothing is traced.
The studio
The studio is the same drawing engine with the rest of the tools: ridges you draw yourself, exact numbers, scene files, the relief with its lamp, and React export.
Open studioLimits
- All timings come from one fast laptop.
- The numbers above were measured on plain lines, and the plates here are drawn at this stage's frame with tint, so the export panel reports each file's own size.
- Grid error is not part of the proved bound and reaches about 0.79 units on the quiet ridge.
- Exports are polylines, so smooth lines need many nodes, and tint repeats each line as a filled shape.
- A relief shadow is a few flat copies of its sheet, so it has steps where a real shadow is soft, and the relief file has only been opened in Chromium and resvg.
- I checked path editing in paper.js but have not tested Figma, Illustrator or Inkscape.
- Nobody outside this project has used it yet.