Demo for Path.point

Path.arc.js

const p = Path.arc(
	[50, 50], // center
	40, // radius
	-90,
	180, // angle range
	time < 0.25
		? {count: Math.ceil(time * 4 * 8 + 1)}
		: time < 0.5
		? {align: 'uniform', step: scalar.fit(time, 0.25, 0.5, 90, 12.5)}
		: time < 0.75
		? {align: 'start', step: scalar.fit(time, 0.5, 0.75, 120, 45)}
		: {align: 'end', step: scalar.fit(time, 0.75, 1, 120, 45)}
)

debug(p, 'black', 0.6)

Path.arcFromPointsAndTangent.js

const p = Path.circle([50, 50], 40)
stroke(p, 'black', 2)

const start = Path.point(p, .75)
const tan = Path.normal(p, .75)

const n = 10

for (let i = 0; i < n; i++) {
  const unit = (i + time * 4) / n % 1
  const end = Path.point(p, unit)
  const a = Path.arcFromPointsAndTangent(start, tan, end)
  stroke(a, 'black', 1)
}

Path.distort.js

const p = Path.line([10, 50], [90, 50])
stroke(p, 'palegreen')

const τ = Math.PI * 2
const width = 40
const amp = 20

const wave = ([x, y]) => {
  const phase = (x / width + time) * τ
  return [
    1, Math.cos(phase) * amp / width * τ,
    0, 1,
    x, y + Math.sin(phase) * amp
  ]
}

const pd = Path.subdivide(p, 5)
debug(Path.distort(pd, wave), 'black')

Path.formula Archimedes' spiral.js

const f = t => {
  const a = t + 360 * time
  const r = 10 + (a / 360 - time) * 15
  return [
    50 + scalar.cos(a) * r,
    50 + scalar.sin(a) * r
  ]
}

const p = Path.formula(
  f,
  Iter.resample(0, 360 * 5, {step: 45})
)

stroke(p, 'black', 10)
debug(p, 'white', .5)

Path.formula epicycloid.js

const {cos, sin} = scalar

const a = cos(/*0*/time * 360/**/) * 2

const f = t => [
	(1 + cos(t) * a) * cos(t),
	(1 + cos(t) * a) * sin(t)
]

const pf = Path.formula(f, Iter.range(0, 360, 45))
const pt = Path.transform(
	pf,
	mat2d.trs([50, 50], 0, 15)
)

stroke(pt, 'lightpink', 5)
debug(pt, '', .5)

Path.formula with cusp.js

const w = 80

const f = t => {
  const phase = (t / w + time / 2) * 360
  
  return [
    t,
    40 + Math.abs(scalar.sin(phase) * 20)
  ]
}

const p = Path.formula(
  f,
  Iter.rangeWithOffset(10, 90, 20, time / 2 * -w + 10)
)

debug(p)

Path.subdivide

const p = Path.ellipse([50, 50], [40, 30])
const fl = Path.subdivide(p, /*{*/Math.round(Math.abs(scalar.cos(time*180) * 10))/*}*/)

stroke(p, 'tan', 10)
debug(fl, 'black')

pave_240219_2.js

let e = Path.cubicBezier(
  [10, 10], [10, 95], [50, 5], [90, 60]
)
e = Path.lineTo(e, [90, 90])
e = Path.arcTo(e, [60, 30], 0, false, true, [20, 60])

debug(e, 'black')

const n = 10

for (let i = 0; i < n; i++) {
  const t = ((time + i) / n) % 1

  const pointAtTime = Path.point(e, {time: t})
  dot(pointAtTime, 'palegreen', 5)

  const pointAtUnit = Path.point(e, {unit: t})
  dot(pointAtUnit, 'royalblue')
}

pave_flatten.js

const p = Path.ellipse([50, 50], [40, 30])
const fl = Path.flatten(p, scalar.fit(scalar.cos(time * 360), -1, 1, 1, 0) ** 2 * 13 + .1)

stroke(p, 'tan', 10)
debug(fl, 'black')

Polar Deformation

const polar = (intensity) =>
  Distort.fromPointTransformer(p => {
    const a = scalar.mix(270, -90, p[0] / 100)
    const r = p[1] / 2
    const polar = vec2.add([50, 50], vec2.dir(a, r))
    return vec2.mix(p, polar, intensity)
  })
  
const p = Path.merge([
  Path.subdiv(
    Path.grid( [[10, 10], [90, 90]], [4, 4]), 4),
  Path.circle([50, 50], 45)
])

const disorted = Path.distort(
  p,
  polar(scalar.coswave(time)),
  {unarcAngle: 45}
)

if (time > .5)
  debug(disorted, 'black', .5)
else
  stroke(disorted, 'black', .5)

Sketch.js

const c = Path.circle([70, 70], scalar.lerp(20, 30, scalar.coswave(time)))
stroke(c, 'black', 4)
const s = .01
const xform = mat2d.pivot(
  mat2d.trs(null, 0, [s, s]),
  [30, 30]
)

const ci = Path.transform(c, xform)
stroke(ci, 'black', 4)

const n = 4

for (let i = 0; i < n ;i++) {
  const t = (i / n + time / 2) % 1

  const start = Path.point(ci, t)
  const tan = vec2.rotate(vec2.neg(Path.normal(ci, t)),
    Math.sin(time * Math.PI * 2) * 90 + 0.1121
  )
  const end = Path.point(c, t)
  stroke(
    Path.arcFromPointsAndTangent(start, tan, end),
    'black', 4)
}

Twirl Deformation.js

const twirl = (center, radius, angle) =>
  Distort.fromPointTransformer(p => {
    const d = vec2.dist(center, p)
    const a = scalar.smoothstep(radius, 0, d) * angle
    return vec2.rotate(p, a, center)
  })

const p = Path.grid([[10, 10], [90, 90]], [4, 4])

const disorted = Path.distort(
  Path.subdiv(p, 10), 
  twirl([50, 50], 40, scalar.sin(time * 360) * 90)
)

if (time > .5)
  debug(disorted, 'black', .5)
else
  stroke(disorted, 'black', .5)