N Numbrush Get Numbrush

Where the numbers sit inside a region

The centre of a crescent is not inside the crescent. Placing a label is a harder problem than it looks, and getting it wrong fails quietly.

A number has to end up inside the region it labels, and for most shapes that is easy. Then you meet a crescent, whose middle is not inside it.

Why the middle of the box is the wrong middle

The obvious way to place a label is to take every pixel of a region, find the smallest and largest x and y, and put the number in the centre of that rectangle. It is a few lines of code, runs in a single pass, and for a petal or a rough disc gives an answer nobody would argue with.

Now take a crescent. Its bounding box spans both horns and the outer arc, and the centre of that box falls in the hollow — inside the rectangle, outside the shape, on top of whatever neighbouring region occupies that space. A ring is worse: the box centre is the hole. An L-shape puts the number in the notch; a shallow arc puts it off the curve entirely.

None of this is exotic geometry. Rings, crescents, arcs and petals are what pattern work is made of, so on a mandala the broken cases are a large minority of the regions rather than a rare exception. And the failure is quiet: the number is drawn, it is perfectly legible, it is simply sitting on the wrong region. Somebody reads it, aims there, and taps — and because a tap on a region that does not belong to the selected colour does nothing at all, they get no fill and no explanation.

What a visual centre is

The point you actually want is not a centre in the arithmetic sense. It is the place a person would put a finger if you asked them where the middle of the shape was: the deepest part of the interior, with room around it in every direction.

There is a clean way to define that. For every pixel inside the region, ask how far it is from the nearest boundary. Most are close to an edge; a few, in the fattest part of the shape, are far from all of them. Take the pixel where that distance is greatest and you have a point inside the region by construction, as far from its edges as the shape allows. On a disc it agrees with the box centre; on a crescent it lands in the thickest part of the arc; on a ring, on the band.

It comes with a useful byproduct: that maximum distance is the radius of the largest circle fitting inside the region, so it also says whether there is room for a two-digit number.

In Numbrush these anchor points are computed once, off the device, in the pipeline that produces the artwork, at the same stage as the region-id map. Drawing a label at runtime is reading a coordinate decided when the picture was made.

The same stage removes shapes that would defeat any anchor. Regions below an area floor are merged into their neighbours: a sliver too thin to hold a number is also too thin to hit with a finger. Fixing the label problem and the tapping problem is the same edit.

Why the numbers are often not there at all

Below a zoom threshold there is no room for them

Numbers are drawn only above 1.8 times fit scale; below that they are absent entirely, which surprises people who expect the numbers to be on show at all times.

The reason is arithmetic. At fit scale a small region can be four or five image pixels across, and a digit sized to fit inside it would be smaller than the region. A number too small to read is not information but texture, laid over the artwork you were trying to look at.

How do you know what to fill, then? The digit was never the primary channel. Selecting a colour marks every unfilled region of it across the whole canvas at once, in one of three highlight styles, so zoomed out you are matching a highlight rather than reading a number. The digit is for checking a particular region, and by then you are usually zoomed in anyway.

And a cap on how many appear at once

Above the threshold there is a second limit: at most four hundred labels in a frame. Two things motivate a cap. Each label is laid-out text, a genuinely different cost from a fill — a fill is one byte of state and a rebuilt palette strip, a label is glyphs positioned and rasterised. And four hundred numbers on one screen already reads as a page of digits rather than a picture.

The practical consequence on a dense mandala: if you are just above the threshold and some regions have no number, zoom in further. Fewer regions are in view, so more of them fit under the cap.

Label placement is invisible when it is right. Nobody notices that the number in a crescent sits on the arc rather than in the hollow beside it; they only notice the version where it does not, and even then they tend to blame their own reading. The obvious answer is wrong, and it is wrong in a way that looks like the reader’s mistake.

Frequently asked questions

Why is there no number in some regions?

Either you are below the zoom threshold, or the label cap has been reached. Numbers appear only above 1.8 times fit scale, because below that a digit sized to fit a small region would be too small to read, and at most four hundred are drawn at once. Zooming in further fixes both, since fewer regions are in view.

Why is the number not in the centre of the region?

Because the centre often is not inside the region. The centre of a crescent’s bounding box falls in the hollow between its horns, and the centre of a ring is the hole. Labels are anchored instead at the deepest interior point — the spot furthest from any boundary — which is inside the shape by construction and has the most room around it.

How do I know what colour a region is when no number is showing?

Select a colour and every unfilled region belonging to it is marked across the whole canvas at once, in whichever of the three highlight styles you have chosen. At fit scale that is the channel to use; the digits are for checking a specific region once you are zoomed in.

Are the label positions worked out while the app runs?

No. They are computed once in the pipeline that produces the artwork, at the same stage as the region-id map, and shipped with the picture. At runtime, drawing a number is reading a coordinate that was already decided.

Try it on a real canvas

Numbrush is colour by number for adults: mandalas, rose windows and geometric pattern work, twelve colours a picture, a magnifier for the tight spots, and a wrong tap that costs you nothing. Free, offline, no ads and no account.

Download on the App Store

Related guides

All guides