Smooth frame pacing with fixed-timestep simulation in the JS game loop by Copilot · Pull Request #14 · 7effrey89/PianoHero

Copilot · 2026-05-16T23:01:08Z

The issue asks for game-engine-like smoothness in JavaScript by adopting engine patterns (especially proper frame loop and decoupled logic/render timing). This PR implements a fixed-timestep simulation model on top of requestAnimationFrame to reduce jitter and stabilize gameplay timing under variable frame rates.

Render loop architecture
- Keep requestAnimationFrame as the render driver.
- Introduce a fixed simulation step (1/60s) with bounded catch-up (maxCatchupSteps) inside _renderFrame.
- Decouple logic progression from raw frame delta by advancing update() with a controlled simulation clock.
Deterministic update timing
- Extend update() to accept an optional time override so simulation can run on fixed ticks.
- Track simulation state via accumulator/clock fields (_logicAccumulatorSec, _logicClockSec, _logicLastTargetSec, _hasLogicClock).
State-transition correctness
- Reset simulation accumulator/clock state on seek, play start, pause/resume, reset, and speed changes to avoid stale timing carry-over.
- Replace paused seek’s one-frame render path from this.draw() to _renderFrame(..., false) to render once without spawning an extra RAF chain.

const maxBacklog = this._fixedStepSec * this._maxCatchupSteps;
this._logicAccumulatorSec = Math.min(this._logicAccumulatorSec + deltaToTarget, maxBacklog);

while (this._logicAccumulatorSec >= this._fixedStepSec && steps < this._maxCatchupSteps) {
  this._logicClockSec += this._fixedStepSec;
  this.update(this._logicClockSec);
  this._logicAccumulatorSec -= this._fixedStepSec;
}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

accounts.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
clients2.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
content-autofill.googleapis.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
pixijs.download
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
redirector.gvt1.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
tonejs.github.io
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)
www.google.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4533 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.tGHSAj --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,2867261662768698308,4198858187432798178,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,14980504539610180656,17494130397685690757,4 --trace-process-track-uuid=3190708989122997041 (dns block)
- Triggering command: /usr/bin/chromium-browser chromium-browser --headless --disable-gpu --no-sandbox --window-size=1440,900 --screenshot=/home/REDACTED/work/PianoHero/PianoHero/perf-r2-ui.png REDACTED (dns block)
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --use-angle=swiftshader-webgl --crashpad-handler-pid=4971 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/org.chromium.Chromium.scoped_dir.p7ppbs --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5550886863371381617,7997800372794195353,262144 --disable-features=PaintHolding --variations-seed-version --pseudonymization-salt-handle=7,i,18268314559150004180,16647002806294420662,4 --trace-process-track-uuid=3190708989122997041 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Agent-Logs-Url: https://github.com/7effrey89/PianoHero/sessions/703d97bb-feaf-4ffa-a460-60b0d55ce84e Co-authored-by: 7effrey89 <30802073+7effrey89@users.noreply.github.com>

7effrey89 · 2026-05-17T08:29:21Z

@copilot did we optimize and use all the recommended actions in our game from this issue ?: #13

Copilot · 2026-05-17T08:29:54Z

@copilot did we optimize and use all the recommended actions in our game from this issue ?: #13

Not all of them yet. In this PR we implemented the core loop improvements (requestAnimationFrame + fixed-timestep logic decoupling) in f897855.

Current status vs issue #13:

✅ Render loop via requestAnimationFrame
✅ Logic/render decoupling with fixed-step updates
✅ Some existing memory/DOM optimizations already in code (caching, reduced churn)
⚠️ Not added in this PR: Web Workers for heavy tasks, WebAssembly for hot paths, and deeper GPU batching/instancing work

If you want, I can do a focused follow-up PR for the next highest-impact step (Web Worker offload first).

Copilot

Pull request overview

Implements a fixed-timestep simulation loop on top of requestAnimationFrame to stabilize gameplay timing under variable frame rates, while keeping rendering driven by RAF.

Changes:

Added fixed-step simulation clock + accumulator state and integrated it into _renderFrame().
Introduced a unified game-clock helper (_getGameClockSec) with configurable pre-roll/lead-in handling.
Reset simulation timing state across key transitions (seek, pause/resume, reset, speed changes) and adjusted paused seek rendering to avoid starting a new RAF chain.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

                    this.startTime = performance.now() - newCurrentTime * 1000;
                }
+                this._hasLogicClock = false;
+                this._logicAccumulatorSec = 0;
            }


        } else {
            this.startTime = performance.now() - gameClockSec * 1000;
        }
+        this._hasLogicClock = false;
+        this._logicAccumulatorSec = 0;


+                this._logicAccumulatorSec = 0;
+                this.update(this._logicClockSec);
+            } else if (steps === 0) {
+                this.update(this._logicClockSec);


Initial plan

baf77f6

Copilot AI assigned Copilot and 7effrey89 May 16, 2026

Copilot AI linked an issue May 16, 2026 that may be closed by this pull request

Performance r2 #13

Closed

Copilot started work on behalf of 7effrey89 May 16, 2026 23:01 View session

perf: add fixed-step update loop to smooth gameplay rendering

c9c2537

Agent-Logs-Url: https://github.com/7effrey89/PianoHero/sessions/703d97bb-feaf-4ffa-a460-60b0d55ce84e Co-authored-by: 7effrey89 <30802073+7effrey89@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Improve JavaScript performance for game engine-like experience~~ Smooth frame pacing with fixed-timestep simulation in the JS game loop May 16, 2026

Copilot finished work on behalf of 7effrey89 May 16, 2026 23:07

Copilot AI requested a review from 7effrey89 May 16, 2026 23:07

start rolling fixed

f897855

7effrey89 requested a review from Copilot May 17, 2026 08:28

Copilot started reviewing on behalf of 7effrey89 May 17, 2026 08:29 View session

Copilot started work on behalf of 7effrey89 May 17, 2026 08:29 View session

Copilot finished work on behalf of 7effrey89 May 17, 2026 08:30

Copilot AI reviewed May 17, 2026

View reviewed changes

7effrey89 marked this pull request as ready for review May 17, 2026 08:33

7effrey89 merged commit e1ba484 into main May 17, 2026
5 checks passed

7effrey89 mentioned this pull request May 17, 2026

part3 performance #15

Closed

Copilot AI mentioned this pull request May 17, 2026

Finalize part3 performance pass with Worker preprocessing, WebAssembly note math, and activation diagnostics #16

Merged

7effrey89 deleted the copilot/optimize-javascript-performance branch May 18, 2026 19:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Smooth frame pacing with fixed-timestep simulation in the JS game loop#14

Smooth frame pacing with fixed-timestep simulation in the JS game loop#14
7effrey89 merged 3 commits into
mainfrom
copilot/optimize-javascript-performance

Copilot AI commented May 16, 2026 •

edited

Loading

Uh oh!

7effrey89 commented May 17, 2026

Uh oh!

Copilot AI commented May 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

7effrey89 commented May 17, 2026

Uh oh!

Copilot AI commented May 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 16, 2026 •

edited

Loading