2a:["$","title",null,{"children":"FPS Counter | Fabian Iwand | Observable"}] 2f:T94f,createDisplay = { restart; const instances = []; let run = false; invalidation.then(() => { run = false; console.log('createDisplay: invalidate'); instances.slice().forEach((instance, i) => { instance.unregister(); instance.clear(); }); }); const every = 2; let skip = 0; const opts = { steps: 120, height: 60, scale: 3, gap: 1 }; const loop = () => { if(0 >= skip--) { skip += every; for(let i = 0; i < instances.length; i++) { instances[i].refresh(); } } if(run) requestAnimationFrame(loop); }; const start = () => { if(!run) { run = true; loop(); } }; return function createDisplay(instance, id) { start(); if(instance) { console.debug('Reusing instance %s (%s)', id, instance.id); instance.unregister(); instance.setRegistry(instances); return instance; } console.debug('Creating instance %s with %d samples', id, numSamples); const counter = fpsCounter(numSamples, true); const fpsMeter = meter(opts.steps, opts.height, opts.scale, opts.gap); const fpsValue = html``; const element = html`

${fpsMeter} ${fpsValue}`; element.id = id; fpsMeter.classList.add('fps-meter'); fpsValue.classList.add('fps-value'); let value = null, registry = instances; Object.assign(element, { setRegistry(instances) { registry = instances; return this; }, unregister() { const index = registry.indexOf(this); if(index !== -1) registry.splice(index, 1); return this; }, // Updates DOM, using current value. refresh() { fpsMeter.update(value); fpsValue.textContent = value.toFixed(1); return this; }, // Updates current value. tick() { value = counter.next().value; return this; }, start(invalidation) { if(invalidation) invalidation.then(this.unregister.bind(this)); if(registry.indexOf(this) === -1) registry.push(this); return this; }, clear() { fpsMeter.clear(); value = null; return this; } }); return element; } }30:[] 2d:{"id":"8bea3f94176f0330","slug":"fps-counter","title":"FPS Counter","thumbnail":"1bce08e79b63c2f0194a6739618ec6c5412465f651c71600f0e73951ba3a7817","access_level":"unlisted","create_time":"$D2018-04-22T12:21:23.088Z","update_time":"$D2022-01-13T11:11:09.661Z","view_time":null,"first_public_time":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":1049,"publish_version":1049,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"FPS Counter","cells":[{"id":0,"value":"md`# FPS Counter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof numSamples = slider({\n title: 'Number of samples',\n min: 1,\n max: 500,\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"md`\nCaps the framerate by delaying loop iterations:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof frameCap = numView(radio({\n options: [\n { label: 'None', value: 0 },\n { label: '60 fps', value: 60 },\n { label: '30 fps', value: 30 },\n { label: '23 fps', value: 23 },\n { label: '12 fps', value: 12 }\n ],\n value: 0,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"md`\nLowers the framerate by simulating CPU load:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof throttleCap = numView(radio({\n options: [\n { label: 'None', value: 0 },\n { label: '60 fps', value: 60 },\n { label: '30 fps', value: 30 },\n { label: '15 fps', value: 15 }\n ],\n value: 0\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"throttle = {\n let count, target, running = true;\n invalidation.then(() => running = false);\n \n while(running) {\n count = 0;\n if(throttleCap > 0) {\n target = performance.now() + 1000 / throttleCap;\n while(target > performance.now()) count++;\n }\n yield count;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof restart = button({value: 'Restart'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`\nThis graph will be our reference. It uses \\`requestAnimationFrame()\\` without any artificial delays:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"{\n const display = createDisplay(this, 'raf_ref').start(invalidation);\n const run = runState(invalidation);\n\n const loop = () => {\n display.tick();\n if(run()) requestAnimationFrame(loop);\n };\n \n loop();\n return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`\nAgain using \\`requestAnimationFrame()\\`, but this time we use \\`performance.now()\\` to match the \\`frameCap\\` value:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"{\n const display = createDisplay(this, 'raf_skip').start(invalidation);\n const skip = frameCap > 0 ? 60 / frameCap : 0;\n const run = runState(invalidation);\n\n let skipping = 0;\n \n const loop = () => {\n if(0 >= skipping--) {\n display.tick();\n skipping += skip;\n }\n if(run()) requestAnimationFrame(loop);\n };\n \n loop();\n return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof run_PromisesDelay = toggle(`

Promises.delay():`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"{\n  const display = createDisplay(this, 'pms_then').start(invalidation);\n  if(!run_PromisesDelay) return display.unregister();\n  \n  const delay = frameCap > 0 ? 1000 / frameCap : 0;\n  const run = runState(invalidation);\n\n  const loop = () => {\n      display.tick();\n    if(run()) Promises.delay(delay).then(loop);\n  };\n  \n  loop();\n  return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof run_setTimout = toggle(`setTimeout():`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"{\n  const display = createDisplay(this, 'timeout').start(invalidation);\n  if(!run_setTimout) return display.unregister();\n  \n  const delay = frameCap > 0 ? 1000 / frameCap : 0;\n  const run = runState(invalidation);\n\n  const loop = () => {\n    display.tick();\n    if(run()) setTimeout(loop, delay);\n  };\n  \n  loop();\n  return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof run_setInterval = toggle(`setInterval():`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n  const display = createDisplay(this, 'interval').start(invalidation).tick();\n  if(!run_setInterval) return display.unregister();\n  \n  const delay = frameCap > 0 ? 1000 / frameCap : 0;\n  \n  const update = () => display.tick();\n  \n  const interval = setInterval(update, delay);\n  invalidation.then(() => clearInterval(interval));\n\n  return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"viewof run_postMessage = toggle(`postMessage():`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"{\n  const display = createDisplay(this, 'postMessage').start(invalidation).tick();\n  if(!run_postMessage) return display.unregister();\n\n  const delay = frameCap > 0 ? 1000 / frameCap : 0;\n  const messageId = `step-${performance.now()}`;\n  let last = performance.now();\n  \n  const onMessage = e => {\n    if(e.source !== window || e.data !== messageId) return;\n    if(!delay || (performance.now() - last >= delay)) {\n      last = performance.now();\n      display.tick();\n    }\n    window.postMessage(messageId, '*');\n  };\n  \n  window.addEventListener('message', onMessage);\n  invalidation.then(() => window.removeEventListener('message', onMessage));\n\n  window.postMessage(messageId, '*');\n  return display;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function meter(steps, height, scale = 1, gap = 0) {\n  const w = steps * (scale + gap);\n  const h = height;\n  const buffer = DOM.context2d(w, h, 1);\n  const target = DOM.context2d(w, h, 1);\n  target.canvas.style.maxWidth = '100%';\n  \n  const colHigh = `limegreen`;\n  const colMed  = `gold`;\n  const colLow  = `orangered`;\n  \n  let x = 0, o;\n  \n  target.canvas.clear = () => {\n    buffer.clearRect(0, 0, w, h);\n    target.clearRect(0, 0, w, h);\n    x = 0;\n  };\n  \n  target.canvas.update = (v) => {\n    buffer.clearRect(x, 0, scale + gap, h);\n    buffer.fillStyle = v >= 60 ? colHigh : v >= 30 ? colMed : colLow;\n    buffer.fillRect(x, h, scale, -v);\n    \n    o = -(scale + gap) - x;\n    target.clearRect(0, 0, w, h);\n    target.drawImage(buffer.canvas, o, 0);\n    target.drawImage(buffer.canvas, o + w, 0);\n\n    if((x += scale + gap) >= w) x = x - w;\n  }\n  \n  return target.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function* fpsCounter(numSamples) {\n  const samples = new Float32Array(numSamples);\n  let i = 0, last = performance.now(), sum = 0, range = 0, resize;\n\n  yield 0;\n\n  while(true) {\n    sum -= samples[i];\n    sum += (samples[i] = -last + (last = performance.now()));\n\n    if(range < numSamples) range++;\n    if(++i >= numSamples) i = 0;\n    yield sum ? 1000 / (sum / range) : 0;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"function runState(invalidation) {\n  let run = true;\n  invalidation.then(() => run = false);\n  return () => run;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"function numView(view) {\n  return Object.defineProperty(html`${view}`, 'value', {get: () => +view.value });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"function toggle(label, state = true) {\n  return Object.defineProperty(\n    html` ${label}`,\n    'value',\n    {get() { return this.firstChild.checked }}\n  );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"import {button, radio, slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"css = html`