const size = 10; radius = size/2; cirX = 500 cirY = 300; const width = 1000; const height = 600; speed = 3; squareX = 100; squareY = 100; const squareSize = 100; // the function setup() is called once when the page is loaded function setup() { // create a canvas element and append it to the body createCanvas(width, height); frameRate(120); // disable the outline of shapes noStroke(); } function keyPressed() { if (keyIsDown(LEFT_ARROW) && cirX > 0+radius) { cirX -= speed; } if (keyIsDown(RIGHT_ARROW) && cirX < width-radius) { cirX += speed; } if (keyIsDown(UP_ARROW) && cirY > 0+radius) { cirY -= speed; } if (keyIsDown(DOWN_ARROW) && cirY < height-radius) { cirY += speed; } } function object_collision() { var squareCenterX = squareX + squareSize / 2; var squareCenterY = squareY + squareSize / 2; var distance = dist(cirX, cirY, squareCenterX, squareCenterY); if (distance < squareSize / 2 + radius) { squareX = random(0, width - squareSize); squareY = random(0, height - squareSize); } } // 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,width-radius), constrain(cirY,0+radius,height-radius), size); square(squareX,squareY,squareSize); object_collision(); }