You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

120 lines
3.2 KiB

2 years ago
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);
}