Experimento visual que combina programación y creatividad para generar efectos interactivos utilizando el elemento <canvas> de HTML5 y JavaScript.
El siguiente código es un ejemplo sencillo de cómo crear un efecto interactivo de partículas en movimiento que reaccionan al cursor del usuario. Ver cómo las partículas responden en tiempo real al movimiento del puntero crea una experiencia visual dinámica y envolvente, similar a un ballet digital que cobra vida ante nuestros ojos.
¿Qué es Canvas?
El <canvas> es un elemento o etiqueta incorporada en HTML5 que permite, mediante el uso de una API, crear gráficos 2D, mapas de bits y animaciones. Este elemento proporciona un modelo de procedimiento de bajo nivel que actualiza un mapa de bits, lo que significa que cada vez que se dibuja algo en el lienzo, se están manipulando los píxeles directamente.
Utilizando JavaScript, se puede dibujar de manera dinámica y fluida sobre el lienzo cualquier tipo de gráfico, desde simples formas geométricas hasta complejas animaciones interactivas. Actualmente, el canvas es ampliamente utilizado para crear animaciones, dibujos, composiciones de imágenes, e incluso juegos.
Un claro ejemplo de su uso es mi propia página de inicio, donde al pasar el mouse sobre ciertos elementos, puedes ver destellos y cambios de color en el fondo, demostrando el poder interactivo y visual que el canvas ofrece.
¿Cómo funciona este efecto?
El truco reside en combinar el movimiento básico de las partículas con una fórmula de repulsión que varía según la distancia al puntero del mouse. Cada partícula tiene propiedades como posición, velocidad, dirección y resistencia (simulada mediante fricción) que suavizan su movimiento. Además, el color de cada partícula se genera de manera aleatoria, añadiendo un toque visual atractivo y diverso.
Desglose del Código
Veamos cómo está estructurado el código para lograr este efecto, para eso lo primero que necesitas es un típico archivo html que le vamos ir sumando estas líneas:
1- Configuración del Canvas: El elemento <canvas> cubre toda la ventana del navegador, proporcionando un lienzo negro que contrasta con las partículas de colores vivos.
<canvas id="particleCanvas"></canvas>
2- Estilos Básicos: Se eliminan los márgenes y se desactiva el desplazamiento para asegurar que el canvas ocupe toda la pantalla. El fondo negro resalta las partículas coloridas. Los estilos para el caso del ejemplo los colocamos sobre el mismo html (<head><style>/*here!*/</style></head>) a pesar que siempre es recomendable que tengas tu hoja de estilo separada *.css a la estructura html.
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
touch-action: none;
}3- Inicialización de las Partículas: Se define una clase Particle que representa cada partícula con propiedades de posición, velocidad y color. El método update actualiza la posición de la partícula, draw la dibuja en el canvas, y repel aplica una fuerza de repulsión cuando el cursor se acerca.
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * maxSpeed;
this.vy = (Math.random() - 0.5) * maxSpeed;
this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
}
update() { /* ... */ }
draw() { /* ... */ }
repel(x, y) { /* ... */ }
}4 – Animación y Repulsión: La función animate se ejecuta en bucle, actualizando y dibujando cada partícula. Si el puntero está activo, se aplica la repulsión basada en la posición del cursor.
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
if (isPointerActive) {
particle.repel(pointerX, pointerY);
}
});
/* ... */
requestAnimationFrame(animate);
}5 – Manejo de Eventos: Se añaden eventos para manejar la interacción del usuario con el mouse y el touch, actualizando las coordenadas del puntero y activando o desactivando la repulsión.
canvas.addEventListener('mousemove', (event) => { /* ... */ });
canvas.addEventListener('mouseleave', handlePointerEnd);
canvas.addEventListener('touchmove', (event) => { /* ... */ });
/* ... */¿Por qué me apasionan estos experimentos?
Más allá de su estética atractiva, estos proyectos permiten explorar cómo las interacciones simples pueden enriquecer la experiencia del usuario en una página web. Elementos visuales interactivos no solo captan la atención, sino que también generan una conexión emocional, lo cual es invaluable en el diseño de productos digitales.
Aplicaciones Prácticas
Este tipo de efecto puede implementarse en diversas áreas, tales como:
- Fondos de Páginas Web: Añade dinamismo y modernidad a la interfaz de tu sitio.
- Landing Pages: Captura la atención de los visitantes desde el primer instante.
- Presentaciones y Portafolios: Ofrece una experiencia interactiva que destaca tu trabajo.
Conclusión
Este es solo el comienzo de lo que se puede lograr con <canvas> y un poco de JavaScript. Me encanta seguir compartiendo estos pequeños experimentos y continuar explorando el mundo de la creatividad visual.
la verdadera magia reside en los detalles que transforman la tecnología en una experiencia visual cautivadora.
Te dejo como se ve y el código Fuente Completo
