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
120 lines
3.2 KiB
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);
|
|
} |