2a:null 2b:["$","title",null,{"children":"Bezier approximation of continuous curves | Máté Homolya | Observable"}] 30:T7f7,## Geometric continuity To fulfill G0 continuity, two curves must join together at an endpoint. To fulfill G1 continuity, (using the first derivative) the directions (and only the directions) of the tangent vectors of the two curves at the joint must coincide. GN continuity implies that the N'th derivatives of the two vectors be equal in direction.

### G0 or Positional continuity Two curves having a common endpoint, with no further condition, are positionally continuous. This is the less smooth type of joint, as the only condition to satisfy is the common endpoint, no matter what the flow of the two curves around the joint may be. ### G1 or Tangency continuity Two curves having a common point and tangent vectors lying along the same direction are said to have tangency continuity. The two curves may seem to have the same direction at the joint, but the way they change their direction may still be very different (the rate of this change of direction is called curvature). ### G2 or Curvature continuity Two curves having a common point, tangent vectors lying along the same direction, and having the same curvature (which is, the same rate of change of the direction) are said to have curvature continuity. The directions at the joint seem to change with the same "speed". ### G3 or Torsion continuity Two curves satisfying the same conditions as the ones having curvature continuity, and, in addition, having the same constant rate of change of the curvature are said to have G3 or torsion continuity. ### Smooth curvature continuity Two curves having G3 continuity are said to have Smooth curvature continuity at a joint if there is tangency continuity between the two curvature plots. ### G4 or Curvature plot curvature continuity Two curves having G3 continuity are said to have G4 continuity at a joint if they have the same rate of change of the rate of change of the curvature, which is the same rate of change of torsion. In this case there is curvature continuity between the two curvature plots. 31:T26ac,/** * Return the SVG path for a continous curve for a set of points. * * @param {x: number, y: number} points list of points, each is an object with x and y properties * @returns SVG path string */ function calculatePath(points, parameters = {}) { const { rounding = 2000, exponent = 4, strokeWidth = 1, closed = false } = parameters; // minimum 3 points if (points.length < 3) { return html``; } let groups = []; function wrap(idx) { return (idx + points.length) % points.length; } for (let i = 0; i < points.length - (closed ? 0 : 2); i++) { // groups of three points groups.push([points[wrap(i)], points[wrap(i + 1)], points[wrap(i + 2)]]); } /** * Distance function to the supershape, works in polar coordinates * * @param {number} theta Polar angle * @param {number} m supershape parameter * @param {number} exponent supershape exponent * @returns */ function shape(theta, m) { // Gielis curve const a = 1; const b = 1; const c = Math.cos((m * theta) / 4); const s = Math.sin((m * theta) / 4); // magic constant to keep K(2pi / m) = 0 where K is the curvature function of theta const p = 0.0625148; const n2 = 1 / (1 - exponent); const n3 = 1 / (1 - exponent); const n1 = p * Math.pow(m, 2) * n2; const r = Math.pow(Math.pow(c, n2) + Math.pow(s, n3), -1 / n1); function getKappa() { // first derivative ∂f/∂t const pow = Math.pow; const abs = Math.abs; const d1 = -( pow(abs(a), ((n1 + 1) * n2) / n1) * pow(abs(b), n3 / n1) * m * n3 * pow(c, 2) * pow(abs(s), n3) - pow(abs(a), n2 / n1) * pow(abs(b), ((n1 + 1) * n3) / n1) * m * n2 * pow(s, 2) * pow(abs(c), n2) ) / (pow( pow(abs(a), n2) * pow(abs(s), n3) + pow(abs(b), n3) * pow(abs(c), n2), 1 / n1 ) * (4 * pow(abs(a), n2) * n1 * c * s * pow(abs(s), n3) + 4 * pow(abs(b), n3) * n1 * c * s * pow(abs(c), n2))); // second derivative ∂²f/∂t² const m2 = pow(m, 2); const s2 = pow(s, 2); const c2 = pow(c, 2); const var1 = pow(abs(a), ((2 * n1 + 1) * n2) / n1); const var2 = pow(abs(a), ((n1 + 1) * n2) / n1) * pow(abs(b), ((n1 + 1) * n3) / n1) * m2 * n1; const var3 = pow(abs(a), n2 / n1) * pow(abs(b), ((2 * n1 + 1) * n3) / n1); const var4 = pow(abs(b), n3 / n1); const d2nom = (var1 * var4 * m2 * n1 * n3 * c2 * s2 + (var1 * var4 * m2 * pow(n3, 2) + var1 * var4 * m2 * n1 * n3) * pow(c, 4)) * pow(abs(s), 2 * n3) + ((var2 * n2 - var2 * pow(n2, 2)) * pow(s, 4) + (((-2 * var2 - 2 * pow(abs(a), ((n1 + 1) * n2) / n1) * pow(abs(b), ((n1 + 1) * n3) / n1) * m2) * n2 + var2) * n3 + var2 * n2) * c2 * s2 + (var2 * n3 - var2 * pow(n3, 2)) * pow(c, 4)) * pow(abs(c), n2) * pow(abs(s), n3) + ((var3 * m2 * pow(n2, 2) + var3 * m2 * n1 * n2) * pow(s, 4) + var3 * m2 * n1 * n2 * c2 * s2) * pow(abs(c), 2 * n2); const d2denom = pow( pow(abs(a), n2) * pow(abs(s), n3) + pow(abs(b), n3) * pow(abs(c), n2), 1 / n1 ) * (16 * pow(abs(a), 2 * n2) * pow(n1, 2) * pow(c, 2) * pow(s, 2) * pow(abs(s), 2 * n3) + 32 * pow(abs(a), n2) * pow(abs(b), n3) * pow(n1, 2) * pow(c, 2) * pow(s, 2) * pow(abs(c), n2) * pow(abs(s), n3) + 16 * pow(abs(b), 2 * n3) * pow(n1, 2) * pow(c, 2) * pow(s, 2) * pow(abs(c), 2 * n2)); const d2 = d2nom / d2denom; // curvature return ( abs(pow(r, 2) + 2 * pow(d1, 2) - r * d2) / pow(pow(r, 2) + pow(d1, 2), 1.5) ); } const kappa = getKappa(); return { r, kappa }; } /** * Returns bezier curve function with cartesian coordinates * * @param {x: number, y: number} p0 * @param {x: number, y: number} p1 * @param {x: number, y: number} p2 * @param {x: number, y: number} p3 * @returns Bezier curve function */ function getBezier(p0, p1, p2, p3) { return (t) => { // interpolate const x = (1 - t) * (1 - t) * (1 - t) * p0.x + 3 * t * (1 - t) * (1 - t) * p1.x + 3 * t * t * (1 - t) * p2.x + t * t * t * p3.x; const y = (1 - t) * (1 - t) * (1 - t) * p0.y + 3 * t * (1 - t) * (1 - t) * p1.y + 3 * t * t * (1 - t) * p2.y + t * t * t * p3.y; return { x, y }; }; } // error function function error(shapeFn, bezierFn) { let sampleResolution = 100; let error = 0; for (let i = 0; i < sampleResolution; i++) { const t = i / sampleResolution; const x = bezierFn(t); const y = shapeFn(t); error += Math.abs(x - y); } return error; } // helper functions function sub(a, b) { return { x: a.x - b.x, y: a.y - b.y }; } function dot(a, b) { return a.x * b.x + a.y * b.y; } function add(a, b) { return { x: a.x + b.x, y: a.y + b.y }; } function mul(a, b) { return { x: a.x * b, y: a.y * b }; } function length(a) { return Math.sqrt(a.x * a.x + a.y * a.y); } function normalize(a) { const l = length(a); return { x: a.x / l, y: a.y / l }; } function cross(a, b) { return a.x * b.y - a.y * b.x; } let path = ""; let debugP = ""; let curveP = ""; // minimize the error per-group for (let i = 0; i < groups.length; i++) { // get the group const group = groups[i]; // get the three points const a = group[0]; const b = group[1]; const c = group[2]; const v = sub(b, a); const w = sub(c, b); const vn = normalize(v); const wn = normalize(w); const alpha = Math.acos(dot(vn, wn)); const beta = Math.PI - alpha / 2; let phat = normalize(add(vn, wn)); phat = { x: phat.y, y: -phat.x }; if (cross(vn, wn) > 0) { phat = mul(phat, -1); } // angle of phat relative to screen space coordinates const gamma = Math.atan2(phat.y, phat.x) + beta; // Calculate outer radius by rounding parameter (k). This value is clamped to half of the segment length. const k = rounding; const clamped = Math.min(Math.min(k, length(v) / 2), length(w) / 2); // move the center infinitely far away from b as the angle between v and w approaches 0 const ro = clamped / Math.sin(beta); // inner radius const ri = -ro * Math.cos(beta); // Center of the inscribed circle (inner circle) const q = add(b, mul(phat, ro)); // Winding parameter const m = (2 * Math.PI) / alpha; // create the supershape function specified by the three points const shapeFn = (theta) => { // calculate radius relative to the center of the inner circle const { r, kappa } = shape(theta, m); function getPoint(radius) { // calculate cartesian coordinates // scale inversely proportional to ri const x = radius * Math.cos(theta); const y = radius * Math.sin(theta); // rotate back to screen space around const xs = x * Math.cos(gamma) - y * Math.sin(gamma); const ys = x * Math.sin(gamma) + y * Math.cos(gamma); return { x: xs + q.x, y: ys + q.y }; } // get the point on the curve const curve = getPoint(r * ri); const curvature = getPoint(r * ri + kappa * 8); return { curve, curvature }; }; // circle at the center of the inner circle const r = 2; const qq = add(b, mul(phat, clamped)); const circle = `M ${qq.x} ${qq.y} m ${-r} 0 a ${r} ${r} 0 1 0 ${ r * 2 } 0 a ${r} ${r} 0 1 0 ${-r * 2} 0`; debugP += circle; if (exponent === 0 || cross(vn, wn) === 0) { // return straight line const pa = add(b, mul(vn, -clamped)); const pb = add(b, mul(wn, clamped)); let f = "L"; if (path === "") f = "M"; path += `${f}${pa.x} ${pa.y}L${pb.x} ${pb.y}`; continue; } // sample the supershape function const sampleResolution = 100; // determine winding direction const winding = cross(sub(b, a), sub(c, b)) > 0 ? -1 : 1; for (let j = 0; j < sampleResolution; j++) { let t = j / (sampleResolution - 1); if (winding > 0) { t = 1 - t; } const { curve, curvature } = shapeFn(t * alpha); function f(n) { return n.toFixed(2); } try { let cmd = "L"; if (j === 0 || curveP.length === 0) cmd = "M"; if (!isNaN(curvature.x) && !isNaN(curvature.y)) { curveP += `${cmd}${f(curvature.x)} ${f(curvature.y)}`; } } catch (e) { // } if (isNaN(curve.x) || isNaN(curve.y)) { continue; } if (path === "") { path += `M ${f(curve.x)} ${f(curve.y)}`; } else path += `L ${f(curve.x)} ${f(curve.y)}`; } } if (closed) { path += `z`; } return html``; }32:[{"id":"a953f9c8b2c526f83fa3412ff2a45ef5ddce5c07baa3abb4744ac74661c46116263200f2488c0036a2cb3b8fe50c77c6d17ea5621216596173c1ccfc704ed001","href":"https://static.observableusercontent.com/files/a953f9c8b2c526f83fa3412ff2a45ef5ddce5c07baa3abb4744ac74661c46116263200f2488c0036a2cb3b8fe50c77c6d17ea5621216596173c1ccfc704ed001","name":"m.json","type":"application/json","lastModified":1654817216276.375,"size":334}] 2e:{"id":"0431d53c59957290","slug":"bezier-continuous-curves","title":"Bezier approximation of continuous curves","thumbnail":"ef2833852f25f175dc0fe8422ef19e37e611fab0ce63276be209758ff3ccecb0","access_level":"public","create_time":"$D2022-06-01T23:25:51.062Z","update_time":"$D2022-06-21T21:46:37.617Z","view_time":null,"first_public_time":"$D2022-06-09T23:17:52.383Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":508,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"a241f4954a8497db","slug":"curves","title":"Curves","owner":{"id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya"}},"type":"notebook","body":{"titling":"auto","title":"Bezier approximation of continuous curves","cells":[{"id":0,"value":"# Bezier approximation of continuous curves\n\n> Follow up to [@mateh/continuous-curvature](https://observablehq.com/@mateh/continuous-curvature). \n\nThis notebook describes how to approximate a curve with a set of control points and parameters that has smooth transitions in the curvature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"viewof strokeShape = Inputs.checkbox([\"\"], { label: \"Stroke\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof strokeColor = Inputs.color({\n label: \"Stroke color\",\n value: \"#3b5fc0\",\n disabled: strokeShape.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof strokeWidth = Inputs.range([0, 20], {\n value: 1,\n step: 1,\n label: \"Stroke width\",\n disabled: strokeShape.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof fillShape = Inputs.checkbox([\"\"], { label: \"Fill\", value: [\"\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"viewof fillColor = Inputs.color({\n label: \"Fill color\",\n value: \"#3b5fc0\",\n disabled: fillShape.length === 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"Shape and rounding parameters can be adjusted per-vertex. The first one controls the shape of the curve, while rounding controls the size. Any value below .75 will not produce a continuous curve (see explanation below).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"{\n function getEl(n) {\n return html`

1 ? \"darkgreen\" : \"darkorange\"}\">${icon(\n n > 1 ? \"checkmark\" : \"exclamationmark.triangle\"\n )} Continuity: G${n}

`;\n }\n // calculate n\n let n = Math.floor(1 / (1 - exponent));\n if (n < 2) return getEl(0);\n if (n < 4) return getEl(1);\n if (n < 8) return getEl(2);\n if (n < 16) return getEl(3);\n return getEl(4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"viewof curvePlot = Inputs.checkbox([\"\"], {\n value: [\"\"],\n label: \"Curvature plot\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof exponent = Inputs.range([0, 0.99], {\n label: \"Shape\",\n value: 0.8,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof rounding = Inputs.range([0, 100], {\n label: \"Rounding\",\n value: 50,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"clearButton = Inputs.button(\"Clear\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"{\n const listener = () => {\n node.clear();\n };\n clearButton.removeEventListener(\"click\", listener);\n clearButton.addEventListener(\"click\", listener);\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"node = PathInput({\n value: initValue,\n closed: true,\n draw: (node, value, closed) => {\n const svg = calculatePath(value, {\n exponent,\n strokeWidth,\n closed,\n rounding\n });\n return Array.from(svg.childNodes);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"## Appendix\n\nFull source can be found at: https://github.com/mate-h/supershapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"viewof controlPoints = node","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"initValue = await FileAttachment(\"m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof clear = clearButton","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"lodash = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"## References\n\nhttps://ctan.math.illinois.edu/graphics/metapost/contrib/macros/featpost/doc/otherinfo/BezierApprox.pdf \nhttps://dpt3.dptcorporate.com/Content/Help/language/Mathconc/T_MC_ContinuityClassification.htm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"import { icon } from \"@mateh/icon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"import { PathInput } from \"@mateh/path-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"