Offset Euler Spiral
single_plot = html` <svg width="${width*.8}" height="${width*.8}" stroke-width="0.005" fill="none"> <path d="${clothoid_plot()}" stroke="#8ae" transform="${`scale(${width*.8}) translate(.5 .5) scale(.45 -.45)`}" /> <path d="${offset_clothoid_plot(offset)}" stroke="#c41" transform="${`scale(${width*.8}) translate(.5 .5) scale(.45 -.45)`}" /> </svg>`
Sliders for the offset and the length of the clothoid to plot:
viewof offset = html` <input type=range min=-0.3 max=0.3 value=.07 step=any style="width:${Math.min(width, 600)}px" />`
viewof maxs = html` <input type=range min=1 max=7 value=5 step=any style="width:${Math.min(width, 600)}px" />`
clothoid_plot = () => bezpts_to_svgpath( bezeval(clothoid, [-maxs, maxs], viewport, tolerance), digits)
offset_clothoid_plot = (offset) => bezpts_to_svgpath( bezeval(offset_clothoid(offset), [-maxs, maxs], viewport, tolerance), digits)
dFresnelC = vals2coeffs(pts.map(s => Math.cos(s*s)))
dFresnelS = vals2coeffs(pts.map(s => Math.sin(s*s)))
FresnelC = cumsum(dFresnelC).map(c => .5 * maxs * c)
FresnelS = cumsum(dFresnelS).map(c => .5 * maxs * c)
clothoid = (s) => { const t = (Math.abs(s) * 2 / maxs) - 1; const ss = Math.sign(s); return [ss * evaluate(FresnelC, t), ss * evaluate(FresnelS, t)] }
offset_clothoid = (offset) => (s) => { const t = (Math.abs(s) * 2 / maxs) - 1; const ss = Math.sign(s); return [ ss * evaluate(FresnelC, t) - offset*evaluate(dFresnelS, t), ss * evaluate(FresnelS, t) + offset*evaluate(dFresnelC, t)] }
pts = chebpts(npts).map(t => .5 * maxs * (t + 1))
npts = 65
tolerance = 0.0002
digits = 4
viewport = [-2, 2, -2, 2]
import {chebpts, vals2coeffs, evaluate, diff, cumsum} from '@jrus/cheb'
import {bezeval, bezpts_to_svgpath} from '@jrus/bezplot'