Quadratic bezier curves for Processing.js

Since Processing and respectively Processing.js don’t support quadratic curves, you are forced to construct them with a conventional cubic bezier curve. I’ve never used bezier curves before, so I took this as a lesson.

I came up at least with an implementation for quadraticBezierVertex(cpx, cpy, x, y), which you can use to create shapes.

You can put this code into a .lib file and import() it into your sketch to add support for quadratic curves to Processing.js.

The actual reason I created this was the need for flexible rounded rectangles, which don’t look smart unless you use quadratic curves for the corners. Because it’s a shape based on a path you can modify fill and stroke as usual.

Finally here’s the result. I’m using a stroke weight of 2 pixels and a 10 pixel radius for the rounded corners.

Comments are closed.


Dudes

Projects