interface

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;
+}