let previousY;

let brushSize;

let brushColor;

//if you need to have a variable that allows for change - use let to declare it - if it needs to not change - you would use cons

​

​

function setup() {

  createCanvas(800, 800);

  background(220);

  noFill();

  brushSize = 12;

  brushColor = color(0, 0, 0, 0); // Initial brush color

}

​

function draw() {

  if (mouseIsPressed) {

    // Calculate the brush size based on the mouse speed

    let speeds = dist(pmouseX, pmouseY, mouseX, mouseY);

    brushSize = map(speeds, 2, 5, 10, 7); // Adjust the mapping values for the desired brush size range

​

 // Change the brush color continuously

    brushColor = color(

      frameCount % 255,

      (frameCount + 255) % 55,

      (frameCount + 195) % 155,

      (frameCount + 80) % 225

    );

    //because the `draw` function is continuously executed by checking if the mouse is currently pressed and then calculating the brush size relative to the speed of the mouse movement using the previous mouse position  and changes the brush color continuously. It then calls the `drawWithBrush` function to actually draw on the canvas.

​

​

    // When the mouse is pressed and dragged, draw with the current brush

    drawWithBrush();

  }

}

​

function drawWithBrush() {

  // Set the brush color

  fill(brushColor);

​

  // Draw based on the selected brush shape (e.g., circle)

  ellipse(mouseX, mouseY, brushSize, brushSize);

​

  // Connect the shapes with lines

  //line(previousX, previousY, mouseX, mouseY);

​

  // Update the previous mouse position

  previousX = mouseX;

  previousY = mouseY;

}

​

function mouseClicked() {

  // Record the initial position of the mouse when it's pressed

  previousX = mouseX;

  previousY = mouseY;

}

​

function keyPressed() {

  if (key === "c") {

    background(220); // Clear the canvas

  }

}

​

function keyReleased() {

  // Reset brush size on key release

  if (key === "c") {

    brushSize = 10;

  }

}

​