Drag through bezier paths + draw bezier path on Canvas

[pedropauloalmeida]

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

[Diaco]

Hi pedropauloalmeida 

 

i think these demos can help you : 

 

See the Pen zGZRqY by MAW (@MAW) on CodePen

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

[Carl]

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.