adding tutorial for spline - #987
Conversation
davepagurek
left a comment
davepagurek
left a comment
There was a problem hiding this comment.
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?
|
|
||
| ### 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.
I almost wonder if we should start with beginShape/endShape right after showing a single spline() 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 including splinePoint/splineTangent under the advanced section?
|
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.
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.
As before, I think a very simple image might be a helpful complement to the text
ksen0
left a comment
ksen0
left a comment
There was a problem hiding this comment.
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.
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.
"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.
"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.
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.
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 - maybe the introduction in this video specifically can be an inspiration, or at least a linked resource people could check out?
Clarified the definition of splines in the introduction.
perminder-17
left a comment
perminder-17
left a comment
There was a problem hiding this comment.
Will add the images soon, thanks for the review @ksen0 and @davepagurek
ksen0
left a comment
ksen0
left a comment
There was a problem hiding this comment.
Hi @perminder-17 ! I was going through past work and saw this - Are you still working on it?
|
Hi @perminder-17, following up on @ksen0's comment from April, are you still working on this? Thank you. |
Really sorry @ksen0 and @Nwakaego-Ego , I just forget about this. Yes, I'll be completing this one Asap! Thanks for the reminder. |
|
Really sorry for the delay in this @ksen0 @Nwakaego-Ego , I totally forgot about this one. Do you mind taking a look, if everything looks fine? |
4 participants
This is a WIP PR and will try to complete it as soon as possible.