Preview:
void setup() {
  size(400, 400); // Set canvas size
  background(220); // Set background color
}

void draw() {
  // This function is intentionally left empty
}

void mouseDragged() {
  // Draw circles and rectangles at the mouse's dragged positions
  fill(random(255), random(255), random(255)); // Random fill color for circles
  ellipse(mouseX, mouseY, 20, 20); // Draw a circle at mouseX and mouseY
  
  fill(random(255), random(255), random(255)); // Random fill color for rectangles
  rect(mouseX - 10, mouseY - 10, 20, 20); // Draw a rectangle around the circle
}

void keyPressed() {
  // Clear the canvas and change the background color when any key is pressed
  background(random(255), random(255), random(255));
}

void mousePressed() {
  // Draw a larger circle and a smaller rectangle when the mouse is pressed
  fill(random(255), random(255), random(255)); // Random fill color for circles
  ellipse(mouseX, mouseY, 30, 30);
  
  fill(random(255), random(255), random(255)); // Random fill color for rectangles
  rect(mouseX - 15, mouseY - 15, 10, 10);
}

void mouseReleased() {
  // Draw a smaller circle and a larger rectangle when the mouse is released
  fill(random(255), random(255), random(255)); // Random fill color for circles
  ellipse(mouseX, mouseY, 15, 15);
  
  fill(random(255), random(255), random(255)); // Random fill color for rectangles
  rect(mouseX - 5, mouseY - 5, 30, 30);
}

void mouseWheel(MouseEvent event) {
  // Adjust the circle size with the mouse wheel
  float newSize = constrain(event.getCount(), -1, 1) * 5;
  ellipse(mouseX, mouseY, 20 + newSize, 20 + newSize);
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter