demo ~ plane donut r2
theo-armour opened this issue · comments
Admittedly still only a linear interpolation.
But there is individual algorithmic access to every vertex during the entire process. Therefore it should be possible to create meaningful paths between start and finish points.
But the main thing this script shows is that the code does not have to be very complex. Nor does it need external dependencies.
- Gently slide the lerp slider from left to right
- Works only once. Reload to do it again
Very nice indeed.
I especially the use of the geometry object to hold its own code
And the use of updating the vertices via code will always be better than lerping.
BTW, I find the actual use of the Three.js lerp and lerpVectors to be tricky, but I am still low on the learning curve
BTW, what is the name of this unfolding function?
I've added a file to your demos because my previous link was temporary:
http://jaanga.github.io/demo/pm/plane-donuts/plane-to-cylinder-elliptic-trajectories.html
The initial and final points of all vertices are stored as parameters in the geometry (z0===0 for all vertices). The vertices are then moved along elliptic trajectories. An ellipse is parametrized by
x = major axis * cos( t )
z = minor axis * sin( t )
The horizontal center of each ellipse is the parameter xf for each vertex, and the major axis is the difference between xf and x0 for each vertex. The vertical center of each ellipse is always z=0, and the minor axis is the parameter zf for each vertex.
He's a different version using involute trajectories:
http://jaanga.github.io/demo/pm/plane-donuts/plane-to-cylinder-involute-trajectories.html
The difference is that the sheet is thought of as being stretched tautly while being wound and unwound. Since the curve known as an involute of a circle only describes the ends of the sheet and not the points in between, a direct construction is used to generate the animation rather than parametrization of trajectories.
EDIT: the point in between are described by rotated and translated bits of the involute. The explicit construction is still simpler to grasp.
The same initial and final points are stored as parameters in the geometry. At each time step a point on the circle of the cylinder's cross section is calculated. The variable "extension" gives how much of the plane extends beyond the arc length to the point on the circle. If there is anything greater than zero, a line is drawn tangent to the circle at the point. The slope of this line is the derivative of the circle at that point, which is -xCir / ( zCir - radius ). The line doesn't blow up for zCir = radius because t=PI/2 and cos(PI/2)=0, cancelling the singularity.
Paul
Simply beautiful.
I had had a glimmer of the 'involute' in my brain last week, but there was
no way I could code it.
BTW, adding 'overflow: hidden;' to the style of the style of the body
element causes the scroll bars to disappear - cleans up the display
Theo
On Sat, Apr 23, 2016 at 4:23 PM paulmasson notifications@github.com wrote:
He's a different version using involute trajectories:
http://jaanga.github.io/demo/pm/plane-donuts/plane-to-cylinder-involute-trajectories.html
The difference is that the sheet is thought of as being stretched tautly
while being wound and unwound. Since the curve known as an involute of a
circle only describes the ends of the sheet and not the points in between,
a direct construction is used to generate the animation rather than
parametrization of trajectories.The same initial and final points are stored as parameters in the
geometry. At each time step a point on the circle of the cylinder's cross
section is calculated. The variable "extension" gives how much of the plane
extends beyond the arc length to the point on the circle. If there is
anything greater than zero, a line is drawn tangent to the circle at the
point. The slope of this line is the derivative of the circle at that
point, which is xCir / ( zCir - radius ). The line doesn't blow up for zCir
= radius because t=PI/2 and cos(PI/2)=0, cancelling the singularity.—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#2 (comment)
PS
Shouldn't this work be in Exploratoria?
On Tue, Apr 26, 2016 at 1:27 AM Theo Armour theo@evereverland.net wrote:
Paul
Simply beautiful.
I had had a glimmer of the 'involute' in my brain last week, but there was
no way I could code it.BTW, adding 'overflow: hidden;' to the style of the style of the body
element causes the scroll bars to disappear - cleans up the displayTheo
On Sat, Apr 23, 2016 at 4:23 PM paulmasson notifications@github.com
wrote:He's a different version using involute trajectories:
http://jaanga.github.io/demo/pm/plane-donuts/plane-to-cylinder-involute-trajectories.html
The difference is that the sheet is thought of as being stretched tautly
while being wound and unwound. Since the curve known as an involute of a
circle only describes the ends of the sheet and not the points in between,
a direct construction is used to generate the animation rather than
parametrization of trajectories.The same initial and final points are stored as parameters in the
geometry. At each time step a point on the circle of the cylinder's cross
section is calculated. The variable "extension" gives how much of the plane
extends beyond the arc length to the point on the circle. If there is
anything greater than zero, a line is drawn tangent to the circle at the
point. The slope of this line is the derivative of the circle at that
point, which is xCir / ( zCir - radius ). The line doesn't blow up for zCir
= radius because t=PI/2 and cos(PI/2)=0, cancelling the singularity.—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#2 (comment)
Yes it should be in Exploratoria and will get there...
My template on Exploratoria does have 'overflow: hidden', just not my offline template until now. Curiously this leaves a one-pixel white line at the bottom of the window in Firefox that can be fixed with 'border: 1px solid black'. Does this happen in Chrome? Got a better fix?