Pixi.js: Create bezier curves as Pixi.Graphics

[tleunen]

Currently, it's only possible to create lines, circles and ellipses. But in the case where we need to create some other complex forms, the current design doesn't allow it.

Would it be possible to add a way to create bezier curves?

[englercj]

For the time being, you can draw anything to a canvas and use that as a texture.

[tleunen]

Yes but in that case you can't use it as a mask for another sprite :/

[englercj]

@tleunen Which is why we should have texture masks :)

[tleunen]

If we can have texture masking, it's even better! :D Is it something planned for 1.5?

[englercj]

@tleunen Nope! Because the few methods for canvas that exist are super expensive. If we can find a good way to make it work in canvas I will start experimenting with it. Nothing on the books yet though.

[mattdesl]

For the time being, you can just turn the curves into a discrete set of points with a fixed (or variable) step size.

I have a utility that might prove useful: shape2d. Sorry for the lack of docs; usage looks like this:

var Shape = require('shape2d');

var s = new Shape();
s.steps = 10; //number of steps for our curves..

s.moveTo(x, y);
s.quadraticCurveTo(cpx, cpy, x2, y2);
s.lineTo(x3, y3);

//----> s.points is now an array of {x, y} objects representing your path

You can then feed the points into PIXI.Graphics to get WebGL/Canvas rendering.

[ryedin]

@mattdesl +1 and thank you for that. Definitely going to be using that to create my elastic animated ropes :)

[proyb2]

There is a missing dependency from Shap2d which require Interpolation library.

Can anyone advice a simple method for drawing curve?

[mattdesl]

In shape2d, you can do npm install interpolation --save to fix that.

Thanks for letting me know, I'll update the repo soon.

Sent from my iPhone

On Apr 8, 2014, at 6:47 AM, proyb2 [email protected] wrote:

There is a missing dependency from Shap2d which require Interpolation library.

Can anyone advice a simple method for drawing curve?

—
Reply to this email directly or view it on GitHub.

[proyb2]

In another code, this is something nicer which I manage to integrate except the arc is always going clockwise, should have an option or anti-clockwise.
https://gist.github.com/ElliotChong/6060346

[proyb2]

Thanks mattdesl, it nice to see your code, perhaps you might considering help Pixi improve features with a few missing primitives

Finally, I got this code right using arc.drawArc(300,200,20,-45,40);

[mattdesl]

There's also an arcTo code snippet in issue #608

Sent from my iPhone

On Apr 8, 2014, at 11:06 AM, proyb2 [email protected] wrote:

Thanks mattdesl, it nice to see your code, perhaps you might considering help Pixi improve features with a few missing primitives

Finally, I got this code right using arc.drawArc(300,200,20,-45,40);

—
Reply to this email directly or view it on GitHub.

[GoodBoyDigital]

Sorted init! Finally got round to adding bezier and quadratic curve functions to PIXI.Graphics in the dev branch. Better late than never right? Enjoy! :+1:

[niclaslindberg]

Hi, Is bezier curves part of pixi.js now, two years later?

Interesting!

Thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.