Commit 6a69803
fix(draw): use circular offset distribution for draw-style geo shapes (tldraw#8466)
In order to fix spiky artifacts on draw-style geometric shapes caused by
a square random offset distribution, this PR replaces the independent
x/y offset sampling with a circular distribution using a unit vector and
sqrt-scaled magnitude.
The previous implementation sampled x and y offsets independently,
creating a square distribution where corners (both values at extremes)
produced visually jarring spikes. The new implementation generates a
random unit vector for direction and applies `sqrt()` to the random
magnitude for uniform area distribution within a circle, producing
smoother, more natural-looking hand-drawn paths.
<img width="1012" height="645" alt="image"
src="https://github.com/user-attachments/assets/f892a196-c43a-4eea-b765-a6d3ccb1dbd2"
/>
<img width="637" height="650" alt="image"
src="https://github.com/user-attachments/assets/4ec129be-9b2d-4848-bce3-a9df2337ffbe"
/>
Closes tldraw#7637
### Change type
- [x] `bugfix`
### Test plan
1. Create geo shapes (rectangle, ellipse, polygon, etc.) with the "draw"
style
2. Verify the shapes look natural without spiky artifacts at vertices
3. Compare with the previous rendering — shapes should look smoother
overall
- [x] Unit tests
### Release notes
- Fix spiky artifacts on draw-style geometric shapes by using a circular
random offset distribution instead of a square one.
### Code changes
| Section | LOC change |
| --------------- | ---------- |
| Core code | +11 / -3 |
| Tests | +10 / -10 |
| Automated files | +18 snapshots updated |
---------
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>1 parent 32a2514 commit 6a69803
20 files changed
Lines changed: 18 additions & 13 deletions
File tree
- apps/examples/e2e/tests
- export-mermaid-snapshots.spec.ts-snapshots
- export-snapshots.spec.tsx-snapshots
0 commit comments