2c:null 2d:["$","title",null,{"children":"Cubic Bézier Curves | Kjerand Pedersen | Observable"}] 32:T7bc,example = { const svg = d3.select(DOM.svg(400, 400)) .style("width", 400) .style("height", 400); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); svg.append('g').attr('transform', `translate(${50},${350})`).call(xAxis); svg.append('g').attr('transform', `translate(${50},${50})`).call(yAxis); const g = svg.append('g').attr('transform', `translate(${50},${50})`); // to add guide lines in the background const guides = g.append('g'); const E = EQ1(A, B); const F = EQ1(B, C); const G = EQ1(C, D); const Q = EQ1(E, F); const R = EQ1(F, G); const P = EQ1(Q, R); const curveFunc = d3.line().x(d => x(d[0])).y(d => y(d[1])); // Draw the control points drawControlPoint(g, A, 'A'); drawControlPoint(g, B, 'B'); drawControlPoint(g, C, 'C'); drawControlPoint(g, D, 'D'); // draw guides drawGuideLine(guides, A, B, E, 'red'); drawGuideLine(guides, B, C, F, 'blue'); drawGuideLine(guides, C, D, G, 'yellowgreen'); if (t > 0) { if (ShowEFG) { drawCalculatedPoint(g, E, 'E'); drawCalculatedPoint(g, F, 'F'); drawCalculatedPoint(g, G, 'G'); drawGuideLine(guides, E, F, Q, 'purple'); drawGuideLine(guides, F, G, R, 'cyan'); if (ShowQR) { drawCalculatedPoint(g, Q, 'Q'); drawCalculatedPoint(g, R, 'R'); drawGuideLine(guides, Q, R, P, 'orange'); } } } if (ShowP || (ShowEFG && ShowQR)) { drawCalculatedPoint(g, P, 'P'); } if (ShowP) { guides.append('path') .attr('d', curveFunc(curve)) .attr('stroke-width', 2) .attr('stroke-dasharray', '2,2') .attr('stroke', '#cfc') .attr('fill', 'none'); if (t > 0) { guides.append('path') .attr('d', curveFunc(curve.filter((d, i) => i <= t * 100))) .attr('stroke-width', 4) .attr('stroke', '#0c0') .attr('fill', 'none'); } } return svg.node(); }33:[] 30:{"id":"9232fe19aac55846","slug":"cubic-bezier-curves","title":"Cubic Bézier Curves","thumbnail":"fa7b476a3808f126ea310ca7874073381fbddc31d8ed092d05dbf1509f13a95b","access_level":"public","create_time":"$D2018-08-08T12:01:48.873Z","update_time":"$D2018-08-28T13:22:52.584Z","view_time":null,"first_public_time":"$D2018-08-08T14:04:16.041Z","has_unpublished_edits":null,"fork":{"id":"9bfee9e3ce7c33c2","slug":"quadratic-bezier-curves","title":"Quadratic Bézier Curves","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"stars":3,"starred":false,"owner":{"type":"team","id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":"starter_2024"},"version":529,"publish_version":529,"role":null,"authored":false,"authors":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null}],"members":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f68290c7170ae347","slug":"interpolation","title":"Interpolation","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"type":"notebook","body":{"titling":"auto","title":"Cubic Bézier Curves","cells":[{"id":94,"value":"md`# Cubic Bézier Curves\nA cubic Bézier curve is a blend of two [quadratic Bézier curves](/@kjerandp/quadratic-bezier-curves) (De Casteljau’s algorithm): \n* ABC \n* BCD\n\n\nThis can in turn be reduced to blending of three [linear Bézier curves](/@kjerandp/blending-two-points-vectors): \nAB, BC and CD.\n\nWhich gives us a total of 6 linear curves (AB, BC, CD, EF, FG, QR)\n\nP shows the interpolated value at time t, given by the formula:\n\n${tex`(s^3)A + 3(s^2t)B + 3(st^2)C + (t^3)D`}\n\nwhere s = 1 - t\n\n(Se cell EQ2)` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof t = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html`t = ${t}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof Example = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof ShowP = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof ShowEFG = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof ShowQR = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"A = {\n switch(Example) {\n case '2': return [0, 7];\n case '3': return [0, 2];\n default: return [1, 1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"B = {\n switch(Example) {\n case '2': return [3, 0];\n case '3': return [10, 8];\n default: return [4, 7];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"C = {\n switch(Example) {\n case '2': return [7, 6];\n case '3': return [8, 0];\n default: return [10, 9];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"D = {\n switch(Example) {\n case '2': return [10, 0];\n case '3': return [0, 8];\n default: return [9, 0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"EQ1 = (p1, p2) => {\n const p = [\n ((1 - t) * p1[0]) + (t * p2[0]),\n ((1 - t) * p1[1]) + (t * p2[1]),\n ];\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"EQ2 = t => {\n const s = 1 - t;\n const f = (a, b, c, d) => (s**3 * a) + (3 * s**2 * t * b) + (3 * s * t**2 * c) + (t**3 * d); \n \n return [\n f(A[0], B[0], C[0], D[0]),\n f(A[1], B[1], C[1], D[1]),\n ];\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"curve = {\n const values = [];\n\n for (let i = 0.0; i < 1.0; i += 0.01) {\n values.push(EQ2(i)); \n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"x = d3.scaleLinear().range([0, 300]).domain([0, 10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"y = d3.scaleLinear().range([0, 300]).domain([10, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"drawControlPoint = (g, p, lbl, xScale = x, yScale = y) => {\n g.append('circle')\n .attr('r', 10)\n .attr('cx', xScale(p[0]))\n .attr('cy', yScale(p[1]))\n .attr('stroke', 'black')\n .attr('fill', 'lightgray');\n \n g.append('text')\n .attr('x', xScale(p[0]))\n .attr('y', yScale(p[1]) + 4)\n .attr('fill', 'black')\n .attr('stroke', 'black')\n .style('text-anchor', 'middle')\n .style('font-size', '12px')\n .style('font-family', 'tahoma')\n .text(lbl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"drawCalculatedPoint = (g, p, lbl, xScale = x, yScale = y) => {\n g.append('circle')\n .attr('r', 10)\n .attr('cx', xScale(p[0]))\n .attr('cy', yScale(p[1]))\n .attr('fill', 'rgba(0,0,0,0.75)');\n \n g.append('text')\n .attr('x', xScale(p[0]))\n .attr('y', yScale(p[1]) + 4)\n .attr('fill', 'white')\n .attr('stroke', 'white')\n .style('text-anchor', 'middle')\n .style('font-size', '12px')\n .style('font-family', 'tahoma')\n .text(lbl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"drawGuideLine = (g, p1, p2, p3, color) => {\n const faintClr = d3.color(color);\n faintClr.opacity = 0.5;\n g.append('line')\n .attr('x1', x(p1[0]))\n .attr('x2', x(p2[0]))\n .attr('y1', y(p1[1]))\n .attr('y2', y(p2[1]))\n .attr('stroke-width', 2)\n .attr('stroke', faintClr);\n \n if (t > 0) {\n g.append('line')\n .attr('x1', x(p1[0]))\n .attr('x2', x(p3[0]))\n .attr('y1', y(p1[1]))\n .attr('y2', y(p3[1]))\n .attr('stroke-width', 4)\n .attr('stroke', color);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"credits = md`Example originates from the [Interpolation and Splines](http://www.essentialmath.com/GDC2012/GDC12_Eiserloh_Squirrel_Interpolation-and-Splines.ppt) presentation by Squirrel Eiserloh.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"next = md`[Spline curves](/@kjerandp/spline-curves)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"