Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hayesmaker

Using BezierThrough

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×