| <!-- |
| Copyright 2022 The Fuchsia Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> |
| </head> |
| <body> |
| <main> |
| <select name="rive-animations" id="rive"> |
| <option value="juice.riv">juice.riv</option> |
| <option value="knight.riv">knight.riv</option> |
| <option value="marty.riv">marty.riv</option> |
| </select> |
| <input type="checkbox" id="partials" name="partials"> |
| <label for="partials">Visualize partial updates</label> |
| <p id="fps">FPS: ??? (???/???)</p> |
| <canvas id="drawing" width="1000" height="1000" style="width: 500;"></canvas> |
| <script type="module"> |
| const rive = document.getElementById('rive'); |
| const partials = document.getElementById('partials'); |
| |
| const canvas = document.getElementById('drawing'); |
| const ctx = canvas.getContext('2d'); |
| |
| const worker = new Worker(new URL('./worker.js', import.meta.url), { |
| type: 'module' |
| }); |
| worker.postMessage({ |
| 'width': canvas.width, |
| 'height': canvas.height, |
| 'partials': partials.checked, |
| 'rive': rive.value, |
| }); |
| |
| const fps = document.getElementById('fps'); |
| |
| let timings = []; |
| function pushTiming(timing) { |
| timings.push(timing); |
| |
| if (timings.length == 50) { |
| const sum = timings.reduce((a, b) => a + b, 0); |
| const avg = (sum / timings.length) || 0; |
| const min = Math.min(...timings); |
| const max = Math.max(...timings); |
| |
| fps.innerHTML = 'FPS: ' + (1 / avg).toFixed(2) + ' (' + (1 / max).toFixed(2) + '/' + (1 / min).toFixed(2) + ')'; |
| |
| timings = []; |
| } |
| } |
| |
| let last_timestamp = 0; |
| function animation(timestamp) { |
| const elapsed = timestamp - last_timestamp; |
| last_timestamp = timestamp; |
| |
| pushTiming(elapsed / 1000); |
| |
| worker.postMessage({ |
| 'elapsed': elapsed, |
| 'width': canvas.width, |
| 'height': canvas.height, |
| 'partials': partials.checked, |
| 'rive': rive.value, |
| }); |
| } |
| |
| worker.onmessage = function(message) { |
| ctx.putImageData(new ImageData( |
| new Uint8ClampedArray(message.data), |
| canvas.width, |
| canvas.height |
| ), 0, 0); |
| |
| window.requestAnimationFrame(animation); |
| } |
| </script> |
| </main> |
| </body> |
| </html> |
