glur VS BezierInfo-2

The fastest 2d (non-GPU) Gaussian blur "algorithm" I've come across was developed by some extremely clever Intel people and ported to Javascript in this GitHub repo. The whole separable convolutional image filters thing is a fascinating topic, even though a lot of it is beyond my mathematical understanding.

> We would really rather people use WebGL if you want fast/efficient filters.

This one made me laugh. Yes, WebGL excels at pixel manipulations but it is possible to write fast and efficient filters to work in the 2D canvas environment.

For a case-in-point, I struggled for a long time to find a decent, fast implementation of a gaussian blur filter for my canvas library. Then I stumbled upon a JS implementation[1] based on some very clever work done by Intel devs which blew all my previous attempts out of the water - so of course I stole it (even though I still don't understand the approach they take)[2].

> "Safari is the bad guy"

As much as Safari often brings me to despair, I do like the work they've recently done to add color space support in CSS. They haven't yet pushed the functionality over to the canvas element, but I live in hope. For now, I have to emulate the calculations to get them working for my library[3].

[1] - https://github.com/nodeca/glur/blob/master/index.js

[2] - https://scrawl-v8.rikweb.org.uk/docs/source/factory/filterEn...

[3] - https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html

For the bezier you need 4 control points via a click, then evaluate using lerps (or basis functions). Start here https://pomax.github.io/bezierinfo/

> How to pack geometric shapes inside other shapes https://erich-friedman.github.io/packing/

Packing / bin-packing is very serious stuff: savings made there directly translate to less waste / reduced costs (for example when cutting shapes into sheets of metal in big factories).

> * Amazing reference on bezier curves https://pomax.github.io/bezierinfo/

And some beautiful graphs in there, notably those under section 26 "Curvature of a curve". Screenshot'ed for my own collection of good looking stuff!

https://pomax.github.io/bezierinfo/#explanation

A visual overview of commonly used creative coding related techniques and algorithms.

I wrote an openGL font renderer once, it was a lot of fun. Bezier curves are such an elegant technique. The difference between what I wrote and what you'd use in a proper environment is pretty big, but I recommend it sometime.

Fonts are pretty much just third or fourth degree beziers, iirc (i may have my terminology wrong). Try it out sometime, I did mine using tessellation shaders.

Btw, you'll never find a better guide on beziers than here:

https://pomax.github.io/bezierinfo/

Alternatively you can use the equation of a cubic Bézier curve to do the computations yourself. This website offers great explanations and examples of the math behind Bézier curves: https://pomax.github.io/bezierinfo/

Btw, for Bezier math this is a great resource: https://pomax.github.io/bezierinfo/