Physics/public/scripts/sketch.js

let debug = false;
let gravity = false;
let userIsWriting = false;
let grabbing = false;
let balls = [];
let attractions = [];
let objectSlot = null;
let graphicSlot = null;
let viewPort = {x: 0, y: 0, v: 0};
let origin = {x: 0, y: 0};
let colorPicker = null;

function setup(){
	setFrameRate(60);
	let c = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height());
	c.parent("canvasHolder");
	graphicSlot = createGraphics($("#slot").width(), $("#slot").height());
	graphicSlot.parent("slot");
	graphicSlot.noStroke();
	$("#slot canvas").show();
	viewPort.x = -width / 2;
	viewPort.y = -height / 2;
	viewPort.v = 10;
	colorPicker = new ColorPicker();
	colorPicker.hex = "#FF0000";
	colorPicker.updateFromHEX(null, true);
	$("input").on("focus", function(){userIsWriting = true;});
	$("input").on("blur", function(){userIsWriting = false;});
	let canvas = $("#slot canvas");
	canvas.mousedown(function(){
		grabbing = true;
		$("canvas, div").css({
			"cursor": "grabbing"
		});
		$(window).mouseup(function(){
			if (!grabbing) return;
			if (mouseX < width){
				if (objectSlot.isBall) balls.push(new Ball(mouseX + viewPort.x, mouseY + viewPort.y, objectSlot.r, objectSlot.c));
				if (objectSlot.isAttraction) attractions.push(new Attraction(mouseX + viewPort.x, mouseY + viewPort.y, objectSlot.r, objectSlot.c));
				canvas.off("mousedown", "**");
			}
			grabbing = false;
			$("#defaultCanvas0, div").css({
				"cursor": "auto"
			});
			$("#slot canvas").css({
				"cursor": "grab"
			});
		});
	});
}

function draw(){
	checkSlot();
	checkViewPort();
	background(50);
	let grabCheck = false,
		grabbingCheck = false;
	for (let a of attractions){
		a.show();
		if (a.checkGrab()) grabCheck = true;
		if (a.isGrabbed) grabbingCheck = true;
	}
	if (grabbingCheck){
		$("#defaultCanvas0").css({
			"cursor": "grabbing"
		});
	} else if (grabCheck){
		$("#defaultCanvas0").css({
			"cursor": "grab"
		});
	} else {
		$("#defaultCanvas0").css({
			"cursor": "auto"
		});
	}
	for (let b of balls){
		b.attracted();
		b.move();
		b.show();
		if (debug) b.debugInformation();
	}
	if (debug) debugInformation();
}

function checkViewPort(){
	if (keyIsDown(LEFT_ARROW) || keyIsDown(65) && !userIsWriting) viewPort.x -= viewPort.v;
	if (keyIsDown(RIGHT_ARROW) || keyIsDown(68) && !userIsWriting) viewPort.x += viewPort.v;
	if (keyIsDown(UP_ARROW) || keyIsDown(87) && !userIsWriting) viewPort.y -= viewPort.v;
	if (keyIsDown(DOWN_ARROW) || keyIsDown(83) && !userIsWriting) viewPort.y += viewPort.v;
	translate(-viewPort.x, -viewPort.y);
}

function updateRadius(elem){
	let value = $(elem).val();
	$("#radiusRange").val(value);
	$("#radiusInput").val(value);
}

function checkSlot(){
	let val = $("#itemSelector").val();
	let radius = int($("#radiusInput").val());
	let color = colorPicker.getColor();
	switch(val){
		case "ball":
			objectSlot = new Ball(graphicSlot.width / 2, graphicSlot.height / 2, radius, color);
			objectSlot.isBall = true;
			objectSlot.isAttraction = false;
			break;
		case "attractor":
			objectSlot = new Attraction(graphicSlot.width / 2, graphicSlot.height / 2, radius, color);
			objectSlot.isAttraction = true;
			objectSlot.isBall = false;
			break;
	}
	let o = objectSlot;
	graphicSlot.clear();
	graphicSlot.fill(o.c);
	graphicSlot.ellipse(o.pos.x, o.pos.y, o.r * 2);
}