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;
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 {
<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
</div>
<div>
<button onclick="make_particles(0);faces=[]">0</button>
<button onclick="make_particles(1);faces=[]">1</button>
<button onclick="make_particles(2);faces=[]">2</button>
<button onclick="make_particles(3);faces=[]">3</button>
<button onclick="make_particles(4);faces=[]">4</button>
<button onclick="make_particles(5);faces=[]">5</button>
<button onclick="make_particles(6);faces=[]">6</button>
<button onclick="make_particles(7);faces=[]">7</button>
<button onclick="make_particles(8);faces=[]">8</button>
<button onclick="make_particles(9);faces=[]">9</button>
<button onclick="make_particles(0)">0</button>
<button onclick="make_particles(1)">1</button>
<button onclick="make_particles(2)">2</button>
<button onclick="make_particles(3)">3</button>
<button onclick="make_particles(4)">4</button>
<button onclick="make_particles(5)">5</button>
<button onclick="make_particles(6)">6</button>
<button onclick="make_particles(7)">7</button>
<button onclick="make_particles(8)">8</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>
</container>
</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");
const input_charge = document.getElementById("input-charge");
input_charge.oninput();
const button_particles = document.getElementById("button-particles");
</script>
</body>
</html>

15
sketch.js
View file

@ -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 = [];
}
}