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

dist/css/style.css

@@ -294,3 +294,7 @@ input:hover,input:active {
 #reset-with-editor-org{
     margin-top: 5px;
 }
+
+#skip-frames-number{
+    width: 30px;
+}

dist/index.html

@@ -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>

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();
@@ -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));
@@ -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() {
@@ -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)

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,8 @@ class Engine {
         this.ui_delta_time = 0;
 
         this.actual_fps = 0;
+        this.render_period = 4;
+        this.skipped_fps = 0;
         this.running = false;
     }
 
@@ -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();

src/Environments/WorldEnvironment.js

@@ -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();
     }

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,