processing / processing/p5.js

Smoother splines than catmull-rom?

Open
#8,329 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Discussion
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Topic

@dhowe was mentioning to me that sometimes when making shapes with splineVertex, you end up with sharp-looking edges where one wouldn't expect it. e.g. on the right here:

Image

This happens because the bezier equivalent of catmull-rom curves puts control points on either size of a given by going +/- one sixth of the distance from the previous to the next point (scaled up or down by the tightness parameter.)

Image

This means that the bezier control points will be an equal distance on either side, which generally looks OK but breaks down when the distance to the next point is a lot larger than the distance to the previous point.

However, we don't need them to be equidistant. It'll still look continuous as long as they lie on the same line. So one thing we could do make the distance on each side relative to just the distance from the middle to the next or to the previous point.

Image

This gives us something like the following:

Image

I have a little demo here where you can click to add points. When asymmetric tangents are allowed, that's the updated version: https://editor.p5js.org/davepagurek/sketches/TYV8cCxze

Is something like this significant enough to be worth considering? It's a subtle but still breaking change. We've talked in the past about having different splineMode()s, of which this could potentially be one. (Possibly as an addon if scaffolding for adding spline modes is added in core?)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the splineVertex and splineMode APIs described in the issue, then compare the linked interactive demo with the current Catmull–Rom behavior. Review how spline modes could be represented and decide whether asymmetric tangents belong in core or an addon; done means an agreed design for the smoother mode and its compatibility implications.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.