2e:null 2f:["$","title",null,{"children":"Drawing better looking curves | Dennis Hotson | Observable"}] 34:T438,md`# Drawing better looking curves I've recently been learning about how to draw smoother curves that look more appealing. A common technique in professional CAD and font design software is to use a visualisation called a *curvature comb* to see how sharp or flat a curve is along its path. Here's an example of a curvature comb being used in [Fontlab VI](https://www.fontlab.com/font-editor/fontlab-vi/) to smooth out bumpy spots in a font:

To explain how this works, let's explore how Bézier curves work. ### Cubic Bézier curves Most vector graphics software uses [cubic Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves) to display curved lines. A cubic Bézier curve is defined by four points: P₀, P₁, P₂ and P₃. The curve starts at P₀ moving toward P₁ and arrives at P₃ coming from the direction of P₂. `35:T40a,{ const context = DOM.context2d(400, 300); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.lineTo(curve.p1.x, curve.p1.y); context.lineTo(curve.p2.x, curve.p2.y); context.lineTo(curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#AAA'; context.setLineDash([7, 7]); context.stroke(); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#000'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.font = '18px Georgia, Sans-Serif'; context.fillText('P₀', curve.p0.x - 25, curve.p0.y); context.fillText('P₁', curve.p1.x - 25, curve.p1.y + 15); context.fillText('P₂', curve.p2.x + 5, curve.p2.y + 15); context.fillText('P₃', curve.p3.x + 5, curve.p3.y); context.canvas.style.maxWidth = '100%'; return context.canvas; }36:T881,{ const lerp = (p1, p2, t) => p1.multiply(1 - t).add(p2.multiply(t)); const a = lerp(curve.p0, curve.p1, t); const b = lerp(curve.p1, curve.p2, t); const c = lerp(curve.p2, curve.p3, t); const d = lerp(a, b, t); const e = lerp(b, c, t); const context = DOM.context2d(400, 300); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.lineTo(curve.p1.x, curve.p1.y); context.lineTo(curve.p2.x, curve.p2.y); context.lineTo(curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#AAA'; context.setLineDash([7, 7]); context.stroke(); context.lineWidth = 1.5; context.beginPath(); context.moveTo(a.x, a.y); context.lineTo(b.x, b.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#0f0'; context.setLineDash([]); context.stroke(); context.beginPath(); context.moveTo(b.x, b.y); context.lineTo(c.x, c.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#0f0'; context.setLineDash([]); context.stroke(); context.beginPath(); context.moveTo(d.x, d.y); context.lineTo(e.x, e.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#00f'; context.setLineDash([]); context.stroke(); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#f00'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.beginPath(); context.arc(curve.position(t).x, curve.position(t).y, 3, 0, 2 * Math.PI); context.fill(); context.font = '18px Georgia, Sans-Serif'; context.fillText('P₀', curve.p0.x - 25, curve.p0.y); context.fillText('P₁', curve.p1.x - 25, curve.p1.y + 15); context.fillText('P₂', curve.p2.x + 5, curve.p2.y + 15); context.fillText('P₃', curve.p3.x + 5, curve.p3.y); context.font = 'italic 14px Georgia, Sans-Serif'; context.fillText('t='+t.toPrecision(2), 200, 280); context.canvas.style.maxWidth = '100%' return context.canvas; }37:T774,{ const t = t1; const context = DOM.context2d(400, 300); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.lineTo(curve.p1.x, curve.p1.y); context.lineTo(curve.p2.x, curve.p2.y); context.lineTo(curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#AAA'; context.setLineDash([7, 7]); context.stroke(); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#000'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.font = '18px Georgia, Sans-Serif'; context.fillText('P₀', curve.p0.x - 25, curve.p0.y); context.fillText('P₁', curve.p1.x - 25, curve.p1.y + 15); context.fillText('P₂', curve.p2.x + 5, curve.p2.y + 15); context.fillText('P₃', curve.p3.x + 5, curve.p3.y); context.beginPath(); context.moveTo( curve.position(t).x - curve.d(t).x, curve.position(t).y - curve.d(t).y); context.lineTo( curve.position(t).x + curve.d(t).x, curve.position(t).y + curve.d(t).y); context.strokeStyle = '#00f'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.beginPath(); context.moveTo( curve.position(t).x, curve.position(t).y); context.lineTo( curve.position(t).x - curve.d(t).y, curve.position(t).y + curve.d(t).x); context.strokeStyle = '#0f0'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.fillStyle = '#00f'; context.fillText('Tangent', curve.position(t).x + 15, curve.position(t).y - 25); context.fillStyle = '#0f0'; context.fillText('Normal', curve.position(t).x - 75, curve.position(t).y + 25); context.canvas.style.maxWidth = '100%'; return context.canvas; }38:T802,{ const t = t2; const lerp = (p1, p2, t) => p1.multiply(1 - t).add(p2.multiply(t)); const a = lerp(curve.p0, curve.p1, t); const b = lerp(curve.p1, curve.p2, t); const c = lerp(curve.p2, curve.p3, t); const d = lerp(a, b, t); const e = lerp(b, c, t); const context = DOM.context2d(400, 300); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.lineTo(curve.p1.x, curve.p1.y); context.lineTo(curve.p2.x, curve.p2.y); context.lineTo(curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#AAA'; context.setLineDash([7, 7]); context.stroke(); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#000'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); context.beginPath(); context.moveTo( curve.position(t).x - curve.d(t).x, curve.position(t).y - curve.d(t).y); context.lineTo( curve.position(t).x + curve.d(t).x, curve.position(t).y + curve.d(t).y); context.strokeStyle = '#0f0'; context.lineWidth = 1; context.setLineDash([]); context.stroke(); const r = 1 / curve.curvature(t); const p = curve.position(t); const n = curve.d(t).normal().normalise().multiply(r); context.beginPath(); context.moveTo(p.x, p.y); context.lineTo(p.add(n).x, p.add(n).y); context.strokeStyle = '#f00'; context.lineWidth = 1; context.stroke(); context.beginPath(); context.arc(p.add(n).x, p.add(n).y, Math.abs(r), 0, 2 * Math.PI); context.stroke(); context.font = '18px Georgia, Sans-Serif'; context.fillText('P₀', curve.p0.x - 25, curve.p0.y); context.fillText('P₁', curve.p1.x - 25, curve.p1.y + 15); context.fillText('P₂', curve.p2.x + 5, curve.p2.y + 15); context.fillText('P₃', curve.p3.x + 5, curve.p3.y); context.canvas.style.maxWidth = '100%'; return context.canvas; }39:T5a4,{ const context = DOM.context2d(400, 300); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.lineTo(curve.p1.x, curve.p1.y); context.lineTo(curve.p2.x, curve.p2.y); context.lineTo(curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#AAA'; context.setLineDash([7, 7]); context.stroke(); context.beginPath(); context.moveTo(curve.p0.x, curve.p0.y); context.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y); context.lineJoin = context.lineCap = "round"; context.strokeStyle = '#000'; context.lineWidth = 3; context.setLineDash([]); context.stroke(); const steps = 100; for (let i=0; i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md `\nA few extra formulas we'll need...\n\nThe first derivative of the curve is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"tex`B'(t) = 3(1-t)^2(P_1 - P_0) + 6(1-t)t(P_2 - P_1) + 3t^2(P_3 - P_2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md `... this describes the *tangent* along the curve. It is also used to calculate the line that is 90º to the curve—sometimes called the *normal*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"viewof t1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`The second derivative of the curve is:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"tex`B''(t) = 6(1-t)(P_2 - 2 P_1 + P_0) + 6t(P_3 - 2 P_2 + P_1)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`This is starting to get a bit more abstract… it describes how quickly the tangent is changing. It will come in handy later when we want to calculate the curvature.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md `### Measuring curvature\n\nCurvature is a measure of how \"sharply\" a curve is changing.\n\nFlat spots have a low curvature—for example, a straight line has a curvature of 0. Sharper areas have a higher curvature. Usually the curvature will change as you go along a Bézier curve.\n\nTo measure the curvature of a cubic Bézier curve we'll use a technique I found described in [Computer Aided Geometric Design course notes](http://cagd.cs.byu.edu/~557/text/ch2.pdf). The idea is to try fit a circle inside the curve at each point, so that the circle just barely touches.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"viewof t2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md `The curvature can be calculated as the inverse of the radius:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"tex`c = \\frac{1}{r}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"md`And so now, by drawing perpendicular lines at a regular interval with a length based on the curvature, we now have our *curvature comb*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`This curvature comb is a useful tool to see which parts of the curve are \"sharper\" or \"flatter\".\n\nIt starts to become even more useful when joining Bézier curves together:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"viewof m = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"md `Try dragging the slider above—it moves the point that connects the two Bézier curves. It's set up so that both curves have the same tangent at the joining point.\n\nWhen the amount of curvature at the joining point doesn't match, you might notice it can look kind of \"lumpy\". This is because the curve is suddenly jumping from one curvature to another. These sudden jumps in curvature are called *continuity breaks*.\n\nTry moving the slider until the amount of curvature lines up on both sides.\n\n*Ahh, much better!* 😌\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"class Bezier {\n constructor(p0, p1, p2, p3) { this.p0 = p0; this.p1 = p1; this.p2 = p2; this.p3 = p3; }\n position(t) {\n return (\n this.p0.multiply((1-t)**3)\n .add(this.p1.multiply(3 * (1-t)**2 * t))\n .add(this.p2.multiply(3 * (1-t) * t**2))\n .add(this.p3.multiply(t**3))\n );\n }\n // First derivitive\n d(t) {\n return (\n this.p1.sub(this.p0).multiply(3 * (1-t)**2)\n .add(this.p2.sub(this.p1).multiply(6 * (1-t)*t))\n .add(this.p3.sub(this.p2).multiply(3 * t**2))\n );\n }\n // Second derivitive\n dd(t) {\n return (\n this.p2.sub(this.p1.multiply(2)).add(this.p0).multiply(6 * (1-t))\n .add(this.p3.sub(this.p2.multiply(2)).add(this.p1).multiply(6 * t ))\n );\n }\n \n curvature(t) {\n const d = this.d(t);\n const dd = this.dd(t);\n \n return (\n (d.x * dd.y - d.y * dd.x) / (d.x**2 + d.y**2)**(3/2)\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"class Point {\n constructor(x, y) { this.x = x; this.y = y }\n multiply(n) { return new Point(this.x * n, this.y * n) }\n add(p) { return new Point(this.x + p.x, this.y + p.y) }\n sub(p) { return new Point(this.x - p.x, this.y - p.y) }\n mag() { return Math.sqrt(this.x**2 + this.y**2) }\n normal() { return new Point(-this.y, this.x) }\n normalise() { return this.multiply(1/this.mag()) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"