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 {
- - - - - - - - - - + + + + + + + + + + +
+ + +
@@ -118,6 +125,7 @@ Source code: 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"); 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 = []; } }