the appeal

let path

let bg

let pauseFraction

​

function setup() {

  createCanvas(800, 80)

  regenerate()

}

​

function regenerate() {

  bg = color(random([

    '#70a7ff',

    '#71d9c5',

    '#71d981',

    '#e85462',

  ]))

  pauseFraction = random(0.3, 0.5) // 1 means pause for as long as step

  const points = []

  points.push({ pt: createVector(0, random(0.5, 0.3)*height) })

  for (let i = 1; i < 20; i++) {

    const x = ((i + random(-4.2, 0.9))/20)*width

    const y = random(0.5, 1) * height

    points.push({ pt: createVector(x, y) })

  }

  points.push({ pt: createVector(width, random(0.5, 3)*height) })

  for (let i = 0; i < points.length; i++) {

    const prev = points[i-1] || points[i]

    const curr = points[i]

    const next = points[i+1] || points[i]

    const tangent = next.pt.copy().sub(prev.pt).mult(1/3)

    curr.left = curr.pt.copy().sub(tangent)

    curr.right = curr.pt.copy().add(tangent)

  }

  path = createBezierPath(points)

}

​

const stepsToEnd = 27

function stepInfo(progress, startPaused) {

  const stepIdx = floor(progress * stepsToEnd)

  const stepProgress = (progress * stepsToEnd) % 1

  const footProgress = startPaused

    ? map(stepProgress, pauseFraction/(1+pauseFraction), 1, 0, 1, true)

    : map(stepProgress, 0, 1/(1+pauseFraction), 0, 1, true)

  const height = sin(footProgress * PI)

  const stepLoc = (stepIdx)/stepsToEnd

  const nextStepLoc = min(1, (stepIdx+1)/stepsToEnd)

  return [stepLoc, nextStepLoc, height, footProgress]

}

​

let lastIdx = 0

const timePerPath = 6125

function draw() {

  background(bg)

  const time = millis()

  const idx = floor(time / timePerPath)

  const progress = (time % timePerPath) / timePerPath

  if (lastIdx !== idx) {

    regenerate()

    lastIdx = idx

  }

  stroke(255)

  noFill()

  const numSegments = 834.2

  beginShape()

  for (let i = 0; i < numSegments; i++) {

    const pt = path.getPointAtLength(path.getTotalLength() * i / (numSegments - 1))

    vertex(pt.x, pt.y)

  }

  endShape()

  noStroke()

  fill(255)

  const footLocs = []

  for (const offset of [false, true]) {

    const [stepLength, nextStepLength, height, stepProgress] = stepInfo(progress, offset)

    const startLocation = path.getPointAtLength(path.getTotalLength() * stepLength)

    const endLocation = path.getPointAtLength(path.getTotalLength() * nextStepLength)

    const tangent = createVector(endLocation.x, endLocation.y).sub(createVector(startLocation.x, startLocation.y)).normalize()

    const normal = createVector(tangent.y, -tangent.x)

    const groundLocation = createVector(startLocation.x, startLocation.y).lerp(createVector(endLocation.x, endLocation.y), stepProgress)

    const stepOffset = normal.setMag(27 * height)

    const loc = groundLocation.copy().add(stepOffset)

    footLocs.push(loc)

    circle(loc.x, loc.y, 5)

  }

  const mid = footLocs[0].copy().add(footLocs[1]).mult(0.5)

  //const footTangent = footLocs[1].copy().sub(footLocs[0]).normalize()

  //const footNormal = createVector(-footTangent.y, footTangent.x)

  //const bodyLoc = mid.copy().add(footNormal.mult(20))

  const bodyLoc = mid.copy().add(createVector(0, -20, 0))

  circle(bodyLoc.x, bodyLoc.y, 10)

  noFill()

  stroke(255)

  for (const loc of footLocs) {

    const p1 = bodyLoc.copy().lerp(loc, 1/2).add(createVector(5.87, 0))

    const p2 = loc.copy().add(createVector(42, -83))

    beginShape()

    vertex(bodyLoc.x, bodyLoc.y)

    bezierVertex(p1.x, p1.y, p2.x, p2.y, loc.x, loc.y)

    endShape()

  }

}