Auto-detect the best resolution

index.html

@@ -12,7 +12,8 @@
       padding:0;
       margin:0;
       font-weight:bold;
-      overflow:hidden;
+      overflow: hidden;
+      height: 120vh;
 
       font-family: Monospace;
       font-size: 12px;
@@ -172,7 +173,7 @@
 
 <div id="resolution">
   <h3>Resolution</h3>
-  <label><input type="radio" name="resolution" value="4" checked> low</label>
+  <label><input type="radio" name="resolution" value="4"> low</label>
   <label><input type="radio" name="resolution" value="2"> medium</label>
   <label><input type="radio" name="resolution" value="1"> high</label>
 </div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "interstellar-demo",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interstellar-demo",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Interstellar wormhole & blackhole simulator",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

src/Simulation.js

@@ -91,7 +91,13 @@ class Simulation {
       false
     )
 
-    this.renderer.setSize(window.innerWidth, window.innerHeight, Ui.getSelectedPixelSize())
+    let pixelSize = Ui.getSelectedPixelSize()
+    if (!pixelSize) {
+      pixelSize = this.getSuggestedPixelSize()
+      Ui.setPixelSize(pixelSize)
+    }
+
+    this.renderer.setSize(window.innerWidth, window.innerHeight, pixelSize)
 
     window.addEventListener('wheel', e => {
       e.preventDefault()
@@ -187,6 +193,20 @@ class Simulation {
     this.renderer.render()
   }
 
+  getSuggestedPixelSize () {
+    const pixelCount = window.innerWidth * window.innerHeight
+    let pixelSize = 4
+    while (pixelSize > 1) {
+      if (pixelCount / (pixelSize * pixelSize) < 512 * 512) {
+        pixelSize /= 2
+      }
+      else {
+        break
+      }
+    }
+    return pixelSize
+  }
+
 }
 
 export default new Simulation()

src/Ui.js

@@ -41,8 +41,18 @@ class UiController {
       }, false)
   }
 
+  setPixelSize (value) {
+    document.querySelector(`[name=resolution][value="${value}"]`).checked = true
+  }
+
   getSelectedPixelSize () {
-    return parseInt(document.querySelector('[name=resolution]:checked').value)
+    const element = document.querySelector('[name=resolution]:checked')
+
+    if (!element) {
+      return null
+    }
+
+    return parseInt(element.value)
   }
 
   showWebGLError () {