From 769043c5cb9b1531bbd24ecfcf3bc89fb089c5a2 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:32:59 +0000
Subject: [PATCH] nicer sphere_radius on mobile

---
 index.html |  3 +++
 sketch.js  | 22 ++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ff66bc9..dbaf619 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,9 @@
 <title>p5.js</title>
 <script src="lib/p5.js"></script>
 <style>
+:root {
+  --aside-size: 218px;
+}
 body {
   padding: 0;
   margin: 0;
diff --git a/sketch.js b/sketch.js
index 3abce52..fb861a2 100644
--- a/sketch.js
+++ b/sketch.js
@@ -4,7 +4,7 @@ let red;
 let charges = [];
 let faces = [];
 
-let sphere_radius = 200;
+let sphere_radius;
 
 const SURFACE_NONE = 0;
 const SURFACE_CIRCLES = 1;
@@ -15,25 +15,39 @@ let physics = false;
 let skeleton = false;
 let polyhedron = false;
 
+let aside_size;
+
 
 function preload() {
   earth_image = loadImage("atlas1.jpg");
 }
 
 function setup() {
-  createCanvas(windowWidth, windowHeight, WEBGL);
+  createCanvas(0, 0, WEBGL);
+  aside_size = int(getComputedStyle(document.documentElement).getPropertyValue('--aside-size').replace('px', ''));
+  windowResized();
+
   camera = createCamera();
   red = color(0xbf, 0x00, 0x00);
+  sphere_radius = min(250, min(width, height) / 2 * 0.8);
 }
 
 function windowResized() {
-  resizeCanvas(windowWidth, windowHeight);
+  if (windowWidth >= windowHeight) {
+    resizeCanvas(windowWidth - aside_size, windowHeight);
+  } else {
+    resizeCanvas(windowWidth, windowHeight - aside_size);
+  }
 }
 
 function draw() {
-  orbitControl();
   background(50);
 
+  orbitControl();
+  camera.centerX = 0;
+  camera.centerY = 0;
+  camera.centerZ = 0;
+
   make_lights();
   if (physics) move_charges(charges);