P5.js: Implement bezierVertex for webgl mode

[kjhollen]

Nature of issue?

• [ ] Found a bug
• [ ] Existing feature enhancement
• [x] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Other (specify if possible)

Feature enhancement details:

bezierVertex() only works in 2D mode currently, but it would be great for WEBGL mode, too.

this could be a bigger task because curveVertex and quadraticVertex need to be implemented, too—so all of these could share some common structure. see: WebGL Module Architecture for relevant documentation.

[tcoppex]

Hey @kjhollen @lmccart,

I was looking behind this issue to see what needed to be done but I'm not sure of the expectation for the 3D versions of the bezier / curve / quadratic vertex functions. For now I see two possibilities :

• Reproduce the 2D version for the 3D renderer on the plane (with z = 0) to be able to rotate the rendered shape.
• Be able to create a full 3D shape from a set of non coplanar vertices.

The first case should be doable by reusing parts from Curves' methods and possibly using a thirdparty* for triangulating the shape.

The second case seems a bit more tricky, or at least I don't quite see how to easily triangulate a 3D curve not lying in the plane (albeit it is feasible when projected on it).

Any pointers for this ?
Many thanks :+1:

*Is there any policies on using thirdparties ?

[kjhollen]

hey @tcoppex thanks for your interest! we do use some third party libraries, but also try to keep things pretty trim—so I think we probably wouldn't import a library to support a single function, but if there were other places we could use it, we'd consider! the license also matters—let me check in with Lauren to see what types of licenses are acceptable.

[AdilRabbani]

@kjhollen implementing bezierVertex is part of my third task for GSOC this summer... :/ Or should @tcoppex work on this one, and I carry on afterwards?...

[tcoppex]

Thanks for your answer @kjhollen, I'll find it interesting to implement the triangulation part internally actually, but as with many high-profile functionalities (on efficiency and somewhat complexity) it might be a good option to outsourced it at first. Otherwise I believe we could use triangulation to render font in 3D as well.

Hi @AdilRabbani, I was just poking around really but if this is part of your internship I'll be happy to let you on this :)

Cheers

[kjhollen]

sorry @AdilRabbani! I must have lost track. I'll assign this one to you for safe keeping.

[AdilRabbani]

Hey @kjhollen I have been working on this for quite some time. Everything works as expected (upon testing on documentation examples)

BezierVertex, CurveVertex and QuadraticVertex

except for one thing. Filling curves gives really weird results.

Upon looking further on the issue, revealed that there is no 'perfect way' of triangulating complex polygons...I think the best recent method I could find was this as already shared by @tcoppex and a good implementation of the same algorithm is Earcut.js.

Can we use Earcut.js to implement filling of curves? I think this would really speed up the process and the library would also save a lot of effort to be done in terms of efficiency and complexity.

Note : Drawing curves with noFill() gives good results on the implementation I'm working on (2D and 3D). I was thinking if we could add these to the library while the work on filled part can be carried on at the same time? This way people would still be able to use 2D/3D curves in p5.js WebGL mode while filled curves can be added on a later update?

@mlarghydracept you may also want to have a look at this.

[stalgiag]

@AdilRabbani The curves look great. it seems reasonable to use a package to handle the triangulation here but I am not confidently in a position to make that determination. All that I can add is that I checked out Earcut and it seems relatively concise and optimized. I know that we briefly considered bringing in a package for handling some aspect of matrix transforms in the past but never ended up doing it. @kjhollen do you know what the current stance is on bringing in outside packages for tasks like this?

I am not sure about forcing curves to have noFill. I agree that stroked curves are nice to have but I just wonder how we could effectively communicate that fill() won't work to the user. We could do a combination of a console log and a reference explanation but that feels like a bit of a clumsy stop-gap.

[stalgiag]

So @AdilRabbani and I just found out that Processing uses an external library to handle this task.(thanks for the info @codeanticode!) Maybe this is a good indication that the task is complicated enough that we should also use an external library?

[AdilRabbani]

Just found out that the tessellator being used in Processing was ported in javascript as well, named as libtess.js.

[stalgiag]

Fixed by @AdilRabbani in webgl-gsoc-18 branch with PR #3085. Will be merged into master branch at end of summer :-)