size = 10;
radius = size/2;
cirX = 500
cirY = 300;
xmax = 1000;
ymax = 600;
speed = 3;
// the function setup() is called once when the page is loaded
function setup() {
    // create a canvas element and append it to the body
    createCanvas(xmax, ymax);
    frameRate(1200);
    // disable the outline of shapes
    noStroke();
}

function keyPressed() {
    if (keyIsDown(LEFT_ARROW) && cirX > 0+radius) {
        cirX -= speed;
    }
    if (keyIsDown(RIGHT_ARROW) && cirX < xmax-radius) {
        cirX += speed;
    }
    if (keyIsDown(UP_ARROW) && cirY > 0+radius) {
        cirY -= speed;
    } 
    if (keyIsDown(DOWN_ARROW) && cirY < ymax-radius) {
        cirY += speed;
    }
}

function collision() {

}

// the function draw() is called every frame
function draw() {
    keyPressed();
    // clear the background with a transparent black color
    background(0, 0, 0, 100);

    // draw a circle at the mouse position

    circle(constrain(cirX,0+radius,xmax-radius), constrain(cirY,0+radius,ymax-radius), size);
    square(100,100,100,10);
}