Jump to content
Search Community

Coil up a SVG graphic ?

Lynx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Oh, ok. Yeah, that seems kind of complicated. Not exactly sure how that can be done. You would need to have some really precise control over every curve along a path and probably need to have some pretty solid Math skills to do it right. Definitely beyond my limits. Sorry.

Link to comment
Share on other sites

Creating realistic movement of a coil being unrolled is no easy task. Connecting all the different curves together requires using some type of transition curvature like a clothoid/euler spiral. This is what engineers use to make the geometric design of highways, railroads, and roller coasters all nice and smooth. Carl wasn't kidding around when he said that you would need some pretty solid math skills to do this. There is a lot of calculus involved, and I'm not aware of any JavaScript library that can do this.
 
A couple of weeks ago I found some font-drawing software on GitHub that does a nice job of creating curves. I was able to port the curve design code over to JavaScript and got it working with GSAP. I must say that the results are absolutely amazing. Unfortunately, when I tried putting it up on CodePen I ran into a lot of problems.
 
I never noticed this before, but CodePen runs some stupid script that injects code into your loops that is supposed to prevent infinite loops from happening. Sounds nice and all, but it does the complete opposite for this project and keeps creating infinite loops, breaking everything. I know how to fix it. I just need to convert all my loops into functions, but I really don't feel like messing with it right now. I'll get back to it in a couple of days and put it up online so you can play around with it.
 
In the meantime, here's a video of me playing around with some SVGs and Draggable. Look how easy it is to draw a path while maintaining a continuous curve. Try doing that in Illustrator and let me know how it goes.
 

  • Like 6
Link to comment
Share on other sites

Really Cool Blake! .. I have noticed lately that codepen has been running really slow when loading and re-running code. last week i was seeing system overload messages on codepen. What was the font-drawing software on GitHub called? .. you still got a link to it, Thanks!

Link to comment
Share on other sites

Creating realistic movement of a coil being unrolled is no easy task. Connecting all the different curves together requires using some type of transition curvature like a clothoid/euler spiral. This is what engineers use to make the geometric design of highways, railroads, and roller coasters all nice and smooth. Carl wasn't kidding around when he said that you would need some pretty solid math skills to do this. There is a lot of calculus involved, and I'm not aware of any JavaScript library that can do this.

 

A couple of weeks ago I found some font-drawing software on GitHub that does a nice job of creating curves. I was able to port the curve design code over to JavaScript and got it working with GSAP. I must say that the results are absolutely amazing. Unfortunately, when I tried putting it up on CodePen I ran into a lot of problems.

 

I never noticed this before, but CodePen runs some stupid script that injects code into your loops that is supposed to prevent infinite loops from happening. Sounds nice and all, but it does the complete opposite for this project and keeps creating infinite loops, breaking everything. I know how to fix it. I just need to convert all my loops into functions, but I really don't feel like messing with it right now. I'll get back to it in a couple of days and put it up online so you can play around with it.

 

In the meantime, here's a video of me playing around with some SVGs and Draggable. Look how easy it is to draw a path while maintaining a continuous curve. Try doing that in Illustrator and let me know how it goes.

 

 

Can one animate the control points ? And can one replace the curve in the video, with an image ?

Link to comment
Share on other sites

Awesome work, Blake. My mind is melting.

 

Lynx, you can animate any numeric value and apply it to anything you want. This is one of the core strengths of GSAP – it isn't tied to CSS values or any rendering layer.

 

http://codepen.io/chrisgannon/pen/OVpVBr

http://codepen.io/chrisgannon/pen/RNdrJw

 

If you intend to merge the effect Blake created with your coil image (above), no, that doesn't seem feasible.

Link to comment
Share on other sites

Thanks guys!
 
I've also noticed recent slow downs and weird errors popping up on CodePen. I think some of the problems might be related to them transitioning some things over to Amazon Web Services. However, I know my problem isn't related to that because they wrote about in their blog. Oh well, at least I now know what the problem is and can work around it.
 
The font editor is FontForge, but the part that I used is called Spiro. Everything I used was taken from the spiro.c file.
 
Lynx, everything Carl said is spot on. Animating a control point is nothing more than changing it's x, y coordinates, so nothing special about that. What makes controlling these curves so easy is that there is only 1 control point per segment, and the curve will go through that point.
 
I really don't know of a good way to use an image for a path. The only thing I can suggest is using something like a mesh in Pixi.js. This script really wasn't designed for anything like that. In fact, it's not tied to a renderer so it doesn't control how the curves are drawn. The only thing it does is calculate cubic Bezier values based on the control points you feed it. What you do with those values is up to. You could render them on a canvas, an SVG, or even use them with the BezierPlugin.

 

Even if using an image for a path was an easy thing to do, I'm having trouble understanding how that would look coiled up. It seems like the image would have to be really long and narrow, and at that point could you even recognize what the image is?

 
I didn't know this, but Inkscape actually has this effect built in. You might want to download it so you can play around with the effect. Here's a pretty good video on using it, but please note that the triangle-in feature he shows won't work with my code.

 

Link to comment
Share on other sites

Can you add more control handles to your second code pen example ?

 

Awesome work, Blake. My mind is melting.

 

Lynx, you can animate any numeric value and apply it to anything you want. This is one of the core strengths of GSAP – it isn't tied to CSS values or any rendering layer.

 

See the Pen OVpVBr by chrisgannon (@chrisgannon) on CodePen

See the Pen RNdrJw by chrisgannon (@chrisgannon) on CodePen

 

If you intend to merge the effect Blake created with your coil image (above), no, that doesn't seem feasible.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...