Cómo dibujar múltiples esferas aleatorias en Canvas de HTML5

En este artículo profundizaremos en el uso de la API Canvas de HTML5. Aprenderemos a dibujar múltiples esferas en posiciones aleatorias, una técnica fundamental para crear fondos dinámicos, partículas en videojuegos o incluso piezas de arte generativo.

Si eres nuevo en este mundo, te recomiendo leer nuestra guía sobre el Uso básico del Canvas para familiarizarte con los conceptos iniciales.

Configuración Inicial del Canvas

El primer paso es obtener una referencia al elemento en el DOM y definir su contexto de dibujo en 2D. Es una buena práctica asegurarse de que las dimensiones del Canvas sean dinámicas.

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

// Obtenemos dimensiones actuales
const width = myCanvas.width;
const height = myCanvas.height;

Lógica para el Dibujo Aleatorio

Para dibujar puntos o esferas al azar sin que se salgan de los bordes, debemos considerar el radio de la figura en nuestros cálculos de límites (maxWidth y maxHeight).

const radius = 10;
const n = 50; // Cantidad de esferas

for (let i = 0; i < n; i++) {
    // Calculamos posiciones evitando los bordes
    const centerX = Math.random() * (width - radius * 2) + radius;
    const centerY = Math.random() * (height - radius * 2) + radius;

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    
    ctx.fillStyle = "#e74c3c"; // Color elegante (rojo coral)
    ctx.fill();
    
    ctx.strokeStyle = "#c0392b"; // Borde ligeramente más oscuro
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
}

ctx.beginPath(): Fundamental para iniciar un nuevo trazo y evitar que todas las figuras se conecten entre sí.
Math.random(): Genera un valor entre 0 y 1, que escalamos a las dimensiones de nuestro lienzo.
ctx.arc(): El método estándar para crear arcos y círculos perfectos.

Haciendo el ejemplo interactivo

Podemos llevar este ejercicio más allá permitiendo que el usuario controle la cantidad, el tamaño y el color de las esferas mediante inputs de HTML5.

// Captura de valores desde la interfaz
const userRadius = document.getElementById("radio").value;
const count = document.getElementById("n").value;
const color = document.getElementById("color").value;

// Tip: Para limpiar el canvas antes de volver a dibujar
ctx.clearRect(0, 0, width, height);

Puedes ver el resultado de este experimento interactivo en los siguientes enlaces:

Más allá de los puntos estáticos: Animación y Arte Generativo

Dibujar puntos al azar es el primer paso para crear sistemas de partículas. Si encerramos nuestra lógica de dibujo dentro de una función requestAnimationFrame, podríamos hacer que estas esferas se muevan, reboten o cambien de tamaño en tiempo real.

El Canvas es una herramienta increíblemente potente. Una vez dominas el dibujo básico, el siguiente paso lógico es explorar técnicas más avanzadas como el procesamiento de imágenes o incluso la captura de medios. Por ejemplo, puedes aprender cómo activar la cámara con JavaScript y proyectar el video directamente sobre un Canvas para aplicar filtros en tiempo real.