Jump to content
GreenSock

hayesmaker

Using BezierThrough

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

Bezier Plugin Help:

 

i'd like to animate the drawing of a bezier line like one I'd see using graphics.bezierCurveTo...  I dont want to use divs or SVGs. (and I'm using  Pixijs v5 for rendering)

 

reading the docs says use BezierThrough method to draw the path using canvas graphics API... However there is no example for this.. and every example I've found online is just animating divs and SVG lines.   

 

    const bezier = new PIXI.Graphics();

    bezier.lineStyle(4, 0xAA0000, 1);
    bezier.position.x = 167;
    bezier.position.y = 409;

    let dest = {
      x: 819,
      y: 321
    };

    let localDest = {
      x: dest.x - bezier.position.x,
      y: dest.y - bezier.position.y
    };

    let cp1 = {
      x: localDest.x * 0.25,
      y: - 400
    };

    let cp2 = {
      x: localDest.x * 0.75,
      y: - 400
    };

    bezier.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, localDest.x, localDest.y);
    this.stage.addChild(bezier);

 

Thanks.

 

 

Screenshot from 2019-09-02 16-31-45.png

Link to comment
Share on other sites

1 hour ago, hayesmaker said:

i'd like to animate the drawing of a bezier line

 

What exactly do you mean by "drawing"? bezierThrough() just calculates the control points you can use to draw (as in display) a Bezier curve given a set of anchor points. It will not help you animate the drawing of a Bezier curve like the DrawSVGPlugin does.

 

There is no easy way to do what DrawSVGPlugin does in PixiJS. I can think of 2 ways you might be able to do that in PixiJS. Note that I'm not familiar with v5 of PixiJS, so maybe there is a new feature that will allow you to animate the stroke.

 

Option 1:

Animate the drawing of a stroke on a regular 2d canvas, although you don't have to use Path2D like I did.

 

See the Pen GjYpPr by osublake (@osublake) on CodePen

 

You would then use that canvas as a texture in PixiJS, which requires you to update the texture on every change. I did something similar to that approach in this demo, which was made before MorphSVGPlugin could support canvas.

 

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

 

Option 2:

Use some type of type of mesh, like a rope. 

https://pixijs.io/examples/#/demos-advanced/mouse-trail.js

 

 

  • Like 3
Link to comment
Share on other sites

Here's a little demo I did a few months ago as an answer for another thread, but maybe it'll give you some ideas. It works, but if the duration is too quick you get a chunky line.

 

See the Pen NmqowR by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Quote

What exactly do yo mean by "drawing"? bezierThrough() just calculates the control points needed to draw (as in display) a Bezier curve given a set of anchor points. It will not help you animate the drawing of a Bezier curve, like the DrawSVGPlugin does.

 

I'm referring to Greensocks own docs which says: " draw the path using the canvas's drawing API. "   (see the snippet i quoted in OP)

 

and wondering how I can do that.  It's fine if I don't use pixi for the line draw and stick to context2D.. but i'd like to avoid using SVG data which you are using in your example.

Link to comment
Share on other sites

@PointC This will do what I want.. but I dunno how to construct that path for what I want

Link to comment
Share on other sites

40 minutes ago, hayesmaker said:

I'm referring to Greensocks own docs which says: " draw the path using the canvas's drawing API. "   (see the snippet i quoted in OP)

 

I think you are misunderstanding what that says. By "draw" it means using canvas drawing commands to render the Bezier. Notice how I used .bezierThrough() to draw the blue path in this demo (the code is inside the drawThru function).

 

See the Pen 7047db2bc35bde1c480e954878a2e699 by osublake (@osublake) on CodePen

 

40 minutes ago, hayesmaker said:

but i'd like to avoid using SVG data which you are using in your example.

 

First, you don't have to use Path2D like I did. You can use regular Bezier drawing commands. 

 

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(120,160, 180,10, 220,140);
ctx.stroke();

 

However, SVG data is needed to calculate the length of the curve. That's what I pass into the getLength function. To convert the canvas code above into SVG data is real easy. 

 

"M30,30C120,160,180,10,220,140"

 

There are other ways to calculate the length of cubic Bezier curves without using an SVG and SVG data, but it requires a lot of extra work.

 

  • Like 3
Link to comment
Share on other sites

19 minutes ago, PointC said:

Here's a little demo I did a few months ago as an answer for another thread, but maybe it'll give you some ideas. It works, but if the duration is too quick you get a chunky line.

 

Yep. That's basically what this demo is doing, but it's using a mesh instead of graphics.

https://pixijs.io/examples/#/demos-advanced/mouse-trail.js

 

Link to comment
Share on other sites

It looks like you've got some solid answers here, but I wanted to chime in and mention that in the next major release of GSAP (3.0), we've got some tools that'll make this even easier. Stay tuned for that :) We're hoping to give Club members early access starting late this week or next week. 

  • Like 2
Link to comment
Share on other sites

On 9/2/2019 at 7:08 PM, GreenSock said:

It looks like you've got some solid answers here, but I wanted to chime in and mention that in the next major release of GSAP (3.0), we've got some tools that'll make this even easier. Stay tuned for that :) We're hoping to give Club members early access starting late this week or next week. 

 

Hi thanks Jack,

 

Unfortunately my 1 year Greensocks membership expired earliler this month, and I cant afford to renew for a while... So it looks like i'll miss out on the GSAP 3 update.

 

@PointC

 

Your approach is the only one doing what I want, so i'm trying to implement that... But it looks like the lineTo method gets called always from 0,0 and so it animates lines to each of the points along along the path... I made a codepen to demonstrate.

 

[Edit] With the Pixi version @PointC uses it's ok.. with Pixi 5 it's not.. so it seems to be a difference in how line graphics work between the pixi version which is causing the problem in my codepen... it's weird, because lineTo should be moving the pen to the new location each update. :S

 

See the Pen gOYXVEy by hayesmaker64 (@hayesmaker64) on CodePen

Link to comment
Share on other sites

I'm rolling back to Pixi 4.8.8 so I can make progress, thanks everyone for your help! 

Link to comment
Share on other sites

1 hour ago, hayesmaker said:

Your approach is the only one doing what I want, so i'm trying to implement that... But it looks like the lineTo method gets called always from 0,0 and so it animates lines to each of the points along along the path... I made a codepen to demonstrate.

 

Then save the last position, and use it with moveTo on every update.

 

See the Pen 8f8dda70b88d7b3a952dc6d1b9a9c42b by osublake (@osublake) on CodePen

 

 

And remember what @PointC said here.

 

On 9/2/2019 at 12:40 PM, PointC said:

It works, but if the duration is too quick you get a chunky line.

 

If the animation goes too fast, or there is some kind of computer lag, the path will skip several points, resulting in a jagged look. The fix would be to not use this technique.

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