luizbills · June 4, 2025 14:05 · luizbills · Feb 18, 2025
diff --git a/code.js b/code.js
 // based on https://www.gafferongames.com/post/fix_your_timestep/
 const TARGET_FPS = 60
 const dt = 1/TARGET_FPS
 const eventData = { deltaTime: dt, elapsed: 0 }
 let _accumulated = 0
 let _lastFrameTime = performance.now()

 requestAnimationFrame(gameLoop);

 /**
 * @param {number} now
 */
 function gameLoop (now) {
  requestAnimationFrame(gameLoop);

  let updated = 0,
    frameTime = (now - _lastFrameTime) / 1000

  _lastFrameTime = now
  
  if (frameTime > 0.3) {
    return console.warn('skipping too long frame')
  }
  
  _accumulated += frameTime;

  while (_accumulated >= dt) {
    updated++

    window.dispatchEvent(new CustomEvent('AnimationUpdate', { detail: eventData }))

    eventData.elapsed += dt
    _accumulated -= dt
  }

  if (updated) {
    window.dispatchEvent(new CustomEvent('AnimationDraw'))
  }
 }
diff --git a/usage.md b/usage.md
	// based on https://www.gafferongames.com/post/fix_your_timestep/
	const TARGET_FPS = 60
	const dt = 1/TARGET_FPS
	const eventData = { deltaTime: dt, elapsed: 0 }
	let _accumulated = 0
	let _lastFrameTime = performance.now()

	requestAnimationFrame(gameLoop);

	/**
	* @param {number} now
	*/
	function gameLoop (now) {
	requestAnimationFrame(gameLoop);

	let updated = 0,
	frameTime = (now - _lastFrameTime) / 1000

	_lastFrameTime = now

	if (frameTime > 0.3) {
	return console.warn('skipping too long frame')
	}

	_accumulated += frameTime;

	while (_accumulated >= dt) {
	updated++

	window.dispatchEvent(new CustomEvent('AnimationUpdate', { detail: eventData }))

	eventData.elapsed += dt
	_accumulated -= dt
	}

	if (updated) {
	window.dispatchEvent(new CustomEvent('AnimationDraw'))
	}
	}