animTest.html

<html>
<style>
body {
  margin: 0;
  overflow: clip;
  width: 100vw;
  height: 100vh;
}
</style>
<body>

<script>
// animate a bunch of divs to random positions and scales with spring physics, leveraging JS keyframes api to generate frames

const msPerAnimationStep = 1000 / 120
const BASE_WIDTH = 1536
const BASE_HEIGHT = 768
const SCALE = 0.5
const WIDTH = BASE_WIDTH * SCALE
const HEIGHT = BASE_HEIGHT * SCALE

function springStep2(config) {
  const t = msPerAnimationStep / 1000 // convert to seconds for the physics equation
  const { pos, dest, v, k, b } = config

  // Calculate the initial force (acceleration)
  const Fspring = -k * (pos - dest) // Spring stiffness, in kg / s^2
  const Fdamper = -b * v // Damping, in kg / s
  const a = Fspring + Fdamper // a needs to be divided by mass, but we'll assume mass of 1. Adjust k and b to change spring curve instead

  // Perform the first half of the velocity Verlet integration
  const newV_half = v + 0.5 * a * t

  // Update the position using the half-step velocity
  const newPos = pos + newV_half * t

  // Calculate the new force (acceleration) at the new position
  const newFspring = -k * (newPos - dest)
  const newFdamper = -b * newV_half
  const newA = newFspring + newFdamper

  // Complete the velocity Verlet integration
  const newV = newV_half + 0.5 * newA * t

  config.pos = newPos
  config.v = newV
}

function isDone(s) {
  return Math.abs(s.pos - s.dest) < 0.01 && Math.abs(s.v) < 0.01
}

function mix(a, b, pct) {
  return a + (b - a) * pct
}

function makeScheduler(render) {
  let scheduledRender = false

  const scheduleRender = () => {
    if (scheduledRender) return
    scheduledRender = true
    requestAnimationFrame(function renderAndMaybeScheduleAnotherRender(now) { // eye-grabbing name. No "(anonymous)" function in the debugger & profiler
      scheduledRender = false
      render(now)
    })
  }

  return scheduleRender
}

function getInterpolationFrames(animation, time) {
  const keyframes = animation.effect.getKeyframes();
  const duration = animation.effect.getTiming().duration;
  const progress = time / duration;

  // Find the surrounding keyframes
  const frameIndex = Math.floor(progress * (keyframes.length - 1));
  const nextFrameIndex = Math.min(frameIndex + 1, keyframes.length - 1);

  return {
    frame1: keyframes[frameIndex],
    frame2: keyframes[nextFrameIndex],
    subProgress: (progress * (keyframes.length - 1)) % 1
  };
}

// === end generic utils

const springs = Array.from({ length: 40 }, () => {
  const div = document.createElement('div')
  document.body.appendChild(div)
  div.style.width = `${WIDTH}px`;
  div.style.height = `${HEIGHT}px`;
  div.style.position = "absolute";
  div.style.backgroundSize = "cover";
  div.style.transformOrigin = 'top left'

  return {
    node: div,
    x: { pos: 0, dest: 0, v: 0, k: 160, b: 12 },
    y: { pos: 0, dest: 0, v: 0, k: 160, b: 12 },
    scale: { pos: 1, dest: 1, v: 0, k: 160, b: 12 }
  };
});

function animateToNewPosition() {
  const containerW = document.documentElement.clientWidth
  const containerH = document.documentElement.clientHeight

  springs.forEach(spring => {
    const frames = []

    // Get current values from active animation
    const activeAnimation = spring.node.getAnimations()[0];

    if (activeAnimation && activeAnimation.currentTime !== null) {
      // Get the current interpolated values from the animation
      const { frame1, frame2, subProgress } = getInterpolationFrames(activeAnimation, activeAnimation.currentTime);

      // Update spring state to match the current interpolated position
      const currentTransform = frame1.transform; // or interpolate between frame1 and frame2 if needed
      // TODO: Parse the transform to update spring.x.pos, spring.y.pos, spring.scale.pos

      activeAnimation.cancel();
    }

    spring.x.dest = Math.random() * containerW;
    spring.y.dest = Math.random() * containerH;
    spring.scale.dest = 0.5 + Math.random() * 0.5;

    for (let i = 0; i < 240; i++) {
      springStep2(spring.x)
      springStep2(spring.y)
      springStep2(spring.scale)

      frames.push({
        transform: `translate3d(${spring.x.pos}px, ${spring.y.pos}px, 0) scale3d(${spring.scale.pos}, ${spring.scale.pos}, 1)`
      })
    }

    const options = {
      duration: 2000,
      fill: 'forwards'
    };
    spring.node.animate(frames, options);
  });
}

// Initial animation
const bgImage = new Image();
bgImage.onload = () => {
  console.log('loaded')
  springs.forEach(spring => {
    spring.node.style.backgroundImage = "url('https://i.mj.run/81d2bba0-2b79-435d-b38f-043635bb2b96/0_1.jpeg')"
  });
  animateToNewPosition();
};
bgImage.src = 'https://i.mj.run/81d2bba0-2b79-435d-b38f-043635bb2b96/0_1.jpeg';


const events = {
  pointerdown: null,
}
window.addEventListener('pointerdown', (e) => {
  pointerdown = e
  scheduleRender()
});

const scheduleRender = makeScheduler(render)
function render(now) {
  if (pointerdown != null) {
    animateToNewPosition()
  }
  pointerdown = null
  scheduleRender()
}

</script>

</body>
</html>