setup.js

let c, ui, start, stop, speed, speedLabel, angle, angleLabel;
let dx, dy;
let g1, g2, g3, gLabel;
let range, tflight, hmax;

let path = [];

let g = 9.8;
let gravity = 1;
let scale = 10;
let running = false;
let drawLine = true;
let width = window.innerWidth;
let height = window.innerHeight;
let uisize = 235;
let ball;
let t = 0;
let originX = 30;

// visual constants for the new HUD/telemetry look
const groundY = () => (height * 5) / 6;
const gridMinor = 40;
const gridMajor = 200;

// camera zoom, used so long/high trajectories stay on screen
let zoomLevel = 1;
let targetZoom = 1;

function computeTargetZoom() {
	if (isNaN(range) || isNaN(hmax) || range <= 0) {
		targetZoom = 1;
		return;
	}
	let margin = 60;
	let availX = width - originX - margin;
	let availY = groundY() - margin;
	let neededX = range * scale;
	let neededY = hmax * scale;
	let zx = neededX > availX ? availX / neededX : 1;
	let zy = neededY > availY ? availY / neededY : 1;
	targetZoom = constrain(min(zx, zy, 1), 0.12, 1);
}

function preload() {
	ball = new Ball(0, 0, 0, 0, 0);
}

function setup() {
	c = createCanvas(width, height);
	angleMode(DEGREES);
	UI();
	checkButtons();
	frameRate(100);
}

function drawGrid() {
	let localLeft = -originX / zoomLevel;
	let localRight = (width - originX) / zoomLevel;
	let localTop = -groundY() / zoomLevel;
	let localBottom = (height - groundY()) / zoomLevel;

	if (zoomLevel > 0.4) {
		stroke(30, 42, 63);
		strokeWeight(1 / zoomLevel);
		for (let x = Math.floor(localLeft / gridMinor) * gridMinor; x < localRight; x += gridMinor) {
			line(x, localTop, x, localBottom);
		}
		for (let y = Math.floor(localTop / gridMinor) * gridMinor; y < localBottom; y += gridMinor) {
			line(localLeft, y, localRight, y);
		}
	}

	stroke(38, 52, 76);
	strokeWeight(1 / zoomLevel);
	for (let x = Math.floor(localLeft / gridMajor) * gridMajor; x < localRight; x += gridMajor) {
		line(x, localTop, x, localBottom);
	}
	for (let y = Math.floor(localTop / gridMajor) * gridMajor; y < localBottom; y += gridMajor) {
		line(localLeft, y, localRight, y);
	}

	// ground / horizon axis
	stroke(94, 234, 212, 90);
	strokeWeight(2 / zoomLevel);
	line(localLeft, 0, localRight, 0);

	// distance tick marks along the ground, every 5m
	noStroke();
	fill(124, 138, 165);
	textFont("JetBrains Mono");
	textSize(10 / zoomLevel);
	textAlign(LEFT, TOP);
	let maxM = localRight / scale;
	for (let m = 0; m <= maxM; m += 5) {
		let x = m * scale;
		stroke(30, 42, 63);
		strokeWeight(1 / zoomLevel);
		line(x, 0, x, 6 / zoomLevel);
		noStroke();
		fill(124, 138, 165);
		text(m + "m", x - 8 / zoomLevel, 10 / zoomLevel);
	}
}

function UI() {
	let panel = createDiv("").id("hud-panel");

	createElement("span", "LAUNCH PARAMETERS").class("hud-eyebrow").parent(panel);

	// speed field
	let speedGroup = createDiv("").class("field-group").parent(panel);
	createElement("label", "Speed <span class='unit'>m/s</span>").parent(speedGroup);
	speed = createInput();
	speed.attribute("placeholder", "e.g. 25");
	speed.parent(speedGroup);
	speed.id("speed");

	// angle field
	let angleGroup = createDiv("").class("field-group").parent(panel);
	createElement("label", "Angle <span class='unit'>&deg;</span>").parent(angleGroup);
	angle = createInput();
	angle.attribute("placeholder", "e.g. 45");
	angle.parent(angleGroup);
	angle.input(checkAngle);
	angle.id("angle");

	// gravity segmented control
	let gravGroup = createDiv("").class("field-group").parent(panel);
	createElement("label", "Gravity <span class='unit'>m/s&sup2;</span>").parent(gravGroup);
	let seg = createDiv("").class("segmented").parent(gravGroup);

	g1 = createButton("9.8");
	g1.parent(seg);
	g1.mousePressed(setG1);
	g1.class("seg-btn");
	g1.id("g1");

	g2 = createButton("9.81");
	g2.parent(seg);
	g2.mousePressed(setG2);
	g2.class("seg-btn");
	g2.id("g2");

	g3 = createButton("10");
	g3.parent(seg);
	g3.mousePressed(setG3);
	g3.class("seg-btn");
	g3.id("g3");

	// action buttons
	let actions = createDiv("").class("action-row").parent(panel);

	start = createButton("Start");
	start.parent(actions);
	start.mousePressed(run);
	start.class("hud-btn primary");

	reset = createButton("Reset");
	reset.parent(actions);
	reset.mousePressed(quit);
	reset.class("hud-btn ghost");
}

function setG1() {
	gravity = 1;
	checkButtons();
	g = 9.8;
}

function setG2() {
	gravity = 2;
	checkButtons();
	g = 9.81;
}

function setG3() {
	gravity = 3;
	checkButtons();
	g = 10;
}