size = 50;
posX = 500;
posY = 300;
// the function setup() is called once when the page is loaded
function setup() {
    // create a canvas element and append it to the body
    createCanvas(1000, 600);
    frameRate(120);
    // disable the outline of shapes
    noStroke();
}

function keyPressed() {
    if (keyIsDown(LEFT_ARROW)) {
        posX -= 5;
    }
    if (keyIsDown(RIGHT_ARROW)) {
        posX += 5;
    }
    if (keyIsDown(UP_ARROW)) {
        posY -= 5;
    } 
    if (keyIsDown(DOWN_ARROW)) {
        posY += 5;
    }
}
// the function draw() is called every frame
function draw() {
    keyPressed();
    // clear the background with a transparent black color
    background(0, 0, 0, 10);

    // draw a circle at the mouse position

    circle(posX, posY, size);
}