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

interface

Browse source
This commit is contained in:
root 2025-04-26 12:37:50 +00:00
parent d57d49a194
commit d10f77d420
2 changed files with 119 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

74
index.html
View file

@ -13,11 +13,83 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #1b1b1b; 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;
}
} }
</style> </style>
</head> </head>
<body> <body>
<aside>
<container>
<div style="width:100%">
<button onclick="toggle_physics()">Physics</button>
<input id="checkbox-physics" type="checkbox" disabled>
</div>
<div>
<button onclick="toggle_skeleton()">Skeleton</button>
<input id="checkbox-skeleton" type="checkbox" disabled>
</div>
<div>
<button onclick="toggle_polytope()">Polytope</button>
<input id="checkbox-polytope" type="checkbox" disabled>
</div>
<div>
<button id="button-surface-none" onclick="set_surface(SURFACE_NONE)">Hide surface</button>
<button id="button-surface-circles" onclick="set_surface(SURFACE_CIRCLES)">Wireframe</button>
<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
</div>
<div>
<button onclick="make_charges(0);faces=[]">0</button>
<button onclick="make_charges(1);faces=[]">1</button>
<button onclick="make_charges(2);faces=[]">2</button>
<button onclick="make_charges(3);faces=[]">3</button>
<button onclick="make_charges(4);faces=[]">4</button>
<button onclick="make_charges(5);faces=[]">5</button>
<button onclick="make_charges(6);faces=[]">6</button>
<button onclick="make_charges(7);faces=[]">7</button>
<button onclick="make_charges(8);faces=[]">8</button>
<button onclick="make_charges(9);faces=[]">9</button>
</div>
</container>
</aside>
<main> <main>
</main> </main>
<script src="thomson-problem.js"></script> <script src="thomson-problem.js"></script>

50
sketch.js
View file

@ -15,6 +15,11 @@ let physics = false;
let skeleton = false; let skeleton = false;
let polytope = false; let polytope = false;
let buttons_surface;
let checkbox_physics;
let checkbox_skeleton;
let checkbox_polytope;
let aside_size; let aside_size;
@ -30,6 +35,22 @@ function setup() {
camera = createCamera(); camera = createCamera();
red = color(0xbf, 0x00, 0x00); red = color(0xbf, 0x00, 0x00);
sphere_radius = min(250, min(width, height) / 2 * 0.8); 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() { function windowResized() {
@ -263,15 +284,36 @@ function make_lights() {
function keyPressed() { function keyPressed() {
if (key == ' ') { if (key == ' ') {
physics = !physics; toggle_physics();
} else if (key == 'd') { } else if (key == 'd') {
surface = (surface + 1) % 3; set_surface((surface + 1) % 3);
} else if (key == 'f') { } else if (key == 'f') {
skeleton = !skeleton; toggle_skeleton();
} else if (key == 'g') { } else if (key == 'g') {
polytope = !polytope; toggle_polytope();
} else if (key >= '0' && key <= '9') { } else if (key >= '0' && key <= '9') {
make_charges(int(key)); make_charges(int(key));
faces = []; 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;
}