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 0fad69fda8
2 changed files with 12 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -7,7 +7,8 @@
<script src="lib/p5.js"></script>
<style>
:root {
--aside-size: 218px;
--aside-width: 220px;
--aside-height: 256px;
}
.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>

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);
}
}