nicer sphere_radius on mobile

This commit is contained in:
root 2025-04-26 12:32:59 +00:00
parent 2655d15bc9
commit 769043c5cb
2 changed files with 21 additions and 4 deletions

View file

@ -6,6 +6,9 @@
<title>p5.js</title> <title>p5.js</title>
<script src="lib/p5.js"></script> <script src="lib/p5.js"></script>
<style> <style>
:root {
--aside-size: 218px;
}
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;

View file

@ -4,7 +4,7 @@ let red;
let charges = []; let charges = [];
let faces = []; let faces = [];
let sphere_radius = 200; let sphere_radius;
const SURFACE_NONE = 0; const SURFACE_NONE = 0;
const SURFACE_CIRCLES = 1; const SURFACE_CIRCLES = 1;
@ -15,25 +15,39 @@ let physics = false;
let skeleton = false; let skeleton = false;
let polyhedron = false; let polyhedron = false;
let aside_size;
function preload() { function preload() {
earth_image = loadImage("atlas1.jpg"); earth_image = loadImage("atlas1.jpg");
} }
function setup() { function setup() {
createCanvas(windowWidth, windowHeight, WEBGL); createCanvas(0, 0, WEBGL);
aside_size = int(getComputedStyle(document.documentElement).getPropertyValue('--aside-size').replace('px', ''));
windowResized();
camera = createCamera(); camera = createCamera();
red = color(0xbf, 0x00, 0x00); red = color(0xbf, 0x00, 0x00);
sphere_radius = min(250, min(width, height) / 2 * 0.8);
} }
function windowResized() { function windowResized() {
resizeCanvas(windowWidth, windowHeight); if (windowWidth >= windowHeight) {
resizeCanvas(windowWidth - aside_size, windowHeight);
} else {
resizeCanvas(windowWidth, windowHeight - aside_size);
}
} }
function draw() { function draw() {
orbitControl();
background(50); background(50);
orbitControl();
camera.centerX = 0;
camera.centerY = 0;
camera.centerZ = 0;
make_lights(); make_lights();
if (physics) move_charges(charges); if (physics) move_charges(charges);