From 96a58762974ff6c6df4ab035458ffc6fc57bc675 Mon Sep 17 00:00:00 2001
From: root <>
Date: Sun, 27 Apr 2025 10:11:26 +0000
Subject: [PATCH] interface: bigger now

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

diff --git a/index.html b/index.html
index df02afb..8a7a77f 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,8 @@
 <script src="lib/p5.js"></script>
 <style>
 :root {
-  --aside-size: 218px;
+  --aside-width: 220px;
+  --aside-height: 270px;
 }
 .js {
   display: none;
@@ -24,7 +25,7 @@ body {
   background-color: #1b1b1b;
   overflow: hidden;
   display: grid;
-  grid-template-columns: var(--aside-size) auto;
+  grid-template-columns: var(--aside-width) auto;
   color: white;
 }
 aside {
@@ -56,7 +57,7 @@ aside > container > div {
 @media screen and (orientation:portrait) {
   body {
     grid-template-columns: none;
-    grid-template-rows: auto var(--aside-size);
+    grid-template-rows: auto var(--aside-height);
   }
   aside {
     order: 1;
@@ -83,8 +84,7 @@ aside > container > div {
 <div>
 <button onclick="toggle_skeleton()">Skeleton</button>
 <input id="checkbox-skeleton" type="checkbox" disabled>
-</div>
-<div>
+<div></div>
 <button onclick="toggle_polytope()">Polytope</button>
 <input id="checkbox-polytope" type="checkbox" disabled>
 </div>
@@ -104,12 +104,12 @@ aside > container > div {
 <button onclick="make_particles(7)">7</button>
 <button onclick="make_particles(8)">8</button>
 <button onclick="make_particles(9)">9</button>
-<div>
+</div>
+<div style="display:grid;grid-template-columns:1fr auto;width:100%;">
 <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>
 <main>
diff --git a/sketch.js b/sketch.js
index 79b2c4a..5ff8c46 100644
--- a/sketch.js
+++ b/sketch.js
@@ -22,7 +22,8 @@ let checkbox_skeleton;
 let checkbox_polytope;
 let input_particles;
 
-let aside_size;
+let aside_width;
+let aside_height;
 
 
 function preload() {
@@ -31,7 +32,9 @@ function preload() {
 
 function setup() {
   createCanvas(0, 0, WEBGL);
-  aside_size = int(getComputedStyle(document.documentElement).getPropertyValue('--aside-size').replace('px', ''));
+  const css = getComputedStyle(document.documentElement);
+  aside_width = int(css.getPropertyValue('--aside-width').replace('px', ''));
+  aside_height = int(css.getPropertyValue('--aside-height').replace('px', ''));
   windowResized();
 
   camera = createCamera();
@@ -60,9 +63,9 @@ function setup() {
 
 function windowResized() {
   if (windowWidth >= windowHeight) {
-    resizeCanvas(windowWidth - aside_size, windowHeight);
+    resizeCanvas(windowWidth - aside_width, windowHeight);
   } else {
-    resizeCanvas(windowWidth, windowHeight - aside_size);
+    resizeCanvas(windowWidth, windowHeight - aside_height);
   }
 }