Skip to content

Skip frames option to keep rendering w/o performance issues. #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
theomgdev wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Skip frames option to keep rendering w/o performance issues. #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
39fbc56
Render full speed without performance issues!
theomgdev Jan 17, 2022
9a070f7
Better let the user set frames to skip
theomgdev Jan 17, 2022
4035d2f
small fix
theomgdev Jan 17, 2022
8fd1064
better skipped fps calculation
theomgdev Jan 17, 2022
a32bbd0
Fix: render realtime on pause screen
theomgdev Jan 20, 2022
2b3e3c0
Merge branch 'master' into skip-frames
theomgdev Jan 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions dist/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,3 +294,7 @@ input:hover,input:active {
#reset-with-editor-org{
margin-top: 5px;
}

#skip-frames-number{
width: 30px;
}
6 changes: 6 additions & 0 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ <h3>Simulation Speed</h3>
<input id="slider" type="range" min="1" max="300" value="60">
<button class='pause-button' title="Play/Pause. Hotkey: Spacebar"><i class="fa fa-pause"></i></button>
<button class="headless" title="Toggle rendering. Hotkey: H"><i class="fa fa-eye-slash"></i></button>
<div>
<label class="skip-frames-label" title="Skip the entered number of frames every time before render. Hotkey: J" for="skip-frames">
Skip Every <input type="number" id="skip-frames-number" min="0" max="1000" value=4 step="1"> Frames
</label>
<input id="skip-frames" type="checkbox">
</div>
<p id='fps'>Target FPS: 60</p>
<p id='fps-actual'></p>
<button id='reset-env' title='Restarts simulation with default organism.'>Reset</button>
Expand Down
25 changes: 24 additions & 1 deletion src/Controllers/ControlPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -126,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));
Expand All @@ -140,8 +146,21 @@ class ControlPanel {
else {
$('#headless-notification').css('display', 'block');
}
//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));

$('#skip-frames').click(function() {
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() {
Expand Down Expand Up @@ -461,7 +480,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.skipped_fps) + " (" + 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)
Expand Down
10 changes: 10 additions & 0 deletions src/Engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -24,6 +25,8 @@ class Engine {
this.ui_delta_time = 0;

this.actual_fps = 0;
this.render_period = 4;
this.skipped_fps = 0;
this.running = false;
}

Expand Down Expand Up @@ -80,6 +83,13 @@ class Engine {

environmentUpdate() {
this.actual_fps = (1000/this.sim_delta_time);

if(WorldConfig.skip_frames){
this.skipped_fps = this.actual_fps/(this.render_period+1);
}else{
this.skipped_fps = 0;
}

this.env.update(this.sim_delta_time);
if(this.ui_loop == null) {
this.necessaryUpdate();
Expand Down
5 changes: 5 additions & 0 deletions src/Environments/WorldEnvironment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ class WorldEnvironment extends Environment{
this.renderer.cells_to_render.clear();
return;
}

var render_period = WorldConfig.skip_frames ? this.controller.control_panel.engine.render_period : 0;

if(this.total_ticks % (render_period + 1) != 0) return;

this.renderer.renderCells();
this.renderer.renderHighlights();
}
Expand Down
1 change: 1 addition & 0 deletions src/WorldConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const WorldConfig = {
headless: false,
skip_frames: false,
clear_walls_on_reset: false,
auto_reset: true,
auto_pause: false,
Expand Down