P5 JS example that draws many MANY small circles on screen!

sketch.js

/// @ts-check
/// <reference path="./node_modules/@types/p5/global.d.ts" />

//const p5 = require("./node_modules/@types/p5");

const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 400;
const CANVAS_COLOR = 'pink';
let number_of_circles = 50;
let circle_colors = ['purple', 'blue', 'red', 'cyan', 'green', 'magenta', 'indigo']
let particles = [];


function setup() {
  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
}

function draw() {
  background(CANVAS_COLOR);
  // Create new particles
  for (let i = 0; i < number_of_circles; i++) {
    particles.push(new Particle());
  }

  // Update and draw existing particles
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    p.show();
  }
  // log every draw to console
  console.log("draw");

}

class Particle {
  constructor() {
    this.x = random(10, 380);
    this.y = random(10,380);
    this.radius = random(5, 10); // Random radius for each particle
    this.color = random(circle_colors);
  }

  show() {
    noStroke();
    fill(this.color);
    circle(this.x, this.y, this.radius * 2); // Draw the particle
  }

}