Genuary 18: VHS

// simulation speed, higher number is faster (and probably

// more unstable lol, i'm not a physics engine dev)

const dt = 0.1

const stepsPerFrame = 4

let objects = []

let tapeTopCorners = []

let tapeBottomCorners = []

let baseTapeColor, shinyTapeColor

​

// Basically everything is made of point masses connected by spring-damper

// forces. Some nodes on the TP chains are pinned to points on the trees and

// the root of the tree is pinned to the ground.

​

function setup() {

  createCanvas(600, 600, WEBGL)

  baseTapeColor = color('#111')

  shinyTapeColor = color('#CCC')

  regenerate()

}

​

function gravity(obj) {

  return createVector(0, 80).mult(obj.mass);

}

​

function wind(obj) {

  const offAng = 0.0008 * obj.position.x + 5*cos(0.0009 * obj.position.y)

  const offMag = sin(0.0005 * obj.position.x) + 10*cos(0.002 * obj.position.y)

  return p5.Vector.fromAngle(

    20 * (sin(millis() / 5000 + offAng) + 0.5 * sin(millis() / 8000 + 100 + offAng)),

    150 * cos(millis() / 5000 + offMag) - 15

  ).mult(20)

}

​

function springForce(kSpring, kDamper, target) {

  return (obj) => {

    const fSpring = target().copy().sub(obj.position).mult(kSpring)

    const fDamper = obj.vel.copy().mult(-kDamper)

    return fSpring.add(fDamper)

  }

}

​

function regenerate() {

  objects = []

  const branches = []

  tapeTopCorners = [

    { position: createVector(-100, -20) },

    { position: createVector(100, -20) },

  ]

  tapeBottomCorners = [

    { position: createVector(-100, 20) },

    { position: createVector(100, 20) },

  ]

  const addTape = (pins) => {

    pins.sort((a, b) => a.position.x - b.position.x)

    const xPositions = pins.map((p) => p.position.x)

    const yPositions = pins.map((p) => p.position.y)

    const links = []

    const tapeOffset = createVector(0, 0, 12)

    const tapeTangent = tapeOffset.copy().normalize()

    for (let i = 0; i <= xPositions.length - 1; i += 0.03) {

      const a = floor(i)

      const b = ceil(i)

      const mix = i - a

      const link = {

        mass: 8,

        position: createVector(

          lerp(xPositions[a], xPositions[b], mix),

          lerp(yPositions[a], yPositions[b], mix),

        ),

        vel: createVector(

          0.8*(cos(i*12) + 0.5*cos(pow(i*12,2))),

          -abs(sin(i*8) + 0.5*sin(pow(i*8,2))),

        ).mult(8000),

        forces: [

          wind,

          gravity,

        ],

        constraints: [],

      }

      links.push(link)

    }

    const first = links[0]

    const last = links[links.length - 1]

    first.constraints.push(() => {

      const target = pins[0].position

      first.position.x = target.x

      first.position.y = target.y

    })

    last.constraints.push(() => {

      const target = pins[1].position

      last.position.x = target.x

      last.position.y = target.y

    })

    for (let i = 1; i < links.length; i++) {

      const prev = links[i - 1]

      const next = links[i]

      const nextNext = links[i+1]

      const dir = prev.position.copy().sub(next.position)

      const dist = dir.mag()

      dir.normalize()

      prev.mass += dist * 2

      next.mass += dist * 2

      prev.forces.push(springForce(20*95, 5*25, () => {

        const off = prev.position.copy().sub(next.position).normalize().mult(dist)

        return next.position.copy().add(off)

      }))

      next.forces.push(springForce(20*95, 5*25, () => {

        const off = next.position.copy().sub(prev.position).normalize().mult(dist)

        return prev.position.copy().add(off)

      }))

      next.draw = () => {

        noStroke()

        const tangent = next.position.copy().sub(prev.position).normalize()

        specularMaterial(baseTapeColor)

        shininess(150)

        let nextTangent = tangent

        if (nextNext) {

          nextTangent = nextNext.position.copy().sub(next.position).normalize()

        }

        const normal1 = tangent.cross(tapeTangent).mult(-1)

        const normal2 = nextTangent.cross(tapeTangent).mult(-1)

        beginShape(TRIANGLE_STRIP)

        normal(normal1.x, normal1.y, normal1.z)

        vertex(prev.position.x, prev.position.y, prev.position.z)

        vertex(prev.position.x+tapeOffset.x, prev.position.y+tapeOffset.y, prev.position.z+tapeOffset.z)

        normal(normal2.x, normal2.y, normal2.z)

        vertex(next.position.x, next.position.y, next.position.z)

        vertex(next.position.x+tapeOffset.x, next.position.y+tapeOffset.y, next.position.z+tapeOffset.z)

        endShape()

      }

    }

    objects.push(...links)

  }

  addTape(tapeTopCorners.slice())

  addTape(tapeBottomCorners.slice())

}

​

function draw() {

  background('#f79cae')

  orbitControl()

  ambientLight(150)

  pointLight(100, 100, 100, -width/2, -200, -width/2)

  pointLight(100, 100, 100, -width/2, 200, -width/2)

  pointLight(100, 100, 100, width/3, -400, width/2)

  push()

  translate(0, -height / 8)

  rotateY(PI/4)

  const positions = [

    createVector(

      -150 + 50*sin(millis()*0.001),

      50*sin(millis()*0.0015+10)

    ),

    createVector(

      150 + 50*sin(millis()*0.0012 + 20),

      50*sin(millis()*0.0008+30)

    )

  ]

  const rotations = [

    sin(millis() * 0.002 - PI/2) * PI/4,

    sin(millis() * 0.0022 + 40) * PI/4

  ]

​

  const r = 20

  tapeTopCorners.forEach((corner, i) => {

    corner.position = positions[i].copy().add(

      p5.Vector.fromAngle(rotations[i], -r)

    )

  })

  tapeBottomCorners.forEach((corner, i) => {

    corner.position = positions[i].copy().add(

      p5.Vector.fromAngle(rotations[i], r)

    )

  })

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

    for (const obj of objects) {

      const accel = obj.forces.reduce((acc, next) => acc.add(next(obj)), createVector(0, 0))

      accel.mult(1/obj.mass)

      obj.vel.add(accel.mult(dt))

    }

    for (const obj of objects) {

      obj.position.add(obj.vel.copy().mult(dt));

      obj.constraints.forEach((applyConstraint) => applyConstraint(obj))

    }

  }

  for (const obj of objects) {

    push()

    if (obj.draw) obj.draw(obj)

    pop()

  }

  positions.forEach((position, i) => {

    push()

    translate(position.x, position.y, position.z + 5)

    rotateZ(rotations[i])

    push()

    translate(0, -1.5 * r, 0)

    noStroke()

    specularMaterial(100)

    shininess(20)

    box(3 * r, 3 * r, 20)

    translate(0, 0.15*r, 0)

    box(2.7 * r, 2.7 * r, 22)

    specularMaterial(200)

    shininess(240)

    translate(0, r * 0.25, 0)

    rotateX(PI/2)

    cylinder(10, 24)

    pop()

    push()

    noStroke()

    fill(0)

    box(2.4 * r, 2, 15)

    pop()

    pop()

  })

  pop()

}