Jump to content
GreenSock

pedropauloalmeida

Drag through bezier paths + draw bezier path on Canvas

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

Hi, Folks.

 

First of all, thank you so much for all these years. You rock!

 

I am trying to make a "slider" that goes through a path made by bezier curves. My first attempt was build the animation and controll it with TimelineMax. So, when I click and drag an area I want to control a div through this curve.

 

So, my first problem

I do not know how to take the path that BezierPlugin made internally and draw it on canvas. I know there is the method 

BezierPlugin.bezierThrough. It returns an Object with two Arrays, x and y. But inside these Arrays the objects have the properties a, b, ba, c, ca, d, da and I do not know how to use them to draw the path into canvas (I always used the quadraticCurveTo method and it accepts 4 parameters. Probably this is just a simple matter of understanding how those properties work together to define the right curve points of the path.

 

The last problem

Of course, make a simple drag/drop in a linear percentage will not sync the DIV animated with my mouse position. Here is where I am a bit lost: how can I sync the position of the DIV with my mouse coordinate? Like a "curved horizontaly scroll".

 

Thank you for your help.

See the Pen VeRqXo by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

Like Diaco suggested I feel like SVG has some benefits over canvas. 

 

Using canvas if you want to render a path that you create with BezierPlugin's "thru" type, yes, the BezierPlugin.through() method will return an array of objects that define each quadratic segment (or cubic). Best to consult the docs of that method to see how each segment is broken into a, b, c values.

http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/bezierThrough/

 

I created a little demo (that I forked from our good friend Rodrigo) that illustrates how you can grab those values and pass them to the canvas quadraticCurveTo() method

 

var startX = 50;
var startY = 50;
var curviness = 2;
TweenLite.set(".div1", {x:startX, y:startY})
var points = [{x:startX, y:startY},{x:100, y:50}, {x:150, y:100}, {x:200, y:50}, {x:350, y:350}];
TweenMax.to(".div1", 2, {bezier:{values:points, type:"thru", curviness:curviness}, ease:Linear.easeNone})


//consult docs for bezierThroug() http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/bezierThrough/
var quadratic = BezierPlugin.bezierThrough(points, curviness, true);
console.log(quadratic.x)


/*CANVAS ELEMENT*/


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(startX, startY)

for (var i = 0; i < quadratic.x.length; i++) {
  // quadraticCurveTo(cpx,cpy,x,y);
  ctx.quadraticCurveTo(quadratic.x[i].b,quadratic.y[i].b, quadratic.x[i].c, quadratic.y[i].c);
}


ctx.strokeStyle = '#000';
ctx.stroke();

 

http://codepen.io/GreenSock/pen/eJoYKd?editors=0010

 

Unfortunately I don't have a good answer for how you would drag the element along the path. I suspect you will have to somehow determine proximity of the mouse coordinates to a point on the path and set the progress of the tween accordingly. This isn't something the GSAP API has baked in. I imagine some other people around here may be better at finding a solution.

  • Like 4
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.
×