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>
<style>
:root {
--aside-size: 218px;
--aside-width: 220px;
--aside-height: 270px;
}
.js {
display: none;
@ -24,7 +25,7 @@ body {
background-color: #1b1b1b;
overflow: hidden;
display: grid;
grid-template-columns: var(--aside-size) auto;
grid-template-columns: var(--aside-width) auto;
color: white;
}
aside {
@ -56,7 +57,7 @@ aside > container > div {
@media screen and (orientation:portrait) {
body {
grid-template-columns: none;
grid-template-rows: auto var(--aside-size);
grid-template-rows: auto var(--aside-height);
}
aside {
order: 1;
@ -83,8 +84,7 @@ aside > container > div {
<div>
<button onclick="toggle_skeleton()">Skeleton</button>
<input id="checkbox-skeleton" type="checkbox" disabled>
</div>
<div>
<div></div>
<button onclick="toggle_polytope()">Polytope</button>
<input id="checkbox-polytope" type="checkbox" disabled>
</div>
@ -104,12 +104,12 @@ aside > container > div {
<button onclick="make_particles(7)">7</button>
<button onclick="make_particles(8)">8</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"
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>
<main>

11
sketch.js
View file

@ -22,7 +22,8 @@ let checkbox_skeleton;
let checkbox_polytope;
let input_particles;
let aside_size;
let aside_width;
let aside_height;
function preload() {
@ -31,7 +32,9 @@ function preload() {
function setup() {
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();
camera = createCamera();
@ -60,9 +63,9 @@ function setup() {
function windowResized() {
if (windowWidth >= windowHeight) {
resizeCanvas(windowWidth - aside_size, windowHeight);
resizeCanvas(windowWidth - aside_width, windowHeight);
} else {
resizeCanvas(windowWidth, windowHeight - aside_size);
resizeCanvas(windowWidth, windowHeight - aside_height);
}
}