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

interface: bigger now

Browse source
This commit is contained in:
root 2025-04-27 10:11:26 +00:00
parent 72a24ce131
commit 96a5876297
2 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -7,7 +7,8 @@
<script src="lib/p5.js"></script> <script src="lib/p5.js"></script>
<style> <style>
:root { :root {
--aside-size: 218px; --aside-width: 220px;
--aside-height: 270px;
} }
.js { .js {
display: none; display: none;
@ -24,7 +25,7 @@ body {
background-color: #1b1b1b; background-color: #1b1b1b;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: var(--aside-size) auto; grid-template-columns: var(--aside-width) auto;
color: white; color: white;
} }
aside { aside {
@ -56,7 +57,7 @@ aside > container > div {
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
body { body {
grid-template-columns: none; grid-template-columns: none;
grid-template-rows: auto var(--aside-size); grid-template-rows: auto var(--aside-height);
} }
aside { aside {
order: 1; order: 1;
@ -83,8 +84,7 @@ aside > container > div {
<div> <div>
<button onclick="toggle_skeleton()">Skeleton</button> <button onclick="toggle_skeleton()">Skeleton</button>
<input id="checkbox-skeleton" type="checkbox" disabled> <input id="checkbox-skeleton" type="checkbox" disabled>
</div> <div></div>
<div>
<button onclick="toggle_polytope()">Polytope</button> <button onclick="toggle_polytope()">Polytope</button>
<input id="checkbox-polytope" type="checkbox" disabled> <input id="checkbox-polytope" type="checkbox" disabled>
</div> </div>
@ -104,12 +104,12 @@ aside > container > div {
<button onclick="make_particles(7)">7</button> <button onclick="make_particles(7)">7</button>
<button onclick="make_particles(8)">8</button> <button onclick="make_particles(8)">8</button>
<button onclick="make_particles(9)">9</button> <button onclick="make_particles(9)">9</button>
<div> </div>
<div style="display:grid;grid-template-columns:1fr auto;width:100%;">
<input id="input-particles" type="number" min="0" max="360" <input id="input-particles" type="number" min="0" max="360"
onkeypress="if (event.key === 'Enter') button_particles.click()"> onkeypress="if (event.key === 'Enter') button_particles.click()">
<button id="button-particles" onclick="make_particles(min(360, max(0, input_particles.valueAsNumber)))">Create</button> <button id="button-particles" onclick="make_particles(min(360, max(0, input_particles.valueAsNumber)))">Create</button>
</div> </div>
</div>
</container> </container>
</aside> </aside>
<main> <main>

11
sketch.js
View file

@ -22,7 +22,8 @@ let checkbox_skeleton;
let checkbox_polytope; let checkbox_polytope;
let input_particles; let input_particles;
let aside_size; let aside_width;
let aside_height;
function preload() { function preload() {
@ -31,7 +32,9 @@ function preload() {
function setup() { function setup() {
createCanvas(0, 0, WEBGL); createCanvas(0, 0, WEBGL);
aside_size = int(getComputedStyle(document.documentElement).getPropertyValue('--aside-size').replace('px', '')); const css = getComputedStyle(document.documentElement);
aside_width = int(css.getPropertyValue('--aside-width').replace('px', ''));
aside_height = int(css.getPropertyValue('--aside-height').replace('px', ''));
windowResized(); windowResized();
camera = createCamera(); camera = createCamera();
@ -60,9 +63,9 @@ function setup() {
function windowResized() { function windowResized() {
if (windowWidth >= windowHeight) { if (windowWidth >= windowHeight) {
resizeCanvas(windowWidth - aside_size, windowHeight); resizeCanvas(windowWidth - aside_width, windowHeight);
} else { } else {
resizeCanvas(windowWidth, windowHeight - aside_size); resizeCanvas(windowWidth, windowHeight - aside_height);
} }
} }