The first thing is to write a function to draw a bezier curve. I could have used
lines, but I feel bezier curves look nicer.
I use a very simple algorithm, which can be visualized with this animation:
https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm
- We have point Q0(t) which varies from P0 to P1.
- We have another point Q1(t) which varies from P1 to P2.
- A third point Q2(t) varies from P2 to P3.
- We then compute R0(t) which varies from Q0 to Q1
- We compute R1(t) which varies from Q1 to Q2
- We then get the final point we are interested by varying R0 to R1.
https://pomax.github.io/bezierjs/
http://pomax.github.io/bezierinfo/
http://microbians.com/?page=math&id=math-quadraticbezieroffseting
http://www.scratchapixel.com/lessons/advanced-rendering/bezier-curve-rendering-utah-teapot