${title}

31:Tfdc,r = { const boxWidth = width; const boxHeight = height; const xmlns = 'http://www.w3.org/2000/svg'; const s = document.createElementNS(xmlns, 'svg'); s.setAttributeNS(null, 'viewBox', `-1 0 14.5 9.3`); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); const convertToSvgCoord = (value) => (value) / boxWidth * 14.5 const r = radius < 1 ? 0 : limitPrecision(convertToSvgCoord(radius)); s.setAttributeNS(null, 'style', `width: 100%; height: auto; max-width: ${boxWidth}px; box-sizing: border-box`); const makePath = (path, color) => { // path = createRoundedPathString(path, radius); const path2 = r === 0 ? path : roundSvgPath(path, r, algoOptions); let pathCoords = path2 .split(/[a-zA-Z,]/) .reduce(function(parts, part){ var match = part.match(/(-?[\d]+(\.\d+)?)/g);; if (match) { // Cast to number before pushing coordinate parts.push({ x: +match[0], y: +match[1] }); } return parts; }, []); if (drawOptions.includes('bleed')) { const p1 = svg``; s.appendChild(p1); } if (drawOptions.includes('original')) { const p = svg``; s.appendChild(p); } const p2 = svg``; s.appendChild(p2); if (drawOptions.includes('points')) { const curves = svg``; s.appendChild(curves); let gCurve; const lines = svg``; curves.appendChild(lines); pathCoords.forEach((c, i) => { // Skip first point we'll draw the last instead if (r === 0 || i !== 0) { const id = (i - 1) % 4; const isNode = r === 0 || id === 0 || id === 3; if (r !== 0) { let c2; if (id === 0 || id === 2) { const nextId = (i + 1) % (pathCoords.length); c2 = pathCoords[nextId]; } c2 && lines.appendChild( svg`` ); } (r === 0 || i !== 0) && curves.appendChild( makePoint(c, isNode ? 0.06 : 0.06, isNode ? `${pointColor}` : `${cpColor}`) ) } }); } } // s.appendChild(svg``); let t0, t1; t0 = performance.now(); makePath( 'M 2 1.1 L 3.9 3.9 L 0.1 3.9 Z', '#f6487fFA' ); makePath( `M ${5+0.14} ${1+0.14+0.05} L ${8-0.14} ${1+0.14+0.05} L ${8-0.14} ${4-0.14+0.05} L ${5+0.14} ${4-0.14+0.05} Z`, '#66d3d8' ); makePath( 'M 10.69 1.02 L 11.18 2 L 12.27 2.16 L 11.48 2.93 L 11.66 4.02 L 10.69 3.5 L 9.71 4.02 L 9.9 2.93 L 9.11 2.16 L 10.2 2 L 10.69 1.02 L 10.69 1.02 L 10.69 1.02 Z', '#fba8d5' ); makePath( 'M 3.47 5.87 L 2.77 5.17 L 1.97 5.97 L 1.16 5.17 L 0.46 5.87 L 1.26 6.67 L 0.46 7.48 L 1.16 8.18 L 1.97 7.38 L 2.77 8.18 L 3.47 7.48 L 2.67 6.67 L 3.47 5.87Z', '#9f92ff' ) makePath( 'M 7.97 5.14 L 6.1 5.14 L 6.1 6.28 L 4.96 6.28 L 4.96 8.14 L 6.83 8.14 L 6.83 7.01 L 7.97 7.01 L 7.97 5.14Z', "#fdfb66" ) makePath( 'M 9.33 7.16 L 10.48 6.95 L 10.26 8.31 L 11.98 6.01 L 10.83 6.23 L 11.05 4.87Z', '#97d3ff' ) t1 = performance.now(); s.perfs = [{event: 'Drawing', time: t1 - t0}]; return s; }32:T424,md` We need vectors to be able to project distances on the corner lines and position the curve points accordingly. Vectors basic attributes are: - their horizontal and vertical _components_, \`dx\` and \`dy\` respectively which are the projection of the vector on the x and y axis. - their _magnitude_, which is the length of the vector Since it's so damn useful, we also _normalize the vector components_, giving us the components of the corresponding _unit vector_, which is the same vector, but going from the first point and with a length of 1. This will turn out to be quite useful when projecting distances along the vector without having to calculate the ratio to the vector magnitude. We can add other things too, like the _normal vector_ which is the unit vector, but this time perpendicular to the vector. Last but not least, we can compute the angle of the vector itself. As an example of how to use the unit & normal vectors we draw an arrow pointing to the end point of the vector. `33:T4850,vectorDemo = { await visibility; // const vectorArrowLength = 0.15; const vectorArrowOffset = 0.14; // const vectorArrowAngleDeg = 40; const vectorOriginX = 1.5; const vectorOriginY = 3.5; const bbox = {x: 0, y:0, w: 8, h: 4.5}; const boxHeight = bbox.h * 58; const boxWidth = bbox.w * 58; const convertToSvgCoord = (value) => (value) / boxWidth * bbox.w const xmlns = 'http://www.w3.org/2000/svg'; const isFirstRun = !this; const s = this || document.createElementNS(xmlns, 'svg'); let frame; // store mouse position; const mouse = s.mouse || {x: 0, y: 0}; // starting points let origin = s._origin || {x: vectorOriginX, y: vectorOriginY}; let point = s._point || {x: 7, y: 0.5}; // get ref frome previous instance let endPoint = s._endPoint; let originPoint = s._originPoint; let line = s._line; let arrow = s._arrow; let vComp = s._vComp; let dyLabel = s._dyLabel; let vCompLabel = s._vCompLabel; let hComp = s._hComp; let dxLabel = s._dxLabel; let hCompLabel = s._hCompLabel; let unit = s._unit; let unitLine = s._unitLine; let unitLine2 = s._unitLine2; let normal = s._normal; let normalLine = s._normalLine; let normalLine2 = s._normalLine2; let unitNormal = s._unitNormal; let unitNormalLabel = s._unitNormalLabel; let magPath = s._magPath; let magLabel = s._magLabel; let magPoint1 = s._magPoint1; let magPoint2 = s._magPoint2; // Initialize the scene on first run if (isFirstRun) { s.setAttributeNS(null, 'viewBox', `${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`); s.setAttributeNS(null, 'class', 'no-shadow no-border'); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); s.setAttributeNS(null, 'style', `margin: 100px 50px 50px 60px; width: 100%; height: auto; max-width: ${boxWidth}px; box-sizing: border-box; overflow: visible` ); const transition = `transition: transform calc(var(--duration) * 4) ease-in-out, opacity calc(var(--duration) * 4) ease-in-out; `; // Create the vector const v = vec(origin, point); // Main vetor line line = svg``; s.appendChild(line); // Magnitude representation magPath = svg``; s.appendChild(magPath); // Magnitude value magLabel = svg``; s.appendChild(magLabel); // Vertical component line vComp = svg`` s.appendChild(vComp); // Value and label (vertical component) dyLabel = svg``; vCompLabel = svg` dy ${dyLabel} `; s.appendChild(vCompLabel); // Horizontal component line hComp = svg`` s.appendChild(hComp); // Value and label (horizontal component) dxLabel = svg`` hCompLabel = svg` dx ${dxLabel} `; s.appendChild(hCompLabel); // Unit vector line unitLine = svg`` s.appendChild(unitLine); // Unit length line (normal offset) unitLine2 = svg`` s.appendChild(unitLine2); // Normal vector line normalLine = svg`` s.appendChild(normalLine); // Normal length line (unit offset) normalLine2 = svg`` s.appendChild(normalLine2); // '1' label (length of the unit & normal) unitNormalLabel = svg` 1 `; s.appendChild(unitNormalLabel); // Zero coordinates point to initialize the points; const z = {x: 0, y: 0}; // Vector end point endPoint = makePoint(z, 0.12, pointColor); s.appendChild(endPoint); // Arrow drawn after the end point and before the other arrow = svg``; s.appendChild(arrow); // Vector origin originPoint = makePoint(z, 0.12, pointColor, 'origin', true); s.appendChild(originPoint); // Unit point unit = makePoint(z, 0.1, cpColor, 'unit vector'); s.appendChild(unit); // Normal point normal = makePoint(z, 0.02, '#111111', 'normal vector'); s.appendChild(normal); // Unit + Normal point unitNormal = makePoint(z, 0.02, '#111111', 'unit + normal'); s.appendChild(unitNormal); // Magnitude point magPoint1 = makePoint(z, 0.02, '#111111', 'unit + normal'); s.appendChild(magPoint1); magPoint2 = makePoint(z, 0.02, '#111111', 'unit + normal'); s.appendChild(magPoint2); } // Do this each time // ----------------- // round to precision const l = (n, p = 2) => Math.round(n * 10 ** p) / 10 ** p; // Update svg elements attributes const update = () => { cancelAnimationFrame(frame); const rect = s.getBoundingClientRect(); const doc = (document.documentElement || document.body.parentNode); let x = mouse.x - rect.left; let y = mouse.y - rect.top; let active = false; let animate = false; // When animating we transition from source to point postion let destinations = { point: {x: 7, y: 0.5}, origin }; // check if too far away from bottom const offsetTop = 2.3; const offsetBottom = 1.25; const middle = boxHeight / 2; if ( y - middle > boxHeight * offsetBottom || y - middle < -boxHeight * offsetTop ) { active = false; animate = true; destinations.origin = {x: vectorOriginX, y: vectorOriginY}; } else { destinations.point.x = mouse.x ? x / boxWidth * bbox.w : point.x; destinations.point.y = mouse.y ? y / boxHeight * bbox.h : point.y; active = true; if ( // mouse is not within bbox !( y < boxHeight && y > 0 ) ) { animate = true; } else { cancelAnimationFrame(frame); } } // Limit magnitude to keep point inside the bounding box if (active && !dragElement) { // get vector let v = vec(origin, destinations.point); if( destinations.point.x < 0 || destinations.point.x > bbox.w) { let dx = v.mag; if (x < 0) { dx = -origin.x; } else if (x > boxWidth) { dx = bbox.w - origin.x; } destinations.point.x = origin.x + v.unit.x * dx / v.dx * v.mag; destinations.point.y = origin.y + v.unit.y * dx / v.dx * v.mag; v = vec(origin, destinations.point); } if(destinations.point.y < 0 || destinations.point.y > bbox.h) { let dy = v.mag; if (y < 0) { dy = -origin.y; } else if (y > boxHeight) { dy = bbox.h - origin.y; } destinations.point.y = origin.y + v.unit.y * dy / v.dy * v.mag; destinations.point.x = origin.x + v.unit.x * dy / v.dy * v.mag; v = vec(origin, destinations.point); } } // Animate position if ( animate && ( // positions are different l(point.x) !== l(destinations.point.x) || l(point.y) !== l(destinations.point.y) || l(origin.x) !== l(destinations.origin.x) || l(origin.y) !== l(destinations.origin.y) ) ) { point.x += point.x === destinations.point.x ? 0 : (destinations.point.x - point.x) / 10; point.y += point.y === destinations.point.y ? 0 : (destinations.point.y - point.y) / 10; origin.x += origin.x === destinations.origin.x ? 0 : (destinations.origin.x - origin.x) / 10; origin.y += origin.y === destinations.origin.y ? 0 : (destinations.origin.y - origin.y) / 10; frame = requestAnimationFrame(update); } else { point = {...destinations.point}; origin = {...destinations.origin}; cancelAnimationFrame(frame); } // get vector let v = vec(origin, point); // update arrow const min = 1.3; // Magnitude at which ease is 0% const max = 2.5; // Magnitude at which ease is 100% const exp = 1; // Easing exponent const ease = Math.log( 1 + Math.min( Math.max( v.mag - min, 0 ), max - min ) / (max - min) * 1.7183 ); const arrowPath = makeArrow( v, convertToSvgCoord(vectorArrowLength) * ease, //* (0.5 + ease / 2) vectorArrowAngleDeg * Math.PI / 180 * (ease), vectorArrowClose, vectorArrowOffset ); arrow.setAttributeNS(null, 'd', arrowPath); arrow.setAttributeNS(null, 'fill', `${vectorArrowClose ? '#111' : 'transparent'}`); // Update points and lines endPoint.setAttributeNS( null, 'style', `transform: translate(${point.x}px, ${point.y}px)` ); originPoint.setAttributeNS( null, 'style', `transform: translate(${origin.x}px, ${origin.y}px)` ); line.setAttributeNS(null, 'x1', origin.x); line.setAttributeNS(null, 'y1', origin.y); line.setAttributeNS(null, 'x2', point.x); line.setAttributeNS(null, 'y2', point.y); vComp.setAttributeNS(null, 'x1', point.x); vComp.setAttributeNS(null, 'y1', origin.y); vComp.setAttributeNS(null, 'x2', point.x); vComp.setAttributeNS(null, 'y2', point.y); hComp.setAttributeNS(null, 'x1', origin.x); hComp.setAttributeNS(null, 'y1', origin.y); hComp.setAttributeNS(null, 'x2', point.x); hComp.setAttributeNS(null, 'y2', origin.y); hCompLabel.setAttributeNS(null, 'x', origin.x + v.dx / 2); hCompLabel.setAttributeNS(null, 'y', origin.y + (v.dy < 0 ? 0.4 : -0.4)); dxLabel.textContent = `${Math.round(v.dx * 100) / 100}`; vCompLabel.setAttributeNS(null, 'text-anchor', v.dx > 0 ? 'start' : 'end'); vCompLabel.setAttributeNS(null, 'x', point.x + (v.dx > 0 ? 0.3 : -0.3)); vCompLabel.setAttributeNS(null, 'y', origin.y + v.dy / 2); dyLabel.textContent = `${Math.round(v.dy * 100) / 100}`; const flipNormal = (v.dx < 0 || v.dy > 0) && !(v.dx < 0 && v.dy > 0) ? -1 : 1; // Magnitude representation magPath.setAttributeNS( null, 'd', `M ${ v.p1.x} ${ v.p1.y } L ${ v.p1.x + flipNormal * v.normal.x * 2 } ${ v.p1.y + flipNormal * v.normal.y * 2 } L ${ v.p2.x + flipNormal * v.normal.x * 2 } ${ v.p2.y + flipNormal * v.normal.y * 2 } L ${ v.p2.x} ${ v.p2.y }` ); magPoint1.setAttributeNS( null, 'style', `transform: translate(${ v.p1.x + flipNormal * v.normal.x * 2 }px, ${ v.p1.y + flipNormal * v.normal.y * 2 }px)` ); magPoint2.setAttributeNS( null, 'style', `transform: translate(${ v.p2.x + flipNormal * v.normal.x * 2 }px, ${ v.p2.y + flipNormal * v.normal.y * 2 }px)` ); // Unit end point unit.setAttributeNS( null, 'style', `transform: translate(${ v.p1.x + v.unit.x }px, ${ v.p1.y + v.unit.y }px);` ); // Unit lines unitLine.setAttributeNS( null, 'x1', origin.x ); unitLine.setAttributeNS( null, 'y1', origin.y ); unitLine.setAttributeNS( null, 'x2', origin.x + v.unit.x ); unitLine.setAttributeNS( null, 'y2', origin.y + v.unit.y ); unitLine2.setAttributeNS( null, 'x1', origin.x + flipNormal * v.normal.x ); unitLine2.setAttributeNS( null, 'y1', origin.y + flipNormal * v.normal.y ); unitLine2.setAttributeNS( null, 'x2', origin.x + flipNormal * v.normal.x + v.unit.x ); unitLine2.setAttributeNS( null, 'y2', origin.y + flipNormal * v.normal.y + v.unit.y ); // Normal end point normal.setAttributeNS( null, 'style', `transform: translate(${ v.p1.x + flipNormal * v.normal.x }px, ${ v.p1.y + flipNormal * v.normal.y }px)` ); // Normal lines normalLine.setAttributeNS( null, 'x1', origin.x ); normalLine.setAttributeNS( null, 'y1', origin.y ); normalLine.setAttributeNS( null, 'x2', origin.x + flipNormal * v.normal.x ); normalLine.setAttributeNS( null, 'y2', origin.y + flipNormal * v.normal.y ); normalLine2.setAttributeNS( null, 'x1', origin.x + v.unit.x ); normalLine2.setAttributeNS( null, 'y1', origin.y + v.unit.y ); normalLine2.setAttributeNS( null, 'x2', origin.x + v.unit.x + flipNormal * v.normal.x ); normalLine2.setAttributeNS( null, 'y2', origin.y + v.unit.y + flipNormal * v.normal.y ); // Point unit + normal unitNormal.setAttributeNS( null, 'style', `transform: translate(${ v.p1.x + v.unit.x + flipNormal * v.normal.x }px, ${ v.p1.y + v.unit.y + flipNormal * v.normal.y }px)` ); // Unit length label (1) unitNormalLabel.setAttributeNS( null, 'x', origin.x + v.unit.x / 2 + flipNormal * v.normal.x * 1.3 ); unitNormalLabel.setAttributeNS( null, 'y', origin.y + v.unit.y / 2 + flipNormal * v.normal.y * 1.3 ); // Magnitude label magLabel.setAttributeNS( null, 'x', origin.x + v.dx / 2 + flipNormal * v.normal.x * 2.3 ); magLabel.setAttributeNS( null, 'y', origin.y + v.dy / 2 + flipNormal * v.normal.y * 2.3 ); magLabel.textContent = Math.round(v.mag * 10) / 10 // Opacity of the h + v components labels const min2 = 1.5; // Magnitude at which ease is 0% const max2 = 3; // Magnitude at which ease is 100% const exp2 = 1; // Easing exponent const ease2 = Math.log( 1 + Math.min( Math.max( v.mag - min2, 0 ), max2 ) / (max2 - min2) * 1.7183 ); vComp.setAttributeNS(null, 'opacity', 0.2 + 0.8 * ease2); hComp.setAttributeNS(null, 'opacity', 0.2 + 0.8 * ease2); hCompLabel.setAttributeNS(null, 'opacity', 0.2 + 0.8 * ease2); vCompLabel.setAttributeNS(null, 'opacity', 0.2 + 0.8 * ease2); } const handleMouseMove = (e) => { mouse.x = e.clientX || e.touches[0].clientX; mouse.y = e.clientY || e.touches[0].clientY; s.mouse = {...mouse}; update(); }; const handleTouchMove = (e) => { e.preventDefault(); mouse.x = e.touches[0].clientX; mouse.y = e.touches[0].clientY; s.mouse = {...mouse}; update(); }; // From client to svg coordinates const getMousePosition = (e) => { const rect = s.getBoundingClientRect(); return { x: (e.clientX - rect.left) / boxWidth * bbox.w , y: (e.clientY - rect.top) / boxHeight * bbox.h, }; }; const constrainInBbox = (point) => { const pos = {...point}; pos.x = pos.x > 0 ? pos.x : bbox.x + 0.1; pos.y = pos.y > 0 ? pos.y : bbox.y + 0.1; pos.x = pos.x < bbox.w ? pos.x : bbox.x + bbox.w - 0.1; pos.y = pos.y < bbox.h ? pos.y : bbox.y + bbox.h - 0.1; return pos; } let dragElement; const handleDragStart = (e) => { if (e.target.classList.contains('draggable')) { cancelAnimationFrame(frame); dragElement = e.target.parentElement; } else { origin = { ...constrainInBbox( getMousePosition(e) ) }; update(); } } const handleDrag = (e) => { if (dragElement) { cancelAnimationFrame(frame); e.preventDefault(); const pos = constrainInBbox( getMousePosition(e) ); pos.x = pos.x > 0 ? pos.x : bbox.x + 0.1; pos.y = pos.y > 0 ? pos.y : bbox.y + 0.1; pos.x = pos.x < bbox.w ? pos.x : bbox.x + bbox.w - 0.1; pos.y = pos.y < bbox.h ? pos.y : bbox.y + bbox.h - 0.1; origin = { ...pos }; update(); } } const handleDragEnd = () => { dragElement = null; } s.addEventListener('mousedown', handleDragStart); s.addEventListener('mousemove', handleDrag); s.addEventListener('touchmove', handleTouchMove, { passive: false }); s.addEventListener('mouseup', handleDragEnd); s.addEventListener('mouseleave', handleDragEnd); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('touchmove', handleMouseMove); // Cell invalidation - clean up event listeners invalidation.then(() => { s.removeEventListener('mousedown', handleDragStart); s.removeEventListener('mousemove', handleDrag); s.removeEventListener('touchmove', handleTouchMove, { passive: false }); s.removeEventListener('mouseup', handleDragEnd); s.removeEventListener('mouseleave', handleDragEnd); document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('touchmove', handleMouseMove); cancelAnimationFrame(frame); }); s._origin = origin; s._point = point; s._line = line; s._vComp = vComp; s._dyLabel = dyLabel; s._vCompLabel = vCompLabel; s._hComp = hComp; s._dxLabel = dxLabel; s._hCompLabel = hCompLabel; s._endPoint = endPoint; s._arrow = arrow; s._originPoint = originPoint; s._unit = unit; s._unitLine = unitLine; s._unitLine2 = unitLine2; s._normal = normal; s._normalLine = normalLine; s._normalLine2 = normalLine2; s._unitNormal = unitNormal; s._unitNormalLabel = unitNormalLabel; s._magLabel = magLabel; s._magPath = magPath; s._magPoint1 = magPoint1; s._magPoint2 = magPoint2; update(); return s; }34:T428,function vec(p1, p2) { // Returns a ( p1 o-> p2 ) vector object // given p1 and p2 objects with the shape {x: number, y: number} // horizontal and vertical vector components const dx = p2.x - p1.x; const dy = p2.y - p1.y; // magnitude of the vector (distance) const mag = Math.hypot(dx, dy); // unit vector const unit = ( mag !== 0 ? { x: dx / mag, y: dy / mag } : { x: 0, y: 0 } ); // normal vector const normal = rotate( unit, { x: 0, y: 0 }, Math.PI /2 ); // Angle in radians const radians = Math.atan2(dy, dx); // Normalize to clock-wise circle const normalized = 2 * Math.PI + Math.round(radians) % (2 * Math.PI) // Angle in degrees const degrees = 180 * radians / Math.PI; const degreesNormalized = ( 360 + Math.round(degrees) ) % 360; // const degrees2 = ( 360 + Math.round(degrees) ) % 360; return { dx, dy, mag, unit, normal, p1: {...p1}, p2: {...p2}, angle: { radians, normalized, degrees, degreesNormalized } }; }35:T13ab,arcDemo = { await visibility; const angle = arcAngleDeg * Math.PI / 180; const rotation = arcRotationDeg * Math.PI / 180 const points = arcCurves * Math.PI / 180 const radius = arcRadius; const bbox = {x: 0, y: 0, w: 9, h: 7}; const position = {x: bbox.w / 2, y: bbox.h / 2}; const boxHeight = bbox.h * 55; const boxWidth = bbox.w * 55; const convertToSvgCoord = (value) => (value) / boxWidth * bbox.w const xmlns = 'http://www.w3.org/2000/svg'; const s = document.createElementNS(xmlns, 'svg'); s.setAttributeNS(null, 'viewBox', `${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); s.setAttributeNS( null, 'style', `width: 100%; height: auto; max-width: ${boxWidth}px; box-sizing: border-box; overflow: visible` ); s.setAttributeNS(null, 'class', 'no-shadow no-border'); const bezier = arc(position.x, position.y, radius, angle, rotation, arcCurves).bezier; const path = bezierToPath(bezier); s.appendChild( svg`` ); let pathCoords = path.join(' ') .split(/[a-zA-Z,]/) .reduce(function(parts, part){ var match = part.match(/(-?[\d]+(\.\d+)?)/g);; if (match) { // Cast to number before pushing coordinate parts.push({ x: +match[0], y: +match[1] }); } return parts; }, []); const p = pathCoords[pathCoords.length - 1]; const cp = pathCoords[pathCoords.length - 2]; const cp2 = pathCoords[pathCoords.length - 3]; const p2 = pathCoords[pathCoords.length - 4]; const vArrow = vec(cp, p); const vArrowRot = vec(p2, p); const min = degToRad(10); // Value at which ease is 0% const max = degToRad(100); // Value at which ease is 100% const ease = Math.log( 1 + Math.min( Math.max( angle - min, 0 ), max - min ) / (max - min) * 1.7183 ); const Pi = Math.PI; const twoPi = 2 * Pi; const halfPi = Pi / 2; const arrowSize = ease * 0.71; s.appendChild( svg`` ); if (arcDrawOptions && arcDrawOptions.includes('points')) { const bezier2 = arc(position.x, position.y, convertToSvgCoord(20), angle, rotation, 4).bezier; const path2 = bezierToPath(bezier2); s.appendChild( svg`` ); s.appendChild( svg`` ); let pId = 1; let cpId = 0; const lines = svg``; s.appendChild(lines); const points = svg``; s.appendChild(points); pathCoords.forEach((c, i) => { // Skip first point we'll draw the last instead if (i !== 0) { const id = (i - 1) % 4; const isNode = id === 0 || id === 3; let c2; if (id === 0 || id === 2) { const nextId = (i + 1) % (pathCoords.length); c2 = pathCoords[nextId]; pId++; } else { cpId++; } c2 && lines.appendChild( svg`` ); i !== 0 && id !== 0 && s.appendChild( makePoint( c, isNode ? 0.09 : 0.06, isNode ? `${pointColor}` : `${cpColor}`, isNode ? `P${ i !== pathCoords.length - 1 ? `${pId - 1} / P${pId}` : `${pId - 1}` }` : `C${cpId}` ) ); } }); s.appendChild(svg``); s.appendChild(svg``); } s.appendChild( makePoint(position, 0.1, cpColor, 'Center') ); s.appendChild( makePoint(pathCoords[0], 0.1, `${pointColor}`, 'P1') ) return s; }36:T7d3,function arc(x, y, r, angle = 360, rotation = 0, curves = 4) { // We'll work with a centered cicle and translate / rotate things later if needed const c = {x, y}; const segmentAngle = angle / curves; // Compute control point distance to create a circle, const numberOfPointsInCircle = 2 * Math.PI / segmentAngle * 2; const cpDistance = ( 4 / 3 ) * Math.tan( Math.PI / numberOfPointsInCircle ) * r; // Get first vector from {x, y} to {x + radius, y} const p0 = {x: x + r, y: y} const l = (n, p = 4) => Math.round(n * 10 ** p) / 10 ** p; const createCP = (p, v, distance) => { const cp = { x: l(p.x + v.normal.x * cpDistance), y: l(p.y + v.normal.y * cpDistance), }; const mirror = { x: l(p.x - v.normal.x * cpDistance), y: l(p.y - v.normal.y * cpDistance), }; return { cp, mirror }; }; // For each segment const bezier = new Array(curves) .fill('') .map( (e, i) => { const p1 = rotate( p0, c, rotation + segmentAngle * i ); const p2 = rotate( p0, c, rotation + segmentAngle * (i + 1) ); const v1 = vec(c, p1); const v2 = vec(c, p2); const { cp: cp1, mirror: cp1Mirror } = createCP(p1, v1, cpDistance); const { cp: cp2, mirror: cp2Mirror } = createCP(p2, v2, cpDistance); return { p1: { x: l(p1.x), y: l(p1.y), ['cp']: { x: l(cp1.x), y: l(cp1.y), }, ['mirror']: { x: l(cp1Mirror.x), y: l(cp1Mirror.y) } }, p2: { x: l(p2.x), y: l(p2.y), ['cp']: { x: l(cp2.x), y: l(cp2.y), }, ['mirror']: { x: l(cp2Mirror.x), y: l(cp2Mirror.y) } }, r1: rotation + segmentAngle * i, r2: segmentAngle * (i + 1) }; }); return { numberOfPointsInCircle, cpDistance, bezier } }37:T7ad,md` ### So how do you draw a circle? To draw a circle with Bézier curves, which are similar to what you can see in a vector app like Figma _et al_, what you need is to figure out both _points_ and _control points_. The points are points on the curve, and the control points define the curvature, or the inflexion of the curve. Since we will be using _cubic Bézier curves_ to draw the circle, each curve will have two points and is basically made of four things: 1. ${tex`P\mathit 1`} – the starting point of the curve 2. ${tex`C\mathit 1`} – the first control point, defining curvature at the start of the curve 3. ${tex`C\mathit 2`} – the second control point, definin curvature at the end 4. ${tex`P\mathit 2`} – the ending point of the curve The formula I used to get a good approximation of the ideal control point distance, function of the number of points and radius of the desired circle is: ${ tex` \: \: \large f \: \normalsize\binom{\: number \: of \: points \: }{radius} \normalsize \large \to \normalsize \frac{4}{3} \cdot \small \tan \left (\: \frac{\normalsize\pi}{2} \cdot \small number \: of \: points \: \right ) \cdot \small radius `} Once again, it's imperfect but it looks quite fine, and for angles less than 300°, even 2 curves are about enough to get a good approximation, go for 4 curves if you want to be safe (it's the function default). If you want to visualize the imperfection, you need to set the angle to a full circle, and look for the difference between using 2 curves and 3 curves, the difference between 3 curves and 4 are barely noticeable. There is [a better approximation](https://spencermortensen.com/articles/bezier-circle/) available if you only care about drawing a full circle with 4 curves, but I couldn't find a way to make it work for an arbitrary number of points distributed around the circle.`38:T189a,cornerCircle = { await visibility; const drawPoints = cornerCircleAnimate && cornerCircleAnimate.includes('points'); const stroke = cornerCircleStroke; const angle = angleDeg * Math.PI / 180; const bbox = {x: 0, y:0, w: 9, h: 7}; const boxHeight = bbox.h * 55; const boxWidth = bbox.w * 55; const convertToSvgCoord = (value) => (value) / boxWidth * bbox.w; // const convertToPixelCoord = (value) => (value) / bbox.w * boxWidth; const radius = convertToSvgCoord(cornerCircleRadius); const xmlns = 'http://www.w3.org/2000/svg'; const s = document.createElementNS(xmlns, 'svg'); s.setAttributeNS(null, 'viewBox', `${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`); s.setAttributeNS(null, 'width', boxWidth); s.setAttributeNS(null, 'height', boxHeight); s.setAttributeNS( null, 'style', `margin-top: 60px; width: 100%; height: auto; max-width: ${boxWidth}px; box-sizing: border-box; overflow: visible` ); s.setAttributeNS(null, 'class', 'no-shadow no-border'); const origin = {x: 3, y: 5}; const point1 = {x: 7, y: 6}; let v1 = vec(origin, point1); point1.x = origin.x + v1.unit.x * v1Length; point1.y = origin.y + v1.unit.y * v1Length; v1 = vec(origin, point1); const point2 = rotate(point1, origin, angle); let v2 = vec(origin, point2); point2.x = origin.x + v2.unit.x * v2Length; point2.y = origin.y + v2.unit.y * v2Length; v2 = vec(origin, point2); const v3 = vec(point1, point2); // Max available size for rounding is half the smallest edge; const shortestEdgeMiddle = Math.min(v1.mag / 2, v2.mag / 2); const shortestEdgeName = shortestEdgeMiddle === v1.mag / 2 ? 'vector 1' : 'vector 2' const maxCornerSize = shortestEdgeMiddle * radius; // Create corner points and draw edges const B = origin; const A = { x: B.x + v1.unit.x * maxCornerSize, y: B.y + v1.unit.y * maxCornerSize }; const C = { x: B.x + v2.unit.x * maxCornerSize, y: B.y + v2.unit.y * maxCornerSize }; const Amax = { x: B.x + v1.unit.x * shortestEdgeMiddle, y: B.y + v1.unit.y * shortestEdgeMiddle }; const Cmax = { x: B.x + v2.unit.x * shortestEdgeMiddle, y: B.y + v2.unit.y * shortestEdgeMiddle }; const lineBA = svg`` s.appendChild(lineBA); const lineBC = svg`` s.appendChild(lineBC); // We only do the rest if the corner size (radius parameter) is greater than 0 if (maxCornerSize > 0) { const vAC = vec(A, C); const vBC = vec(B, C); const vBA = vec(B, A); const lineAC = svg`` drawPoints && s.appendChild(lineAC); const D = { x: A.x + vAC.dx / 2, y: A.y + vAC.dy / 2 } // Compute lengths const bc = vBC.mag; const bd = Math.cos(angle / 2); const fd = Math.sin(angle / 2) * bd; // simplify from abs(sin(PI - angle / 2)) const bf = Math.cos(angle / 2) * bd; // simplify from abs(cos(PI - angle / 2)) let ce = fd / (bf / bc); const be = bd / (bf / bc); const F = { x: B.x + vBC.dx * bf, y: B.y + vBC.dy * bf } const lineDF = svg`` drawPoints && s.appendChild(lineDF); const vFD = vec(F, D); const vBF = vec(B, F); ce = vFD.mag / (vBF.mag / vBC.mag); const E = { x: C.x + vFD.unit.x * ce, y: C.y + vFD.unit.y * ce } const lineCE = svg`` drawPoints && s.appendChild(lineCE); const lineBE = svg`` drawPoints && s.appendChild(lineBE); const circle = svg`` drawPoints && s.appendChild(circle); const vEA = vec(E, A); const circlePoint = {x: E.x + 1, y: E.y}; const vC = vec(E, circlePoint); const bezier = arc( E.x, E.y, ce, (Math.PI - angle), 4 * Math.PI / 2 - (vEA.angle.radians - vC.angle.radians) - (Math.PI - angle) ).bezier; const path = bezierToPath(bezier); s.appendChild( svg` "` ) drawPoints && s.appendChild( makePoint(Cmax, 0.04, '#000000', `${shortestEdgeName} magnitude / 2 (shortest)`) ); drawPoints && s.appendChild( makePoint(Amax, 0.04, '#000000', `${shortestEdgeName}} magnitude / 2 (shortest)`) ); drawPoints && s.appendChild(makePoint(E, 0.04, '#000000', 'E')); drawPoints && s.appendChild(makePoint(D, 0.04, '#000000', 'D')); drawPoints && s.appendChild(makePoint(F, 0.04, '#000000', 'F')); } const line1 = svg`` s.appendChild(line1); const line2 = svg`` s.appendChild(line2); s.appendChild(makePoint(A, 0.12, cpColor, 'A')); s.appendChild(makePoint(C, 0.12, cpColor, 'C')); s.appendChild(makePoint(B, 0.12, pointColor, 'B')); s.appendChild(makePoint(point1, 0.12, pointColor)); s.appendChild(makePoint(point2, 0.12, pointColor)); return s; }39:Ta2d,md` ### The algorithm _Pause the animation and hover over the points to reveal their names_ - Let _**B**_ the intersection of the two vectors In our case we are limiting the corner radius to _half the length of the shortest edge_. That's because we want to be able to round the next polygon corner up to as much as the previous one. We can then project this maximum length on the both edges. We mark these points as _**A**_ and _**C**_. - Let ${tex`\alpha = \widehat{ABC}`} - Let _**D**_ the middle of ${tex`\small\overrightarrow{AC}`} **_E_** will be the center of the circle, but we first want to find **_F_**, which is the intersection of the perpendicular to **_BC_** that goes through **_D_**, from which we can get the distances **_BF_** and **_FD_** using a bit more trigonometry: - ${tex`\small BD \normalsize = \cos \left (\frac{\alpha}{2} \right )`} - ${tex`\small BF \normalsize = \cos \left (\frac{\alpha}{2} \right ) \cdot \small BD \normalsize`} - ${tex`\small FD \normalsize = \sin \left (\frac{\alpha}{2} \right ) \cdot \small BD \normalsize `} Finally it's time to wrap it up using Thales theorem to get **_CE_**, which is the radius we've been looking for all the way: - Let BC be the value of the "Maximum length" slider (more on this later) - ${tex`\small CE \normalsize = \small FD \normalsize \cdot \frac{ \small BC}{ \small BF}`} There we are! We just found the radius we were looking for. ** Addendum ** You might want to understand how we calculated the maximum value for BC. If we compute the vector for the appropriate edge on which BC sits, we can basically get the coordinate of any point that exists on the related line by multiplying the derived unit vector components by the desired distance. - Let _**vector**_ the vector representing the left edge - Let _**vector.unit**_ the unit vector for this previous vector - Let _**vector.mag**_ the magnitude of _**vector**_ (remember the magnitude is the distance between the two points, which we compute as the hypothenuse of a right-angled triangle) \`BC = vector.mag / 2\` In our particular case, we use this value as the upper limit, but give the user the option to pick any postive value up to that value: - let \`BC = Math.min(userInput, vector.mag / 2)\` Although, to dynamically place C, we need still need to find its coordinates, to do that we start from B coordinates and simply add to the \`x\` and \`y\` component the corresponding unit vector component times BC: \`\`\`js const C = { x: B.x + vector.unit.x * BC, y: B.y + vector.unit.y * BC }; \`\`\` `3a:T1245,function roundSvgPath(pathData, radius, style) { if (!pathData || radius === 0) { return pathData; } // Get path coordinates as array of {x, y} objects let pathCoords = pathData .split(/[a-zA-Z]/) .reduce(function(parts, part){ var match = part.match(/(-?[\d]+(\.\d+)?)/g);; if (match) { // Cast to number before pushing coordinate parts.push({ x: +match[0], y: +match[1] }); } return parts; }, []) .filter((e, i, arr) => { // Remove consecutive duplicates const prev = arr[ (i === 0 ? arr.length - 1 : i - 1) ]; return e.x !== prev.x || e.y !== prev.y; }); // Build rounded path const path = []; for (let i = 0; i < pathCoords.length; i++) { // Get current point and the next two (start, corner, end) const c2Index = (i + 1) % pathCoords.length; const c3Index = (i + 2) % pathCoords.length; const c1 = pathCoords[i]; const c2 = pathCoords[c2Index]; const c3 = pathCoords[c3Index]; // Vectors from middle point (c2) to each ends const vC1c2 = vec(c2, c1); const vC3c2 = vec(c2, c3); const angle = Math.abs(Math.atan2( vC1c2.dx * vC3c2.dy - vC1c2.dy * vC3c2.dx, // cross product vC1c2.dx * vC3c2.dx + vC1c2.dy * vC3c2.dy // dot product )); // Limit radius to 1/2 the shortest edge length to: // 1. allow rounding the next corner as much as the // one we're dealing with right now (the 1/2 part) // 2. draw part of a circle and not an ellipse, hence // we keep the shortest edge of the two const cornerLength = Math.min( radius, vC1c2.mag / 2, vC3c2.mag / 2 ); // Find out tangential circle radius const bc = cornerLength; const bd = Math.cos(angle / 2) * bc; const fd = Math.sin(angle / 2) * bd; const bf = Math.cos(angle / 2) * bd; // simplify from abs(cos(PI - angle / 2)) const ce = fd / (bf / bc); const be = bd / (bf / bc); const a = ce; // Compute control point distance to create a circle // with quadratic bezier curves const numberOfPointsInCircle = (2 * Math.PI) / (Math.PI - angle); let idealControlPointDistance; if (style === 'circle') { // Strictly geometric idealControlPointDistance = ( 4 / 3 ) * Math.tan( Math.PI / (2 * numberOfPointsInCircle ) ) * a } else if (style === 'approx') { // Serendipity #1 rounds the shape more naturally idealControlPointDistance = ( 4 / 3 ) * Math.tan( Math.PI / (2 * ((2 * Math.PI) / angle ) ) ) * cornerLength * ( angle < Math.PI / 2 ? 1 + Math.cos(angle) : 2 - Math.sin(angle) ) } else if (style === 'hand') { // Serendipity #2 'hands free' style idealControlPointDistance = ( 4 / 3 ) * Math.tan( Math.PI / (2 * ((2 * Math.PI) / angle ) ) ) * cornerLength * ( 2 + Math.sin(angle) ) } // First point and control point const cpDistance = cornerLength - idealControlPointDistance; // Start of the curve let c1c2curvePoint = { x: c2.x + vC1c2.unit.x * cornerLength, y: c2.y + vC1c2.unit.y * cornerLength, } // First control point let c1c2curveCP = { x: c2.x + vC1c2.unit.x * cpDistance, y: c2.y + vC1c2.unit.y * cpDistance } // Second point and control point // End of the curve let c3c2curvePoint = { x: c2.x + vC3c2.unit.x * cornerLength, y: c2.y + vC3c2.unit.y * cornerLength, } // Second control point let c3c2curveCP = { x: c2.x + vC3c2.unit.x * cpDistance, y: c2.y + vC3c2.unit.y * cpDistance, } // Limit floating point precision const limit = point => ({ x: limitPrecision(point.x, 3), y: limitPrecision(point.y, 3) }); c1c2curvePoint = limit(c1c2curvePoint); c1c2curveCP = limit(c1c2curveCP); c3c2curvePoint = limit(c3c2curvePoint); c3c2curveCP = limit(c3c2curveCP) // If at last coordinate of polygon, use the end of the curve as // the polygon starting point if (i === pathCoords.length - 1) { path.unshift(`M ${c3c2curvePoint.x} ${c3c2curvePoint.y}`); } // Draw line from previous point to the start of the curve path.push(`L ${c1c2curvePoint.x} ${c1c2curvePoint.y}`); // Cubic bezier to draw the actual curve path.push( `C ${c1c2curveCP.x} ${c1c2curveCP.y }, ${c3c2curveCP.x} ${c3c2curveCP.y }, ${c3c2curvePoint.x} ${c3c2curvePoint.y }` ); } // Close path path.push('Z'); return path.join(' '); } 3b:T8a1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); if (title) form.append( html`${title}` ); form.append( html`` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3c:T653,function slider(config = {}) { let { min = 0, max = 1, value = (max + min) / 2, step = "any", precision = 2, title, description, disabled, getValue, format, display, submit, animates, animateValue, useAnimatedValueOnInit } = typeof config === "number" ? { value: config } : config; precision = Math.pow(10, precision); if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision; const form = input({ type: "range", title, description, submit, format, display, attributes: { min, max, step, disabled, value }, getValue }); let frame; const defaultAnimatedValue = (t) => { return form.input.value + ( step !== 'any' ? step : (max - min) / 10000 ); }; animateValue = animateValue || defaultAnimatedValue; const update = () => { form.input.value = animateValue(new Date().getTime()); form.input.dispatchEvent(new CustomEvent("input", {bubbles: true})); } const tick = () => { update(); frame = requestAnimationFrame(tick); } const start = () => { frame = requestAnimationFrame(tick); } const stop = () => { if (frame !== null) cancelAnimationFrame(frame), frame = null; } if (animates) { update(); start(); } else if (useAnimatedValueOnInit) { form.input.value = animateValue(new Date().getTime()); form.input.dispatchEvent(new CustomEvent("input", {bubbles: true})); } disposal(form).then(stop); // console.log(form.input.value); return form; }3d:T15bb,style = html`

CSS is form,
form follows function[s],
indeed, that is a pun

`3e:[] 2f:{"title":"Rounding polygon corners","cells":[{"id":0,"value":"md`\n# Rounding polygon corners\nIn my previous notebook about [how to find the union polygon of overlapping rectangles](https://observablehq.com/@daformat/union-polygon-and-area-of-rectangles-line-sweep-algorithm) I've included a polygon corner rounding algorithm as a post-processing step but didn't explain how it worked.\n\nIn the end, rounding arbitrary polygons essentially comes down to solving the following two things:\n1. Drawing a circle using _cubic bezier curves_, there's a catch\n2. Placing a point on a line, at some distance from another one\n\nBoth of these things are pretty easy to do once you know how, but can be daunting if you do not, so I figured I'd take some time to give you a few details about how the sausage is made while creating rounded corners on arbitrary polygons.\n\nIt involves working with vectors, trigonometry, and a few other tricks I'll tell you more about below. But first, let's see what we'll be building:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5179,"value":"md`## `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"viewof algoOptions = radio({\n title: 'Algorithm options',\n options: [\n { value: \"approx\", label: `Natural rounding` },\n { value: \"circle\", label: `Circular rounding` },\n { value: \"hand\", label: `Hand drawn` },\n ],\n value: \"approx\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"viewof drawOptions = checkbox({\n title: 'Draw options',\n options: [\n { value: \"bleed\", label: `Draw colors` },\n { value: \"points\", label: `Draw curve points` },\n { value: \"original\", label: `Draw original shape` }\n ],\n value: [\"bleed\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"viewof animate = checkbox({\n options: [\n { value: \"animate\", label: `Animate corner radius` }\n ],\n value: [\"animate\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof radius = slider({\n min: 0,\n max: 100,\n precision: 0,\n step: 0.1,\n value: 100,\n animates: animate && animate.includes('animate'),\n animateValue: (t) => (current(t) + 1) / 2 * 100,\n useAnimatedValueOnInit: true,\n title: \"Radius\",\n description: \"The maximum radius depends on the size of each corners\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof stroke = slider({\n min: 2,\n max: 15,\n step: .1,\n value: 6,\n title: \"Stroke\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"viewof height = slider({\n min: 300,\n max: 650,\n step: 1,\n value: width / 1.75,\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`\n## \n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3721,"value":"md`## Vectors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2096,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2120,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5144,"value":"md`_**fig 1** • Vector representation_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2957,"value":"function makeArrow(vector, size, angle, closed = false, offset = 0, rotation = 0) {\n\n const head = {\n x: vector.p2.x - vector.unit.x * offset,\n y: vector.p2.y - vector.unit.y * offset\n }\n\n const point = {\n x: head.x - vector.unit.x * size,\n y: head.y - vector.unit.y * size\n };\n \n const p1 = rotate(point, head, angle + rotation);\n const p2 = rotate(point, head, -angle + rotation);\n \n return `M ${p1.x} ${p1.y} L ${head.x} ${head.y} L ${p2.x} ${p2.y} ${closed ? 'Z' : ''}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2948,"value":"viewof vectorArrowLength = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 24,\n title: \"Arrow size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2952,"value":"viewof vectorArrowAngleDeg = slider({\n min: 0,\n max: 60,\n step: 1,\n value: 30,\n title: \"Arrow angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3559,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3562,"value":"md`\n## Drawing circles and circular arcs with bezier curves\n \nYour favorite search engine will be quick to tell you that it's impossible, but the good news is you can get pretty close and that should be enough for most applications to accurately represent the circle visually.\n\nThe point is, keep a pure representation of your circle in your data structure if you need it for later computations, otherwise as long as it's only visual it should be fine.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3908,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5197,"value":"md`_**fig 2** • Drawing a circle or a circular arc using cubic Bézier curves_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3855,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4003,"value":"function bezierToPath(bezier) {\n const path = [];\n\n bezier.forEach((c, i) => {\n if (i === 0) {\n path.push(`M ${c.p1.x} ${c.p1.y}`);\n }\n \n // Build curve segment\n path.push(`L ${c.p1.x} ${c.p1.y}`);\n path.push(\n `C ${c.p1.cp.x} ${c.p1.cp.y\n }, ${c.p2.mirror.x} ${c.p2.mirror.y\n }, ${c.p2.x} ${c.p2.y\n }`\n )\n });\n\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4204,"value":"viewof arcDrawOptions = checkbox({\n title: 'Draw options',\n options: [\n { value: \"animate\", label: `Animate` },\n { value: \"points\", label: `Draw curve points` }\n ],\n value: [\"animate\", \"points\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3952,"value":"viewof arcAngleDeg = slider({\n min: 0,\n max: 360,\n step: 0.1,\n precision: 0,\n value: 240,\n animates: arcDrawOptions && arcDrawOptions.includes('animate'),\n animateValue: (t) => ((1 + current2(t).t1) / 2) ** 0.5 * 240,\n title: \"Arc angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3966,"value":"viewof arcRotationDeg = slider({\n min: -360,\n max: 530,\n step: 0.1,\n precision: 0,\n value: 360,\n animates: arcDrawOptions && arcDrawOptions.includes('animate'),\n animateValue: (t) => current2(t).t2 ** 1 * 360,\n title: \"Arc rotation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3973,"value":"viewof arcCurves = slider({\n min: 2,\n max: 10,\n step: 1,\n value: 2,\n title: \"Arc curves\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4197,"value":"viewof arcStroke = slider({\n min: 2,\n max: 10,\n step: 0.1,\n precision: 0,\n value: 2,\n title: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4841,"value":"viewof arcRadius = slider({\n min: 1,\n max: 2.3,\n step: 0.01,\n value: 2,\n title: \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5404,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3262,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2934,"value":"md`\n## Finding the circle tangent to two vectors\n \nAnd here we are, finally! Now that we know how to use vectors and draw a circular arc, there's one last piece of information we still need, well, actually two: the position of the center and the radius of the circle.\n\nFinding the center and radius of the circle tangent to two vectors is a good time to remember about trigonometry, and the Thales theorem, the usual suspects when dealing with vectors. Surprised? Don't tell me you didn't see the right triangle in the vector representation figure. Explanation of the algorithm follows the figure.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2827,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":5200,"value":"md`_**fig 3** • Finding the circle tangent to a corner_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3355,"value":"viewof cornerCircleAnimate = checkbox({\n title: \"Corner radius\",\n options: [\n { value: \"animate\", label: `Animate` },\n { value: \"points\", label: `Draw construction` }\n ],\n value: [\"animate\", \"points\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2939,"value":"viewof cornerCircleRadius = slider({\n min: 0,\n max: 55,\n step: 0.01,\n precision: 1,\n value: 55,\n animates: cornerCircleAnimate && cornerCircleAnimate.includes('animate'),\n animateValue: (t) => (current3(t) / 4 + 0.75) * 55,\n title: \"Maximum length\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5089,"value":"viewof cornerCircleStroke = slider({\n min: 2,\n max: 10,\n step: 1,\n value: 2,\n title: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2851,"value":"viewof angleDeg = slider({\n min: 0,\n max: 125,\n step: 0.01,\n value: 110,\n precision: 2,\n animates: cornerCircleAnimate && cornerCircleAnimate.includes('animate'),\n animateValue: (t) => current3(t) * 52 + 70,\n title: \"Angle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5394,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":5507,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5501,"value":"md`\n## That's it!\n \nWe now know the radius, the position of the center, and a point on the circle, we just have to draw the corresponding arc and connect it to the next corner, we iterate over each corner, and once we're done, we'll get our rounded polygon as a series of connected cubic Bézier curves.\n\nOf course we could have chosen to use the svg native path command \\`A\\`, but the goal was to create an editable path, and then we couldn't have done any more creative thing like the free hand option.\n\nUsing vectors, trigonometry and Thales, we found out how to round arbitrary polygons, that's pretty cool! We also got a glimpse of how vectors are an invaluable framework when it comes to anything visual, hopefully you'll want to learn more after reading this.\n\nM.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5289,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5288,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2802,"value":" function rotate(point, center, radians) {\n const cos = Math.cos(radians),\n sin = Math.sin(radians),\n nx = (cos * (point.x - center.x)) + (sin * (point.y - center.y)) + center.x,\n ny = (cos * (point.y - center.y)) - (sin * (point.x - center.x)) + center.y;\n return {x: nx, y: ny};\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":4296,"value":"function degToRad(angle) {\n return angle * Math.PI / 180;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4340,"value":"function radToDeg(angle) {\n return angle * 180 / Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"function limitPrecision(num, precision = 2) {\n return Math.round(num * 10 ** precision) / 10 ** precision;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2808,"value":"function makePoint(point, size = 1, color = pointColor, title = false, draggable = false) {\n const g = svg\n `\n ${title ? `${title}` : ''}\n `;\n g.appendChild(\n svg``\n );\n g.appendChild(\n svg``\n );\n g.appendChild(\n svg``);\n\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5215,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5227,"value":"md`## Additional settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1300,"value":"cpColor = \"#FFA95A\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"//#ff00BBFF\npointColor = '#ff0099';","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"function current(t) {\n const period = 1.2;\n return Math.sin(\n t / 1000 * period\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5262,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5235,"value":"md`_**fig 1** • Vector representation_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3158,"value":"viewof vectorArrowClose = checkbox({\n options: [\n { value: \"close\", label: `Plain triangle arrow head` },\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3020,"value":"viewof vectorOriginY = slider({\n min: 0,\n max: 3.5,\n step: 0.01,\n value: 3,\n title: \"Origin Y\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3217,"value":"viewof vectorOriginX = slider({\n min: 0,\n max: 6.5,\n step: 0.01,\n value: 1.5,\n title: \"Origin X\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5243,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5218,"value":"md`_**fig 2** • Drawing a circle or a circular arc using cubic Bézier curves_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4665,"value":"viewof period1 = slider({\n min: 0,\n max: 10,\n step: 0.1,\n value: 2,\n title: \"Period 1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4675,"value":"viewof period2 = slider({\n min: 0,\n max: 10,\n step: 0.1,\n value: 1.1,\n title: \"Period 2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4211,"value":"function current2 (t) {\n const amplitude = 1;\n const p1 = period1;\n const phaseShift = 0; // horizontal offset\n const verticalShift = 0;\n \n t = t / 1000;\n const t1 = Math.sin(\n amplitude * (p1 * (t + phaseShift)) + verticalShift\n );\n \n const p2 = period2;\n let t2 = t % p2 / p2;\n \n return {\n t1,\n t2\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5221,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5236,"value":"md`_**fig 3** • Finding the circle tangent to a corner_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2856,"value":"viewof v1Length = slider({\n min: 0.5,\n max: 5,\n step: 0.1,\n value: 5,\n title: \"Edge 1 length\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2858,"value":"viewof v2Length = slider({\n min: 0.5,\n max: 3.6,\n step: 0.01,\n value: 3.6,\n title: \"Edge 2 length\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3359,"value":"function current3(t) {\n const s = 2;\n const period = 1.2;\n return (\n 1 / s + Math.sin(\n t / 1000 * period\n ) / s\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5274,"value":"md`\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5272,"value":"md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":5813,"value":"import {disposal} from \"@mbostock/disposal\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"import {radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5531,"value":"md`\n \n\n---\n\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}