Compare commits
No commits in common. "33aab6af5ca04ef675791539e211e744651a7830" and "eeb1beaea3d8ade3e5c835df68973bcaac7cf34a" have entirely different histories.
33aab6af5c
...
eeb1beaea3
3 changed files with 24 additions and 164 deletions
92
index.html
92
index.html
|
|
@ -6,108 +6,18 @@
|
|||
<title>p5.js</title>
|
||||
<script src="lib/p5.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--aside-size: 218px;
|
||||
}
|
||||
.js {
|
||||
display: none;
|
||||
}
|
||||
noscript {
|
||||
padding: 10px;
|
||||
}
|
||||
a {
|
||||
color: cornflowerblue;
|
||||
}
|
||||
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;
|
||||
}
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="js">
|
||||
<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>
|
||||
<noscript>
|
||||
This page requires JavaScript.
|
||||
<br>
|
||||
Source code: <a href="https://git.atomic.garden/root/sphere-charges">https://git.atomic.garden/root/sphere-charges</a>
|
||||
</noscript>
|
||||
<script src="thomson-problem.js"></script>
|
||||
<script src="sketch.js"></script>
|
||||
<script>document.querySelectorAll(".js").forEach(e => e.style = "display:initial");</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
90
sketch.js
90
sketch.js
|
|
@ -4,7 +4,7 @@ let red;
|
|||
let charges = [];
|
||||
let faces = [];
|
||||
|
||||
let sphere_radius;
|
||||
let sphere_radius = 200;
|
||||
|
||||
const SURFACE_NONE = 0;
|
||||
const SURFACE_CIRCLES = 1;
|
||||
|
|
@ -13,14 +13,7 @@ const SURFACE_EARTH = 2;
|
|||
let surface = SURFACE_CIRCLES;
|
||||
let physics = false;
|
||||
let skeleton = false;
|
||||
let polytope = false;
|
||||
|
||||
let buttons_surface;
|
||||
let checkbox_physics;
|
||||
let checkbox_skeleton;
|
||||
let checkbox_polytope;
|
||||
|
||||
let aside_size;
|
||||
let polyhedron = false;
|
||||
|
||||
|
||||
function preload() {
|
||||
|
|
@ -28,53 +21,25 @@ function preload() {
|
|||
}
|
||||
|
||||
function setup() {
|
||||
createCanvas(0, 0, WEBGL);
|
||||
aside_size = int(getComputedStyle(document.documentElement).getPropertyValue('--aside-size').replace('px', ''));
|
||||
windowResized();
|
||||
|
||||
createCanvas(windowWidth, windowHeight, WEBGL);
|
||||
camera = createCamera();
|
||||
red = color(0xbf, 0x00, 0x00);
|
||||
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() {
|
||||
if (windowWidth >= windowHeight) {
|
||||
resizeCanvas(windowWidth - aside_size, windowHeight);
|
||||
} else {
|
||||
resizeCanvas(windowWidth, windowHeight - aside_size);
|
||||
}
|
||||
resizeCanvas(windowWidth, windowHeight);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(50);
|
||||
|
||||
orbitControl();
|
||||
camera.centerX = 0;
|
||||
camera.centerY = 0;
|
||||
camera.centerZ = 0;
|
||||
background(50);
|
||||
|
||||
make_lights();
|
||||
if (physics) move_charges(charges);
|
||||
|
||||
draw_charges(sphere_radius);
|
||||
if (skeleton) draw_skeleton(sphere_radius);
|
||||
if (polytope) {
|
||||
if (polyhedron) {
|
||||
if (physics || faces.length === 0) find_faces();
|
||||
draw_faces(sphere_radius);
|
||||
}
|
||||
|
|
@ -91,7 +56,7 @@ function find_faces() {
|
|||
for (let i = 2; i < charges.length; i += 1) {
|
||||
for (let j = 1; j < i; j += 1) {
|
||||
for (let k = 0; k < j; k += 1) {
|
||||
// Check if p1 p2 p3 form a face of the convex polytope
|
||||
// Check if p1 p2 p3 form a face of the convex polyhedron
|
||||
// enclosing all vertices ...
|
||||
const p1 = charges[i].position;
|
||||
const p2 = charges[j].position;
|
||||
|
|
@ -118,7 +83,7 @@ function find_faces() {
|
|||
// If L intersects the plane, q1 and q2 are on
|
||||
// opposite sides of the plane generated by p1 p2 p3,
|
||||
// so p1 p2 p3 can't be a face. If we want the
|
||||
// polytope to be convex. Which we do.
|
||||
// polyhedron to be convex. Which we do.
|
||||
//
|
||||
// A point k is on the plane generated by p1 p2 p3 iff
|
||||
// dot(k - p1, normal) = 0. Let n := normal.
|
||||
|
|
@ -153,8 +118,8 @@ function draw_faces(radius) {
|
|||
push();
|
||||
strokeWeight(2);
|
||||
stroke(0x00);
|
||||
fill(0xbf, 0x7f);
|
||||
for ([p1, p2, p3] of faces) {
|
||||
fill(0xbf, 0x7f);
|
||||
beginShape(TRIANGLES);
|
||||
vertex(p1.x * radius, p1.y * radius, p1.z * radius);
|
||||
vertex(p2.x * radius, p2.y * radius, p2.z * radius);
|
||||
|
|
@ -190,7 +155,13 @@ function make_charges(n) {
|
|||
if (i === 0) {
|
||||
position = createVector(0, -1, 0);
|
||||
} else {
|
||||
position = p5.Vector.random3D();
|
||||
const lat = random(-TAU / 4, TAU / 4);
|
||||
const lon = random(0, TAU);
|
||||
position = createVector(
|
||||
cos(lat) * cos(lon),
|
||||
sin(lat),
|
||||
cos(lat) * sin(lon),
|
||||
);
|
||||
}
|
||||
charges.push({
|
||||
position: position,
|
||||
|
|
@ -284,36 +255,15 @@ function make_lights() {
|
|||
|
||||
function keyPressed() {
|
||||
if (key == ' ') {
|
||||
toggle_physics();
|
||||
physics = !physics;
|
||||
} else if (key == 'd') {
|
||||
set_surface((surface + 1) % 3);
|
||||
surface = (surface + 1) % 3;
|
||||
} else if (key == 'f') {
|
||||
toggle_skeleton();
|
||||
skeleton = !skeleton;
|
||||
} else if (key == 'g') {
|
||||
toggle_polytope();
|
||||
polyhedron = !polyhedron;
|
||||
} else if (key >= '0' && key <= '9') {
|
||||
make_charges(int(key));
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ function move_charges(charges) {
|
|||
let acceleration_mag = 1 / displacement.mag() * 0.001;
|
||||
let ai;
|
||||
if (acceleration_mag === Infinity) {
|
||||
ai = p5.Vector.random3D();
|
||||
ai = createVector(random(-1, 1), random(-1, 1), random(-1, 1));
|
||||
} else {
|
||||
ai = displacement.copy().normalize();
|
||||
ai = displacement.copy();
|
||||
}
|
||||
ai.mult(acceleration_mag);
|
||||
ai = ai.normalize().mult(acceleration_mag);
|
||||
let aj = p5.Vector.mult(ai, -1);
|
||||
project_onto_plane(ai, charges[i].position);
|
||||
project_onto_plane(aj, charges[j].position);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue