30:Teb0,{ const padding = 30; const dim = Math.min( width, pxPerMeter * (rWall + frontOverhang) + 2 * padding ); const ratio = (dim - 2 * padding) / (rWall + frontOverhang); const scale = (x) => x * ratio; const cx = Math.min(scale(rWall) + padding, width - scale(rWall) - padding); const cy = dim - padding - scale(frontOverhang); const vehicleLength = wheelbase + 2 * frontOverhang; const rotate = (angle, x, y, w, h) => `rotate(${angle} ${x + w / 2} ${y + h / 2})`; return htl.svg``; }31:Te5f,{ const computeVariableValue = (name) => { switch (name) { case "Front Overhang": return frontOverhang; case "Steering Angle": return steeringFrontAngleInnerM; case "Track Width": return trackWidth; case "Wheelbase": return wheelbase; } }; const variables = [ "Front Overhang", "Steering Angle", "Track Width", "Wheelbase" ]; const colorScale = d3.scaleDivergingSymlog( [-0.5, 0, 0.5], d3.interpolateRdBu ); const valScale = d3.scaleLog([0.5, 1]); const data = variables.map((variable) => { const getVar = (name, val) => name == variable ? val : computeVariableValue(name); const variableValue = computeVariableValue(variable); const vals = valScale .ticks(10) .flatMap((v) => { const mult = valScale(v); return [mult * variableValue, variableValue / mult]; }) .slice(2, -1); const compute = (val) => Math.sqrt( (getVar("Wheelbase", val) * cot((getVar("Steering Angle", val) * Math.PI) / 180) + 0.5 * getVar("Track Width", val) + getVar("Track Width", val) * 0.5) ** 2 + (getVar("Wheelbase", val) + getVar("Front Overhang", val)) ** 2 ); return { variable, max: d3.max(vals.map(compute)), vals, compute, variableValue }; }); const padding = 30; const height = width / 2 + padding; const dimScale = d3.scaleLinear( [0, d3.max(data.map((d) => d.max))], [0, height / 2 - 3 * padding] ); const buildSmallMultiple = ( { variable, vals, compute, variableValue }, width, height ) => htl.svg` ${variable} ${halfCircle({ cx: padding + dimScale(compute(variableValue)), cy: height - padding, r: dimScale(compute(variableValue)), color: "#333", "stroke-width": 3 })} ${vals.map((val) => { const rVal = compute(val); const r = dimScale(rVal); return halfCircle({ cx: padding + r, cy: height - padding, r, color: colorScale(Math.log10(val / variableValue)) }); })} `M${dimScale(t) * 2 + padding},${height - padding}L${ dimScale(t) * 2 + padding },${height - padding + 3}` ) .join("")}`} fill="none" stroke="white" /> ${dimScale .ticks(10) .map((t, i) => i % 2 == 0 ? htl.svg`${format( t )}m` : "" )} `; return htl.svg``; }32:[] 2e:{"title":"Turning circle","cells":[{"id":0,"value":"# Turning circle\n\nComputes the minimal circle in which a vehicle can perform a circular turn (like a U-turn).\n\nThere are several circles that are of interest. The *wall-to-wall circle* ${tex`R_{wall}`} denotes the minimum radius that walls could be built and still let the vehicle turn, whereas the *kerb-to-kerb circle* ${tex`R_{kerb}`} is where kerbs low enough for the front of the vehicle could overhang them and still turn, without it's wheels hitting the kerb. Finally ${tex`R_{min}`} is the circle that the other side of the vehicle wouldn't touch, so for instance that could be the size of an island in a round about.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof frontOverhang = Inputs.range([0, 5], {\n label: htl.html`Front Overhang (in meters) ${tex`g`}`,\n value: 2.75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof steeringFrontAngleInnerM = Inputs.range([2, 90], {\n label: htl.html`Steering Front Angle (in deg) ${tex`\\delta_i`}`,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof trackWidth = Inputs.range([0.6, 10], {\n label: htl.html`Track Width (in meters) ${tex`w`}`,\n value: 2.55\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof wheelbase = Inputs.range([0.8, 20], {\n label: htl.html`Wheelbase (in meters) ${tex`l`}`,\n value: 6.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"Click the vehicle to animate. Select the menu next to diagram to download SVG diagram.","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"### Sensitivity\n\nPlaying with the above parameters is fun, but is there a way to understand how strongly they impact the turning circle.\n\nExamime the below charts: they visualize the impact of changing each of the parameters by ±50% and showing the resulting wall-to-wall circle.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"### Equations\n\nHere's how you can compute these circles:","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"tex.block`R_{1} = l \\cdot \\text{cot}(\\delta_i) + \\frac{w}{2} = ${format(\n wheelbase\n)}m \\cdot \\text{cot}(${format(steeringFrontAngleInner)}) + \\frac{${format(\n trackWidth\n)}m}{2} = ${format(r1)}m`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"tex.block`R_{kerb} = \\sqrt{ {l}^2 + \\left( R_{1} + \\frac{w}{2} \\right)^2 } = \\sqrt{ {${format(\n wheelbase\n)}m}^2 + \\left(${format(r1)}m + \\frac{${format(\n trackWidth\n)}m}{2} \\right)^2 } = ${format(rKerb)}m`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"tex.block`R_{wall} = \\sqrt{ \\left( R_{1} + \\frac{w}{2} \\right)^2 + (l + g )^2 } = \\sqrt{ \\left( ${format(\n r1\n)}m + \\frac{${format(trackWidth)}m}{2} \\right)^2 + (${format(\n wheelbase\n)}m + ${format(frontOverhang)}m )^2 } = ${format(rWall)}m`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"### Appendix\n\nHere are some implementation pieces of this notebook","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"tireRadius = 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"tireWidth = 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"r1 = wheelbase * cot(steeringFrontAngleInner) + 0.5 * trackWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"rWall = Math.sqrt(\n (r1 + trackWidth * 0.5) ** 2 + (wheelbase + frontOverhang) ** 2\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"rKerb = Math.sqrt(wheelbase ** 2 + (r1 + trackWidth * 0.5) ** 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"steeringFrontAngleInner = (steeringFrontAngleInnerM * Math.PI) / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"pxPerMeter = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"cot = (angle) => 1.0 / Math.tan(angle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"rect = ({ cx, cy, w, h, rotation, ...attrs }) =>\n htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"measurementArrow = ({ cx, cy, r, angle, label, value }) =>\n htl.svg`\n \n ${\n value < 9\n ? \"\"\n : htl.svg`

${label}

${format(value)}m\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":423,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"format = d3.format(\".3~r\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"halfCircle = ({ cx, cy, r, color, ...attrs }) =>\n htl.svg``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}