<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>p5.js</title>
<script src="lib/p5.js"></script>
<style>
:root {
--aside-size: 218px;
}
body {
padding: 0;
margin: 0;
background-color: #1b1b1b;
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>
</head>
<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>
<script src="thomson-problem.js"></script>
<script src="sketch.js"></script>
</body>
</html>