bezier circle

[jjletho]

Hi

I'm working on a loader, using bezier to draw a circle. But following math I got a straight line at the top of my path.

 

my tween is basically

TweenMax.to(pillole[e],5, {bezier:{
type:"cubic",
values:[{x:0, y:r},{x:-c*r, y:r}, {x:-r, y:c*r}, {x:-r, y:0},{x:-r, y:0}, {x:-r, y:-c*r}, {x:-c*r, y:-r}, {x:r, y:-r},{x:0, y:-r}, {x:c*r, y:-r}, {x:r, y:-c*r},{x:r, y:0}, {x:r, y:0}, {x:r, y:c*r}, {x:c*r, y:r}, {x:0, y:r}], autoRotate:false},repeat:1,ease:Linear.easeNone,yoyo:false});

any thought???

 

cheers

 

marco

See the Pen RPEEMx by anon (@anon) on CodePen.

[OSUblake]

I didn't look at your math, so I don't know what you did, but a circle is octagon shaped.

 

Here's an example using SVG. I added some extra code in there to help visualize it, but the bezierPlugin is using data from the values array.

 

See the Pen xGmMzj by osublake (@osublake) on CodePen.

[GreenSock]

Nice job, Blake!

[Diaco]

Hi jjletho 

 

pls try this :

var R = 200 ; 
TweenMax.to("#myObj", 5 ,{
bezier:{curviness:1.5,values:[{x:0,y:0},{x:-R/2,y:R/2},{x:0,y:R},{x:R/2,y:R/2},{x:0,y:0}]}
,ease:Power0.easeNone,repeat:-1});

btw in this case you can have same motion with this :

var R = 200 , El = document.getElementById('myObj') ;
TweenMax.to(El, 5 ,{ transformOrigin:"50% "+(R/2+El.offsetWidth/2)+"px", rotation:360 , ease:Power0.easeNone , repeat:-1 });

See the Pen bdOJmz by MAW (@MAW) on CodePen.

 

[OSUblake]

I like Diaco's second solution for creating circular motion. There's no point in using a Bezier if you don't need to.

 

I updated the my example using the ratio you are using, which is a lot more accurate.I added a real circle to test it, and it's spot on.

 

Ratio: 0.552284749831

Source: http://stackoverflow.com/a/27863181/2760155

 

CodePen: 

See the Pen xGmMzj by osublake (@osublake) on CodePen.

[jjletho]

thanks Blake and Diaco! you did a very good explaination

 

I also did a svg circle from bezier correctly but not using the same coords as a path with bezier plug-in.

Btw your solutions are brilliant and will help me very much!

 

jj