root/sphere-electrons
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

interface: <input type="number"> for particles

Browse source
This commit is contained in:
root 2025-04-27 10:08:00 +00:00
parent be6d6ba000
commit 9194832b01
2 changed files with 31 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -38,8 +38,10 @@ aside > container {
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
} }
aside button { aside button, aside input[type="number"] {
font-size: 20px; font-size: 20px;
}
aside button {
min-width: 27px; min-width: 27px;
} }
aside input[type="checkbox"] { aside input[type="checkbox"] {
@ -92,16 +94,21 @@ aside > container > div {
<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button> <button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
</div> </div>
<div> <div>
<button onclick="make_particles(0);faces=[]">0</button> <button onclick="make_particles(0)">0</button>
<button onclick="make_particles(1);faces=[]">1</button> <button onclick="make_particles(1)">1</button>
<button onclick="make_particles(2);faces=[]">2</button> <button onclick="make_particles(2)">2</button>
<button onclick="make_particles(3);faces=[]">3</button> <button onclick="make_particles(3)">3</button>
<button onclick="make_particles(4);faces=[]">4</button> <button onclick="make_particles(4)">4</button>
<button onclick="make_particles(5);faces=[]">5</button> <button onclick="make_particles(5)">5</button>
<button onclick="make_particles(6);faces=[]">6</button> <button onclick="make_particles(6)">6</button>
<button onclick="make_particles(7);faces=[]">7</button> <button onclick="make_particles(7)">7</button>
<button onclick="make_particles(8);faces=[]">8</button> <button onclick="make_particles(8)">8</button>
<button onclick="make_particles(9);faces=[]">9</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> </div>
</container> </container>
</aside> </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"); document.querySelectorAll(".js").forEach(e => e.style = "display:initial");
const input_charge = document.getElementById("input-charge"); const input_charge = document.getElementById("input-charge");
input_charge.oninput(); input_charge.oninput();
const button_particles = document.getElementById("button-particles");
</script> </script>
</body> </body>
</html> </html>

15
sketch.js
View file

@ -20,6 +20,7 @@ let buttons_surface;
let checkbox_physics; let checkbox_physics;
let checkbox_skeleton; let checkbox_skeleton;
let checkbox_polytope; let checkbox_polytope;
let input_particles;
let aside_size; let aside_size;
@ -52,6 +53,9 @@ function setup() {
document.getElementById("button-surface-earth"), document.getElementById("button-surface-earth"),
] ]
buttons_surface[surface].disabled = true; buttons_surface[surface].disabled = true;
input_particles = document.getElementById("input-particles");
input_particles.valueAsNumber = particles.length;
} }
function windowResized() { function windowResized() {
@ -71,11 +75,15 @@ function draw() {
camera.centerZ = 0; camera.centerZ = 0;
make_lights(); 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); draw_particles(sphere_radius);
if (skeleton) draw_skeleton(sphere_radius); if (skeleton) draw_skeleton(sphere_radius);
if (polytope) { if (polytope_if_fast) {
if (physics || faces.length === 0) find_faces(); if (physics || faces.length === 0) find_faces();
draw_faces(sphere_radius); draw_faces(sphere_radius);
} }
@ -185,6 +193,8 @@ function draw_skeleton(radius) {
} }
function make_particles(n) { function make_particles(n) {
faces = [];
input_particles.value = `${n}`;
particles = []; particles = [];
for (let i = 0; i < n; i += 1) { for (let i = 0; i < n; i += 1) {
let position; let position;
@ -295,7 +305,6 @@ function keyPressed() {
toggle_polytope(); toggle_polytope();
} else if (key >= '0' && key <= '9') { } else if (key >= '0' && key <= '9') {
make_particles(int(key)); make_particles(int(key));
faces = [];
} }
} }