31:T423,{ const element = DOM.element('sk2') return p5(sk => { // sk = sketch replay; let key sk.setup = () => { sk.createCanvas(width, height) sk.background(245) } sk.draw = () => { // repeated setup for every animation loop sk.clear() const t = calcT(sk) const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps) addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) const lerp1s = calcFirstOrderLerps(t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) addFirstOrderLerps(sk, t, lerp1s) addFirstOrderLerpLines(sk, t, lerp1s) const lerp2s = calcSecondOrderLerps(t, ...lerp1s) addSecondOrderLerps(sk, t, lerp2s) addSecondOrderLerpLines(sk, t, lerp2s) const lerp3 = calcThirdOrderLerp(t, ...lerp2s) addThirdOrderLerp(sk, t, lerp3) addThirdOrderLerpLabel(sk, t, ...lerp3) } addTouchControls(sk, key) }, element) }32:T4ce,{ const element = DOM.element('sk2') return p5(sk => { // sk = sketch replay let key sk.setup = () => { sk.createCanvas(width, height) sk.background(245) } sk.draw = () => { // repeated setup for every animation loop sk.clear() sk.textSize(12) const t = calcT(sk) const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps) addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) addControlPointLabels(sk, ps) const lerp1s = calcFirstOrderLerps(t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) addFirstOrderLerps(sk, t, lerp1s) addFirstOrderLerpLines(sk, t, lerp1s) const lerp2s = calcSecondOrderLerps(t, ...lerp1s) addSecondOrderLerps(sk, t, lerp2s) addSecondOrderLerpLines(sk, t, lerp2s) const mp = calcThirdOrderLerp(t, ...lerp2s) addThirdOrderLerp(sk, t, mp) addBezier(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) sk.strokeWeight(1) sk.textSize(50) if (addPaintBrush) addLabel(sk, '🖌', mp, -pointSize / 4) } addTouchControls(sk, key) }, element) }33:T454,// slightly modified function adapted from @tmcw/p5 function* p5(sketch, element) { // const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new P5(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }34:[] 2f:{"title":"How the Pen tool's curves work (cubic Bezier)","cells":[{"id":0,"value":"# How the Pen tool's curves work (cubic Bezier)","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"The cubic Bezier curve is a feature of the Pen tool in vector apps like Figma, GIMP and most of Adobe's Creative Cloud.\n\nThis page demonstrates how a cubic Bezier curve is generated.","pinned":false,"hidden":false,"mode":"md"},{"id":1225,"value":"Drag the yellow controls to create your chosen curve, or...","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"viewof replay = Inputs.button(\"Generate a new curve\", {reduce: () => Object.keys(cpLabels).forEach((k) => ps.set(k, [width * Math.random(), height * Math.random()]))})","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"{\n const element = DOM.element('sk1');\n return p5(sk => { // sk = sketch\n replay;\n let key\n const points = {\n p1: 'P₁',\n p2: 'P₂',\n cp1: 'CP₁',\n cp2: 'CP₂',\n }\n\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n\n sk.draw = () => {\n\n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n\n // bezier curve\n sk.noFill()\n sk.stroke(0)\n sk.strokeWeight(3)\n sk.bezier(p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n\n // control points\n addControlPointLines(sk, true, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n\n // control point handles\n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n\n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"Have you ever wondered why these curves feel easy to use but hard to explain?","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"Each curve is made up of just 4 control points.","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"{\n const element = DOM.element('div')\n return p5(sk => { // sk = sketch\n replay;\n let key\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n \n sk.draw = () => {\n \n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n \n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointLabels(sk, ps, cpLabels)\n \n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"These control points help to create the frame for the curve.\n\nP₁ and P₂ represent the two ends of the curve that is drawn.","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"## Linear interpolation","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"{\n const element = DOM.element('sk2')\n return p5(sk => { // sk = sketch\n replay;\n let key\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n \n sk.draw = () => {\n \n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n\n addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointLabels(sk, ps)\n \n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"In maths and computer science, *linear interpolation* involves calculating every number between two starting numbers. Our 3 lines have coordinates that can be linearly interpolated, which you can see below.\n\nNotice the time spent travelling from one point to the next is consistent regardless of distance.","pinned":false,"hidden":false,"mode":"md"},{"id":710,"value":"{\n const element = DOM.element('sk2')\n return p5(sk => { // sk = sketch\n replay;\n let key\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n \n sk.draw = () => {\n \n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n\n addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n \n addControlPointLabels(sk, ps)\n\n const lerp1s = calcFirstOrderLerps(t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addFirstOrderLerps(sk, t, lerp1s)\n \n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"## Connect the interpolated points","pinned":false,"hidden":false,"mode":"md"},{"id":738,"value":"Now, let's add lines so we can visualise the changing distances between our linear interpolations.","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"{\n const element = DOM.element('sk2')\n return p5(sk => { // sk = sketch\n replay;\n let key\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n \n sk.draw = () => {\n \n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n\n addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n\n const lerp1s = calcFirstOrderLerps(t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addFirstOrderLerps(sk, t, lerp1s)\n addFirstOrderLerpLines(sk, t, lerp1s)\n addFirstOrderLerpLabels(sk, t, lerp1s)\n \n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"## Second-order interpolation","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"We're going to do another round of linear interpolation.\n\nThis time we will interpolate values between our 3 new interpolation points (L1, L2 and L3), giving us 2 new interpolations: LL1 and LL2.","pinned":false,"hidden":false,"mode":"md"},{"id":814,"value":"{\n const element = DOM.element('sk2')\n return p5(sk => { // sk = sketch\n replay;\n let key\n sk.setup = () => {\n sk.createCanvas(width, height)\n sk.background(245)\n }\n \n sk.draw = () => {\n \n // repeated setup for every animation loop\n sk.clear()\n const t = calcT(sk)\n const [p1x, p1y, p2x, p2y, cp1x, cp1y, cp2x, cp2y] = pointsArr(ps)\n\n addControlPointLines(sk, false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addControlPointHandles(sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n\n const lerp1s = calcFirstOrderLerps(t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n addFirstOrderLerps(sk, t, lerp1s)\n addFirstOrderLerpLines(sk, t, lerp1s)\n\n const lerp2s = calcSecondOrderLerps(t, ...lerp1s)\n addSecondOrderLerps(sk, t, lerp2s)\n addSecondOrderLerpLines(sk, t, lerp2s)\n addSecondOrderLerpLabels(sk, t, lerp2s)\n \n }\n\n addTouchControls(sk, key)\n \n }, element)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"## Trace the final (third-order) interpolation","pinned":false,"hidden":false,"mode":"md"},{"id":843,"value":"Finally, tracking the interpolation between LL1 and LL2 gives us a single point LLL, which draws our curve!","pinned":false,"hidden":false,"mode":"md"},{"id":852,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"Computers draw these curves instantly, allowing you to control its shape with immediate feedback.","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"viewof addPaintBrush = Inputs.toggle({label: \"Add paint brush\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"### Variables","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"#### Declared constants","pinned":false,"hidden":false,"mode":"md"},{"id":930,"value":"pointSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"clickTolerance = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"ps = {\n const res = new Map()\n Object.keys(cpLabels).forEach((k) => res.set(k, [width * Math.random(), height * Math.random()]))\n return res\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"cpLabels = ({\n p1: 'P₁',\n p2: 'P₂',\n cp1: 'CP₁',\n cp2: 'CP₂',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"#### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":703,"value":"calcT = (sk) => .5 + Math.sin(sk.millis() / 1000) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"pointsArr = (ps) => {\n return [\n ps.get('p1')[0],\n ps.get('p1')[1],\n ps.get('p2')[0],\n ps.get('p2')[1],\n ps.get('cp1')[0],\n ps.get('cp1')[1],\n ps.get('cp2')[0],\n ps.get('cp2')[1],\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"addTouchControls = (sk, key) => {\n sk.touchStarted = () => {\n for (const p of ps.keys()) {\n if (sk.mouseX <= width && sk.mouseX >= 0 && sk.mouseY <= height && sk.mouseY >= 0) {\n if (Math.abs(ps.get(p)[0] - sk.mouseX) < clickTolerance && Math.abs(ps.get(p)[1] - sk.mouseY) / sk.mouseY < clickTolerance) {\n key = p\n }\n }\n }\n }\n\n sk.touchEnded = () => {\n key = null\n }\n\n sk.touchMoved = () => {\n if (key) ps.set(key, [sk.mouseX, sk.mouseY])\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"addPoints = (sk, t, points) => {\n points.forEach(p => {\n sk.ellipse(p[0], p[1], pointSize, pointSize)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"addLines = (sk, t, points) => {\n for (let i = 0; i < points.length - 1; ++i) {\n sk.line(points[i][0], points[i][1], points[i+1][0], points[i+1][1])\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"addLabel = (sk, label, point, dist) => {\n sk.text(label, xLabelPosAdjust(sk, point[0], dist), yLabelPosAdjust(sk, point[1], dist))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"addControlPointHandles = (sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) => {\n sk.noStroke()\n sk.fill(255, 213, 62)\n sk.rect(cp1x - 2.5, cp1y - 2.5, pointSize, pointSize)\n sk.rect(cp2x - 2.5, cp2y - 2.5, pointSize, pointSize)\n sk.ellipse(p1x, p1y, pointSize, pointSize)\n sk.ellipse(p2x, p2y, pointSize, pointSize)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"addControlPointLabels = (sk, ps) => {\n sk.stroke(255, 213, 62)\n sk.fill(0)\n Object.keys(cpLabels).forEach(k => {\n const x = ps.get(k)[0]\n const y = ps.get(k)[1]\n const l = x < sk.width / 2\n const t = y < sk.height / 2\n sk.text(cpLabels[k], ps.get(k)[0] + (l ? 10 : -10), ps.get(k)[1] + (t ? 10 : -10))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"addControlPointLines = (sk, appStyle = false, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) => {\n sk.stroke(255, 213, 62)\n sk.strokeWeight(1)\n sk.line(p1x, p1y, cp1x, cp1y)\n sk.line(p2x, p2y, cp2x, cp2y)\n if(!appStyle) {\n sk.line(sk.line(cp1x, cp1y, cp2x, cp2y))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"calcFirstOrderLerps = (t, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) => {\n const l1x = lerp(t, p1x, cp1x)\n const l1y = lerp(t, p1y, cp1y)\n const l2x = lerp(t, cp1x, cp2x)\n const l2y = lerp(t, cp1y, cp2y)\n const l3x = lerp(t, cp2x, p2x)\n const l3y = lerp(t, cp2y, p2y)\n return [[l1x, l1y], [l2x, l2y], [l3x, l3y]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"addFirstOrderLerps = (sk, t, points) => {\n sk.stroke(0, 0, 200)\n sk.fill(0, 0, 200)\n addPoints(sk, t, points)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"addFirstOrderLerpLines = (sk, t, points) => {\n addLines(sk, t, points)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"addFirstOrderLerpLabels = (sk, t, points) => {\n addLabel(sk, 'L₁', points[0])\n addLabel(sk, 'L₂', points[1])\n addLabel(sk, 'L₃', points[2])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"calcSecondOrderLerps = (t, [l1x, l1y], [l2x, l2y], [l3x, l3y]) => {\n const ll1x = lerp(t, l1x, l2x)\n const ll1y = lerp(t, l1y, l2y)\n const ll2x = lerp(t, l2x, l3x)\n const ll2y = lerp(t, l2y, l3y)\n return [[ll1x, ll1y], [ll2x, ll2y]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"addSecondOrderLerps = (sk, t, points) => {\n sk.stroke(0, 200, 200)\n sk.fill(0, 200, 200)\n addPoints(sk, t, points)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"addSecondOrderLerpLines = (sk, t, points) => {\n addLines(sk, t, points)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"addSecondOrderLerpLabels = (sk, t, points) => {\n addLabel(sk, 'LL₁', points[0])\n addLabel(sk, 'LL₂', points[1])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"calcThirdOrderLerp = (t, [ll1x, ll1y], [ll2x, ll2y]) => {\n const llmx = lerp(t, ll1x, ll2x)\n const llmy = lerp(t, ll1y, ll2y)\n return [llmx, llmy]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"addThirdOrderLerp = (sk, t, [x, y]) => {\n sk.fill(0, 0, 0)\n addPoints(sk, t, [[x, y]])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"addThirdOrderLerpLabel = (sk, t, mx, my) => {\n addLabel(sk, 'LLL', [mx, my])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"addBezier = (sk, p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y) => {\n sk.noFill()\n sk.stroke(0)\n sk.strokeWeight(3)\n sk.bezier(p1x, p1y, cp1x, cp1y, cp2x, cp2y, p2x, p2y)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"addDebugControlPointLabels = (sk, ps) => {\n sk.stroke(255, 213, 62)\n sk.fill(0)\n Object.keys(cpLabels).forEach(k => {\n const x = ps.get(k)[0]\n const y = ps.get(k)[1]\n const l = x < sk.width / 2\n const t = y < sk.height / 2\n sk.text(ps.get(k), xLabelPosAdjust(sk, ps.get(k)[0]), yLabelPosAdjust(sk, ps.get(k)[1]))\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"addDebugMouse = sk => {\n if (sk.mouseX <= width && sk.mouseX >= 0 && sk.mouseY <= height && sk.mouseY >= 0) {\n sk.text(`${sk.mouseX}, ${sk.mouseY}`, sk.width - 100, sk.height - 100)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"xLabelPosAdjust = (sk, x, dist) => {\n const v = dist ?? 10\n const l = x < sk.width / 2\n return x + (l ? v : -v)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"yLabelPosAdjust = (sk, y, dist) => {\n const v = dist ?? 20\n const l = y < sk.width / 2\n return y + (l ? v : -v)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"#### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"lerp = (t, a, b) => a * (1 - t) + b * t","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"P5 = require('https://unpkg.com/p5@1.4.0/lib/p5.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}