let circle_x, circle_y

let circle_r = 60;

let xspeed = 2.8; 

let yspeed = 2.2; 

let xdirection = 1; // Left or Right

let ydirection = 1; // Top to Bottom

​

//Brush variables:

let prev_X = 0;

let prev_Y = 0;

​

​

function setup() {

  createCanvas(600, 600);  

  background(220);

  frameRate(30);

  ellipseMode(RADIUS);

  circle_x = width / 2;

  circle_y = height / 2;

}

​

function draw() {

  fill(0);

  circle(mouseX, mouseY, 20); 

  strokeWeight(40);

  line(mouseX, mouseY, prev_X, prev_Y);

  prev_X = mouseX;

  prev_Y = mouseY;

  //If mouse pressed, clear the screen:

  if(mouseIsPressed) {background(220); }

  //Distance between center of the circle and the mouse coordinates

  CircleDist = dist(circle_x, circle_y, mouseX, mouseY);

  if (CircleDist < circle_r/2) {

    background(220);

  }

  bouncing_Circle();

  printText();

}

​

​

//================================================================

function bouncing_Circle() {

  circle_x = circle_x + xspeed * xdirection;

  circle_y = circle_y + yspeed * ydirection;

  //Essentially 

  if (circle_x + circle_r > width || circle_x < circle_r) {

    xdirection *= -1;

  }

  if (circle_y + circle_r > height || circle_y < circle_r) {

    ydirection *= -1;

  }

  strokeWeight(1);

  fill("blue");

  circle(circle_x, circle_y, circle_r);

}

​

​

//================================================================

function printText() {

  fill(220);

  rect(80, 2, 440, 75);

  fill("black");

  textSize(30);

  textAlign(CENTER);

  text("Don't let the blue dot fill the grid!", 300, 30);

  textSize(20);

  text("Dont touch it either!", 300, 60);

}