From d10f77d42020e707fa8d3a368536f7c190460b30 Mon Sep 17 00:00:00 2001 From: root <> Date: Sat, 26 Apr 2025 12:37:50 +0000 Subject: [PATCH] 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; + } } +
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; +}