- Notifications
You must be signed in to change notification settings - Fork195
adding tutorial for spline#987
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:2.0
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
davepagurek left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
One other thought: do we want to include a mention of beziers here for comparison? Maybe something about why you'd want to use one or the other even if we don't explain the whole bezier API?
Uh oh!
There was an error while loading.Please reload this page.
| ### Advanced Spline Shapes and Customization | ||
| So far we've been drawing a single curve segment defined by four points. Now, let's explore more advanced possibilities: creating complex shapes from multiple spline segments, closing splines into continuous loops, and customizing the spline’s properties (like its tightness or endpoint handling) to achieve different effects. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I almost wonder if we should start withbeginShape/endShape right after showing a singlespline() as the main thing in the tutorial, since I imagine drawing bigger curves and smooth closed curves is a more common use than getting points/tangents along a single segment.
How do you feel about moving this + the closed loop bit up, giving them their own headings (e.g. "Spline Shapes" and "Closed Spline Loops" or something like that?) and then includingsplinePoint/splineTangent under the advanced section?
davepagurek commentedNov 30, 2025
cool thumbnail for the article btw! |
| *Splines vs. Bezier Curves* | ||
| `bezier()` uses a start point, an end point, and extra control points that pull the curve but are not on the curve. | ||
| `spline()` makes a curve that passes through all the points you give. | ||
| Use `splines` when the curve must go through specific coordinates. | ||
| Use `Beziers` when you want to shape the curve with off-curve handles. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Btw, I already explain splines and bezier for comparison together. Do you mean adding more description to it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
As before, I think a very simple image might be a helpful complement to the text
ksen0 left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I really appreciate how in-depth this is! My only major request here is to complement the intro and initial descriptions with very, very beginner-friendly graphics, that require no knowledge of any trigonometry at all
| ## Introduction | ||
| Splines are smooth curves that interpolate through a series of points,forming gentle, flowing shapes. A spline is a smooth curve defined by a set of points, with a function that lets you compute additional points smoothly between them. This makes it easy to draw natural-looking curves without manually specifying tangents. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Minor: "A spline is a smooth curve defined by a set of points" -> "These curves are defined by a set of points"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
"with a function that lets you compute additional points smoothly between them" -> "and a function that determines how additional points are computed between them."
It might be better to give visual example right here of 2 different functions than to describe more verbally
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
"This makes it easy to draw natural-looking curves without manually specifying tangents." -> remove "without manually specifying tangents" as the general style of tutorials is more beginner- and learner-friendly, so cannot assume "tangents" is understood
| *Splines vs. Bezier Curves* | ||
| `bezier()` uses a start point, an end point, and extra control points that pull the curve but are not on the curve. | ||
| `spline()` makes a curve that passes through all the points you give. | ||
| Use `splines` when the curve must go through specific coordinates. | ||
| Use `Beziers` when you want to shape the curve with off-curve handles. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
As before, I think a very simple image might be a helpful complement to the text
| import Callout from "../../../components/Callout/index.astro"; | ||
| ## Introduction | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
One more comment: Though the title connects splines to curves and shapes, the introduction jumps right into splines. I think it would be very helpful to provide a very brief intro summary of when someone would need to learn about splines (when you want to make curvy shapes_
Thanks to@SableRaf for the input and for suggesting this wonderful video:https://www.youtube.com/watch?v=jvPPXbo87ds - maybethe introduction in this video specifically can be an inspiration, or at least a linked resource people could check out?
This is a WIP PR and will try to complete it as soon as possible.