Wiki JavaScript

Welcome to the Particulas wiki!

JavaScript

window.human = false; // Configura una variable global llamada 'human' a falso.

var canvasEl = document.querySelector('.fireworks'); // Selecciona el elemento HTML con la clase 'fireworks' y lo almacena en la variable 'canvasEl'. var ctx = canvasEl.getContext('2d'); // Obtiene el contexto de dibujo 2D del elemento canvas seleccionado y lo almacena en la variable 'ctx'. var numberOfParticules = 30; // Establece la cantidad de partículas que se crearán cuando se haga clic en la pantalla. var pointerX = 0; // Establece la posición horizontal del puntero del mouse/táctil en la pantalla en 0. var pointerY = 0; // Establece la posición vertical del puntero del mouse/táctil en la pantalla en 0. var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'; // Establece el tipo de evento que se activará cuando se haga clic en la pantalla (usando 'touchstart' para dispositivos táctiles y 'mousedown' para dispositivos de escritorio). var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']; // Crea un array con colores que se utilizarán para las partículas.

function setCanvasSize() { // Esta función ajusta el tamaño del canvas a la ventana del navegador y también escala el canvas en caso de que la resolución de pantalla sea mayor a 1. canvasEl.width = window.innerWidth * 2; canvasEl.height = window.innerHeight * 2; canvasEl.style.width = window.innerWidth + 'px'; canvasEl.style.height = window.innerHeight + 'px'; canvasEl.getContext('2d').scale(2, 2); }

function updateCoords(e) { // Esta función actualiza las coordenadas del puntero del mouse/táctil en la pantalla cada vez que se mueve. pointerX = e.clientX || e.touches[0].clientX; pointerY = e.clientY || e.touches[0].clientY; }

function setParticuleDirection(p) { // Esta función establece la dirección en la que se moverán las partículas. var angle = anime.random(0, 360) * Math.PI / 180; // Selecciona un ángulo al azar entre 0 y 360 grados y lo convierte a radianes. var value = anime.random(50, 180); // Selecciona una distancia al azar entre 50 y 180. var radius = [-1, 1][anime.random(0, 1)] * value; // Selecciona una dirección al azar (-1 o 1) y la multiplica por la distancia seleccionada anteriormente. return { x: p.x + radius * Math.cos(angle), // Calcula la posición horizontal de la partícula en función de su posición actual, la distancia y el ángulo seleccionados. y: p.y + radius * Math.sin(angle) // Calcula la posición vertical de la partícula en función de su posición actual, la distancia y el ángulo seleccionados. } }

function createParticule(x, y) { // Esta función crea una nueva partícula con una posición x e y especificadas. var p = {}; p.x = x; p.y = y;

La siguiente línea de código establece un color aleatorio para la partícula, seleccionado de la matriz de colores.

p.color = colors[anime.random(0, colors.length - 1)];

La siguiente línea de código establece el radio de la partícula, que se elige aleatoriamente dentro del rango de 16 a 32.

p.radius = anime.random(16, 32);

La siguiente línea de código establece la posición final de la partícula, utilizando la función setParticuleDirection, que establece una dirección aleatoria y una distancia para la partícula.

p.endPos = setParticuleDirection(p);

La siguiente línea de código establece la función draw() para la partícula, que se utiliza para dibujar la partícula en el lienzo.

p.draw = function () { ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); ctx.fillStyle = p.color; ctx.fill(); }

Finalmente, la función devuelve el objeto de partícula creado.

return p;