From 2655d15bc94a2ca340ec211340d031de8770e661 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:31:25 +0000
Subject: [PATCH 1/5] mini changes

---
 sketch.js          | 10 ++--------
 thomson-problem.js |  6 +++---
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/sketch.js b/sketch.js
index 1d3cb0a..3abce52 100644
--- a/sketch.js
+++ b/sketch.js
@@ -118,8 +118,8 @@ function draw_faces(radius) {
   push();
   strokeWeight(2);
   stroke(0x00);
+  fill(0xbf, 0x7f);
   for ([p1, p2, p3] of faces) {
-    fill(0xbf, 0x7f);
     beginShape(TRIANGLES);
     vertex(p1.x * radius, p1.y * radius, p1.z * radius);
     vertex(p2.x * radius, p2.y * radius, p2.z * radius);
@@ -155,13 +155,7 @@ function make_charges(n) {
     if (i === 0) {
       position = createVector(0, -1, 0);
     } else {
-      const lat = random(-TAU / 4, TAU / 4);
-      const lon = random(0, TAU);
-      position = createVector(
-        cos(lat) * cos(lon),
-        sin(lat),
-        cos(lat) * sin(lon),
-      );
+      position = p5.Vector.random3D();
     }
     charges.push({
       position: position,
diff --git a/thomson-problem.js b/thomson-problem.js
index 0cbbdaa..8b8245c 100644
--- a/thomson-problem.js
+++ b/thomson-problem.js
@@ -11,11 +11,11 @@ function move_charges(charges) {
       let acceleration_mag = 1 / displacement.mag() * 0.001;
       let ai;
       if (acceleration_mag === Infinity) {
-        ai = createVector(random(-1, 1), random(-1, 1), random(-1, 1));
+        ai = p5.Vector.random3D();
       } else {
-        ai = displacement.copy();
+        ai = displacement.copy().normalize();
       }
-      ai = ai.normalize().mult(acceleration_mag);
+      ai.mult(acceleration_mag);
       let aj = p5.Vector.mult(ai, -1);
       project_onto_plane(ai, charges[i].position);
       project_onto_plane(aj, charges[j].position);

From 769043c5cb9b1531bbd24ecfcf3bc89fb089c5a2 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:32:59 +0000
Subject: [PATCH 2/5] 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);
 

From d57d49a194ca385e3ca9c4dd39d5e9b50c2b22ac Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:36:45 +0000
Subject: [PATCH 3/5] pedantic: s/polyhedron/polytope: n=3 case isn't 3D

---
 sketch.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/sketch.js b/sketch.js
index fb861a2..238d16d 100644
--- a/sketch.js
+++ b/sketch.js
@@ -13,7 +13,7 @@ const SURFACE_EARTH = 2;
 let surface = SURFACE_CIRCLES;
 let physics = false;
 let skeleton = false;
-let polyhedron = false;
+let polytope = false;
 
 let aside_size;
 
@@ -53,7 +53,7 @@ function draw() {
 
   draw_charges(sphere_radius);
   if (skeleton) draw_skeleton(sphere_radius);
-  if (polyhedron) {
+  if (polytope) {
     if (physics || faces.length === 0) find_faces();
     draw_faces(sphere_radius);
   }
@@ -70,7 +70,7 @@ function find_faces() {
   for (let i = 2; i < charges.length; i += 1) {
     for (let j = 1; j < i; j += 1) {
       for (let k = 0; k < j; k += 1) {
-        // Check if p1 p2 p3 form a face of the convex polyhedron
+        // Check if p1 p2 p3 form a face of the convex polytope
         // enclosing all vertices ...
         const p1 = charges[i].position;
         const p2 = charges[j].position;
@@ -97,7 +97,7 @@ function find_faces() {
             // If L intersects the plane, q1 and q2 are on
             // opposite sides of the plane generated by p1 p2 p3,
             // so p1 p2 p3 can't be a face.  If we want the
-            // polyhedron to be convex.  Which we do.
+            // polytope to be convex.  Which we do.
             //
             // A point k is on the plane generated by p1 p2 p3 iff
             // dot(k - p1, normal) = 0.  Let n := normal.
@@ -269,7 +269,7 @@ function keyPressed() {
   } else if (key == 'f') {
     skeleton = !skeleton;
   } else if (key == 'g') {
-    polyhedron = !polyhedron;
+    polytope = !polytope;
   } else if (key >= '0' && key <= '9') {
     make_charges(int(key));
     faces = [];

From d10f77d42020e707fa8d3a368536f7c190460b30 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:37:50 +0000
Subject: [PATCH 4/5] interface

---
 index.html | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 sketch.js  | 50 +++++++++++++++++++++++++++++++++---
 2 files changed, 119 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index dbaf619..ac7a1cb 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,83 @@ body {
   padding: 0;
   margin: 0;
   background-color: #1b1b1b;
-  overflow-y: hidden;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: var(--aside-size) auto;
+  color: white;
+}
+aside {
+  padding: 20px;
+  height: 100vh;
+  box-sizing: border-box;
+  overflow: scroll;
+}
+aside > container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+aside button {
+  font-size: 20px;
+  min-width: 27px;
+}
+aside input[type="checkbox"] {
+  width: 28px;
+  height: 28px;
+}
+aside > container > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+@media screen and (orientation:portrait) {
+  body {
+    grid-template-columns: none;
+    grid-template-rows: auto var(--aside-size);
+  }
+  aside {
+    order: 1;
+  }
+  aside > container {
+    flex-direction: row;
+  }
 }
 </style>
 </head>
 <body>
+<aside>
+<container>
+<div style="width:100%">
+<button onclick="toggle_physics()">Physics</button>
+<input id="checkbox-physics" type="checkbox" disabled>
+</div>
+<div>
+<button onclick="toggle_skeleton()">Skeleton</button>
+<input id="checkbox-skeleton" type="checkbox" disabled>
+</div>
+<div>
+<button onclick="toggle_polytope()">Polytope</button>
+<input id="checkbox-polytope" type="checkbox" disabled>
+</div>
+<div>
+<button id="button-surface-none" onclick="set_surface(SURFACE_NONE)">Hide surface</button>
+<button id="button-surface-circles" onclick="set_surface(SURFACE_CIRCLES)">Wireframe</button>
+<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
+</div>
+<div>
+<button onclick="make_charges(0);faces=[]">0</button>
+<button onclick="make_charges(1);faces=[]">1</button>
+<button onclick="make_charges(2);faces=[]">2</button>
+<button onclick="make_charges(3);faces=[]">3</button>
+<button onclick="make_charges(4);faces=[]">4</button>
+<button onclick="make_charges(5);faces=[]">5</button>
+<button onclick="make_charges(6);faces=[]">6</button>
+<button onclick="make_charges(7);faces=[]">7</button>
+<button onclick="make_charges(8);faces=[]">8</button>
+<button onclick="make_charges(9);faces=[]">9</button>
+</div>
+</container>
+</aside>
 <main>
 </main>
 <script src="thomson-problem.js"></script>
diff --git a/sketch.js b/sketch.js
index 238d16d..a04f4ac 100644
--- a/sketch.js
+++ b/sketch.js
@@ -15,6 +15,11 @@ let physics = false;
 let skeleton = false;
 let polytope = false;
 
+let buttons_surface;
+let checkbox_physics;
+let checkbox_skeleton;
+let checkbox_polytope;
+
 let aside_size;
 
 
@@ -30,6 +35,22 @@ function setup() {
   camera = createCamera();
   red = color(0xbf, 0x00, 0x00);
   sphere_radius = min(250, min(width, height) / 2 * 0.8);
+
+  checkbox_physics = document.getElementById("checkbox-physics");
+  checkbox_physics.checked = physics;
+
+  checkbox_skeleton = document.getElementById("checkbox-skeleton");
+  checkbox_skeleton.checked = skeleton;
+
+  checkbox_polytope = document.getElementById("checkbox-polytope");
+  checkbox_polytope.checked = polytope;
+
+  buttons_surface = [
+    document.getElementById("button-surface-none"),
+    document.getElementById("button-surface-circles"),
+    document.getElementById("button-surface-earth"),
+  ]
+  buttons_surface[surface].disabled = true;
 }
 
 function windowResized() {
@@ -263,15 +284,36 @@ function make_lights() {
 
 function keyPressed() {
   if (key == ' ') {
-    physics = !physics;
+    toggle_physics();
   } else if (key == 'd') {
-    surface = (surface + 1) % 3;
+    set_surface((surface + 1) % 3);
   } else if (key == 'f') {
-    skeleton = !skeleton;
+    toggle_skeleton();
   } else if (key == 'g') {
-    polytope = !polytope;
+    toggle_polytope();
   } else if (key >= '0' && key <= '9') {
     make_charges(int(key));
     faces = [];
   }
 }
+
+function toggle_physics() {
+  physics = !physics;
+  checkbox_physics.checked = physics;
+}
+
+function set_surface(value) {
+  surface = value;
+  for (let button of buttons_surface) button.disabled = false;
+  buttons_surface[value].disabled = true;
+}
+
+function toggle_skeleton() {
+  skeleton = !skeleton;
+  checkbox_skeleton.checked = skeleton;
+}
+
+function toggle_polytope() {
+  polytope = !polytope;
+  checkbox_polytope.checked = polytope;
+}

From 33aab6af5ca04ef675791539e211e744651a7830 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sat, 26 Apr 2025 12:59:48 +0000
Subject: [PATCH 5/5] interface: noscript notice

---
 index.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ac7a1cb..45e21e7 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,15 @@
 :root {
   --aside-size: 218px;
 }
+.js {
+  display: none;
+}
+noscript {
+  padding: 10px;
+}
+a {
+  color: cornflowerblue;
+}
 body {
   padding: 0;
   margin: 0;
@@ -57,7 +66,7 @@ aside > container > div {
 </style>
 </head>
 <body>
-<aside>
+<aside class="js">
 <container>
 <div style="width:100%">
 <button onclick="toggle_physics()">Physics</button>
@@ -92,7 +101,13 @@ aside > container > div {
 </aside>
 <main>
 </main>
+<noscript>
+This page requires JavaScript.
+<br>
+Source code: <a href="https://git.atomic.garden/root/sphere-charges">https://git.atomic.garden/root/sphere-charges</a>
+</noscript>
 <script src="thomson-problem.js"></script>
 <script src="sketch.js"></script>
+<script>document.querySelectorAll(".js").forEach(e => e.style = "display:initial");</script>
 </body>
 </html>