From 9194832b0176fcb08a8ab24e4bc50a6f8ca63b18 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sun, 27 Apr 2025 10:08:00 +0000
Subject: [PATCH] interface: <input type="number"> for particles

---
 index.html | 30 +++++++++++++++++++-----------
 sketch.js  | 15 ++++++++++++---
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index c7f8f79..df02afb 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,10 @@ aside > container {
   flex-wrap: wrap;
   gap: 12px;
 }
-aside button {
+aside button, aside input[type="number"] {
   font-size: 20px;
+}
+aside button {
   min-width: 27px;
 }
 aside input[type="checkbox"] {
@@ -92,16 +94,21 @@ aside > container > div {
 <button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
 </div>
 <div>
-<button onclick="make_particles(0);faces=[]">0</button>
-<button onclick="make_particles(1);faces=[]">1</button>
-<button onclick="make_particles(2);faces=[]">2</button>
-<button onclick="make_particles(3);faces=[]">3</button>
-<button onclick="make_particles(4);faces=[]">4</button>
-<button onclick="make_particles(5);faces=[]">5</button>
-<button onclick="make_particles(6);faces=[]">6</button>
-<button onclick="make_particles(7);faces=[]">7</button>
-<button onclick="make_particles(8);faces=[]">8</button>
-<button onclick="make_particles(9);faces=[]">9</button>
+<button onclick="make_particles(0)">0</button>
+<button onclick="make_particles(1)">1</button>
+<button onclick="make_particles(2)">2</button>
+<button onclick="make_particles(3)">3</button>
+<button onclick="make_particles(4)">4</button>
+<button onclick="make_particles(5)">5</button>
+<button onclick="make_particles(6)">6</button>
+<button onclick="make_particles(7)">7</button>
+<button onclick="make_particles(8)">8</button>
+<button onclick="make_particles(9)">9</button>
+<div>
+<input id="input-particles" type="number" min="0" max="360"
+  onkeypress="if (event.key === 'Enter') button_particles.click()">
+<button id="button-particles" onclick="make_particles(min(360, max(0, input_particles.valueAsNumber)))">Create</button>
+</div>
 </div>
 </container>
 </aside>
@@ -118,6 +125,7 @@ Source code: <a href="https://git.atomic.garden/root/sphere-electrons">https://g
 document.querySelectorAll(".js").forEach(e => e.style = "display:initial");
 const input_charge = document.getElementById("input-charge");
 input_charge.oninput();
+const button_particles = document.getElementById("button-particles");
 </script>
 </body>
 </html>
diff --git a/sketch.js b/sketch.js
index a13c15a..75eafd4 100644
--- a/sketch.js
+++ b/sketch.js
@@ -20,6 +20,7 @@ let buttons_surface;
 let checkbox_physics;
 let checkbox_skeleton;
 let checkbox_polytope;
+let input_particles;
 
 let aside_size;
 
@@ -52,6 +53,9 @@ function setup() {
     document.getElementById("button-surface-earth"),
   ]
   buttons_surface[surface].disabled = true;
+
+  input_particles = document.getElementById("input-particles");
+  input_particles.valueAsNumber = particles.length;
 }
 
 function windowResized() {
@@ -71,11 +75,15 @@ function draw() {
   camera.centerZ = 0;
 
   make_lights();
-  if (physics) move_particles(particles, 8e-4);
+  const polytope_is_slow = physics && particles.length > 40 || particles.length > 120;
+  const polytope_if_fast = polytope && !polytope_is_slow;
+  if (physics) {
+    move_particles(particles, 8e-4);
+  }
 
   draw_particles(sphere_radius);
   if (skeleton) draw_skeleton(sphere_radius);
-  if (polytope) {
+  if (polytope_if_fast) {
     if (physics || faces.length === 0) find_faces();
     draw_faces(sphere_radius);
   }
@@ -185,6 +193,8 @@ function draw_skeleton(radius) {
 }
 
 function make_particles(n) {
+  faces = [];
+  input_particles.value = `${n}`;
   particles = [];
   for (let i = 0; i < n; i += 1) {
     let position;
@@ -295,7 +305,6 @@ function keyPressed() {
     toggle_polytope();
   } else if (key >= '0' && key <= '9') {
     make_particles(int(key));
-    faces = [];
   }
 }