From 39fbc56a6c492a5d1ad7a7b948ba8d2780f03261 Mon Sep 17 00:00:00 2001 From: M4YX0R Date: Mon, 17 Jan 2022 21:24:20 +0300 Subject: [PATCH 1/5] Render full speed without performance issues! --- dist/index.html | 4 ++++ src/Controllers/ControlPanel.js | 17 ++++++++++++++++- src/Engine.js | 11 +++++++++++ src/Environments/WorldEnvironment.js | 6 ++++++ src/WorldConfig.js | 1 + 5 files changed, 38 insertions(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index d2fe2742..dd937dc6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -30,6 +30,10 @@

Simulation Speed

+
+ + +

Target FPS: 60

diff --git a/src/Controllers/ControlPanel.js b/src/Controllers/ControlPanel.js index f57b94b4..5eb09376 100644 --- a/src/Controllers/ControlPanel.js +++ b/src/Controllers/ControlPanel.js @@ -69,6 +69,9 @@ class ControlPanel { $('.headless')[0].click(); break; case 'j': + $('#skip-frames').click(); + break; + case 'k': case ' ': e.preventDefault(); $('.pause-button')[0].click(); @@ -140,8 +143,16 @@ class ControlPanel { else { $('#headless-notification').css('display', 'block'); } + //disable skip frames checkbox + $('#skip-frames').prop('disabled', !WorldConfig.headless); + $('.skip-frames-label').css('color', WorldConfig.headless ? 'black' : 'gray'); WorldConfig.headless = !WorldConfig.headless; }.bind(this)); + + $('#skip-frames').click(function() { + WorldConfig.skip_frames = !WorldConfig.skip_frames; + $('#skip-frames').prop('checked', WorldConfig.skip_frames); + }.bind(this)); } defineTabNavigation() { @@ -461,7 +472,11 @@ class ControlPanel { } update(delta_time) { - $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps)); + if(WorldConfig.skip_frames && !WorldConfig.headless) { + $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps/this.engine.render_period) + " (" + Math.floor(this.engine.actual_fps) + ")"); + }else{ + $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps)); + } $('#reset-count').text("Auto reset count: " + this.engine.env.reset_count); this.stats_panel.updateDetails(); if (WorldConfig.headless) diff --git a/src/Engine.js b/src/Engine.js index ce322127..b2da593c 100644 --- a/src/Engine.js +++ b/src/Engine.js @@ -2,6 +2,7 @@ const WorldEnvironment = require('./Environments/WorldEnvironment'); const ControlPanel = require('./Controllers/ControlPanel'); const OrganismEditor = require('./Environments/OrganismEditor'); const ColorScheme = require('./Rendering/ColorScheme'); +const WorldConfig = require('./WorldConfig'); // If the simulation speed is below this value, a new interval will be created to handle ui rendering // at a reasonable speed. If it is above, the simulation interval will be used to update the ui. @@ -24,6 +25,7 @@ class Engine { this.ui_delta_time = 0; this.actual_fps = 0; + this.render_period = 1; this.running = false; } @@ -80,6 +82,15 @@ class Engine { environmentUpdate() { this.actual_fps = (1000/this.sim_delta_time); + + if(WorldConfig.skip_frames){ + this.render_period = Math.floor(this.actual_fps/30); + if(this.render_period <= 1) this.render_period = Math.floor(this.fps/30);//if fps is too low to decide on render period, just use fps + if(this.render_period <= 0) this.render_period = 1;//division with 0 is undefined + }else{ + this.render_period = 1; + } + this.env.update(this.sim_delta_time); if(this.ui_loop == null) { this.necessaryUpdate(); diff --git a/src/Environments/WorldEnvironment.js b/src/Environments/WorldEnvironment.js index 6f47b273..bfe05aed 100644 --- a/src/Environments/WorldEnvironment.js +++ b/src/Environments/WorldEnvironment.js @@ -49,6 +49,12 @@ class WorldEnvironment extends Environment{ this.renderer.cells_to_render.clear(); return; } + + //skip frames to match 30 fps + var render_period = this.controller.control_panel.engine.render_period; + + if(this.total_ticks % render_period != 0) return; + this.renderer.renderCells(); this.renderer.renderHighlights(); } diff --git a/src/WorldConfig.js b/src/WorldConfig.js index 2c8f4323..1d72de90 100644 --- a/src/WorldConfig.js +++ b/src/WorldConfig.js @@ -1,5 +1,6 @@ const WorldConfig = { headless: false, + skip_frames: false, clear_walls_on_reset: false, auto_reset: true, auto_pause: false, From 9a070f7ef6483b27ccea9ad3ae27d1fffe927780 Mon Sep 17 00:00:00 2001 From: M4YX0R Date: Mon, 17 Jan 2022 23:19:37 +0300 Subject: [PATCH 2/5] Better let the user set frames to skip --- dist/css/style.css | 4 ++++ dist/index.html | 4 +++- src/Controllers/ControlPanel.js | 7 ++++++- src/Engine.js | 9 ++++----- src/Environments/WorldEnvironment.js | 5 ++--- 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/dist/css/style.css b/dist/css/style.css index 5c7d20c7..4c953180 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -279,4 +279,8 @@ button:active{ #reset-with-editor-org{ margin-top: 5px; +} + +#skip-frames-number{ + width: 30px; } \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index dd937dc6..c904c249 100644 --- a/dist/index.html +++ b/dist/index.html @@ -31,7 +31,9 @@

Simulation Speed

- +

Target FPS: 60

diff --git a/src/Controllers/ControlPanel.js b/src/Controllers/ControlPanel.js index 5eb09376..36b63d19 100644 --- a/src/Controllers/ControlPanel.js +++ b/src/Controllers/ControlPanel.js @@ -145,6 +145,7 @@ class ControlPanel { } //disable skip frames checkbox $('#skip-frames').prop('disabled', !WorldConfig.headless); + $('#skip-frames-number').prop('disabled', !WorldConfig.headless); $('.skip-frames-label').css('color', WorldConfig.headless ? 'black' : 'gray'); WorldConfig.headless = !WorldConfig.headless; }.bind(this)); @@ -153,6 +154,10 @@ class ControlPanel { WorldConfig.skip_frames = !WorldConfig.skip_frames; $('#skip-frames').prop('checked', WorldConfig.skip_frames); }.bind(this)); + + $('#skip-frames-number').change(function() { + this.engine.render_period = parseInt($('#skip-frames-number').val()) || 0; + }.bind(this)); } defineTabNavigation() { @@ -473,7 +478,7 @@ class ControlPanel { update(delta_time) { if(WorldConfig.skip_frames && !WorldConfig.headless) { - $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps/this.engine.render_period) + " (" + Math.floor(this.engine.actual_fps) + ")"); + $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.skipped_fps) + " (" + Math.floor(this.engine.actual_fps) + ")"); }else{ $('#fps-actual').text("Actual FPS: " + Math.floor(this.engine.actual_fps)); } diff --git a/src/Engine.js b/src/Engine.js index b2da593c..75eeb8cd 100644 --- a/src/Engine.js +++ b/src/Engine.js @@ -25,7 +25,8 @@ class Engine { this.ui_delta_time = 0; this.actual_fps = 0; - this.render_period = 1; + this.render_period = 4; + this.skipped_fps = 0; this.running = false; } @@ -84,11 +85,9 @@ class Engine { this.actual_fps = (1000/this.sim_delta_time); if(WorldConfig.skip_frames){ - this.render_period = Math.floor(this.actual_fps/30); - if(this.render_period <= 1) this.render_period = Math.floor(this.fps/30);//if fps is too low to decide on render period, just use fps - if(this.render_period <= 0) this.render_period = 1;//division with 0 is undefined + this.skipped_fps = this.actual_fps/this.render_period; }else{ - this.render_period = 1; + this.skipped_fps = 0; } this.env.update(this.sim_delta_time); diff --git a/src/Environments/WorldEnvironment.js b/src/Environments/WorldEnvironment.js index bfe05aed..8cf4e1be 100644 --- a/src/Environments/WorldEnvironment.js +++ b/src/Environments/WorldEnvironment.js @@ -50,10 +50,9 @@ class WorldEnvironment extends Environment{ return; } - //skip frames to match 30 fps - var render_period = this.controller.control_panel.engine.render_period; + var render_period = WorldConfig.skip_frames ? this.controller.control_panel.engine.render_period : 1; - if(this.total_ticks % render_period != 0) return; + if(this.total_ticks % (render_period + 1) != 0) return; this.renderer.renderCells(); this.renderer.renderHighlights(); From 4035d2f7b61ac339dcb6a33f84d9a6a70470cf6a Mon Sep 17 00:00:00 2001 From: M4YX0R Date: Mon, 17 Jan 2022 23:33:55 +0300 Subject: [PATCH 3/5] small fix --- src/Environments/WorldEnvironment.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Environments/WorldEnvironment.js b/src/Environments/WorldEnvironment.js index 8cf4e1be..5ff77592 100644 --- a/src/Environments/WorldEnvironment.js +++ b/src/Environments/WorldEnvironment.js @@ -50,7 +50,7 @@ class WorldEnvironment extends Environment{ return; } - var render_period = WorldConfig.skip_frames ? this.controller.control_panel.engine.render_period : 1; + var render_period = WorldConfig.skip_frames ? this.controller.control_panel.engine.render_period : 0; if(this.total_ticks % (render_period + 1) != 0) return; From 8fd106456d80c8f67bd20db7ecb049942311d2c6 Mon Sep 17 00:00:00 2001 From: M4YX0R Date: Mon, 17 Jan 2022 23:41:11 +0300 Subject: [PATCH 4/5] better skipped fps calculation --- src/Engine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Engine.js b/src/Engine.js index 75eeb8cd..e82bf628 100644 --- a/src/Engine.js +++ b/src/Engine.js @@ -85,7 +85,7 @@ class Engine { this.actual_fps = (1000/this.sim_delta_time); if(WorldConfig.skip_frames){ - this.skipped_fps = this.actual_fps/this.render_period; + this.skipped_fps = this.actual_fps/(this.render_period+1); }else{ this.skipped_fps = 0; } From a32bbd05cf7829afaded212e3aa67173e5df6e6b Mon Sep 17 00:00:00 2001 From: M4YX0R Date: Thu, 20 Jan 2022 10:45:22 +0300 Subject: [PATCH 5/5] Fix: render realtime on pause screen --- src/Controllers/ControlPanel.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Controllers/ControlPanel.js b/src/Controllers/ControlPanel.js index 36b63d19..5414a17c 100644 --- a/src/Controllers/ControlPanel.js +++ b/src/Controllers/ControlPanel.js @@ -129,6 +129,9 @@ class ControlPanel { }.bind(this); $('.pause-button').click(function() { + if(this.engine.running && WorldConfig.skip_frames) { + this.engine.env.renderFull(); + } // toggle pause this.setPaused(this.engine.running); }.bind(this));