Hola, en este rapido tutorial, vamos a crear un fondo animado con canvas para crear particulas animadas con javascript. Ademas, le agregaremos lineas que conectan las particulas unas con otras segun la distancia entres ellas.
Como crear una pagina HTML5
Para comenzar vamos a crear la base de la pagina la cual va a constar de un canvas y un script que permitira que las particulas sean animadas con javascript. Tambien vamos a agregar un poquito de estilo a todo. Debajo les dejo la base para crear una pagina.
Para crear una página web en HTML5, sigue estos pasos:
1. Lo primero es tener en tu PC un editor de texto como Sublime Text, Visual Studio Code o Atom.
2. Luego de tener el editor, abre el editor (en mi caso Visual Studio Code ), crea un nuevo archivo y guárdalo con la extensión «.html».
3. Empieza tu documento HTML con ‘<!DOCTYPE html>‘ para indicar que es un documento HTML5. En los editores actuales, con solo escribir «html» podras tener todo el contenido creado de un golpe, sin necesidad de continuar con los otros pasos. Pero si asi lo deseas, puedes continuar.
4. Luego, añade las etiquetas ‘<html></html>‘ para envolver todo el contenido de la página.
5. Dentro de las etiquetas ‘<html>‘, agrega las etiquetas ‘<head></head>‘ y ‘<body></body>‘.
6. En la sección ‘<head>‘, incluye metadatos como el título de la página usando la etiqueta ‘<title></title>‘.
7. También puedes enlazar archivos CSS externos utilizando la etiqueta ‘<link rel="stylesheet" href="styles.css">‘ dentro del ‘<head>‘. Pero en nuestro caso utilizaremos la etiqueta ‘<style></style>‘ y dentro incluiremos el estilo que vamos a utilizar.
8. En el cuerpo de la página (‘<body>‘), empieza a agregar contenido utilizando etiquetas como ‘<h1>, <p>, <img>, <a>, etc.’ según lo que quieras mostrar en tu página. En nuestro caso y como podran ver en el codigo debajo, vamos a agregar la etiqueta ‘<canvas>‘ y la etiqueta ‘<script>‘.
9. Guarda los cambios y abre tu archivo HTML en un navegador para ver cómo se ve tu página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//aqui va el estilo
</style>
</head>
<body>
<canvas id="neuralCanvas"></canvas>
<script>
/** Aqui incluiremos el script para animar las particulas */
</script>
</body>
</html>Subscribete ahora para recibir las ultimas entradas.
Como agregar estilo al canvas
Ahora vamos a agregarle estilo al canvas y a todo el cuerpo(<body>) para que la animacion de fondo ocupe todo el espacio de la ventana. Para esto, dentro de las etiquetas <style></style> comenzaremos agregando el codigo que dejo abajo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{ margin:0; overflow: hidden; background-color: #222;position: relative;height: 100%;}
canvas{display:block;}
</style>
</head>
...
</body>
</html>Comenzar con en javascript
Lo primero que vamos a hacer es declarar las variables.
const canvas = document.getElementById('neuralCanvas'),
ctx = canvas.getContext('2d'),
circles = [];
let mouseX = 0, mouseY = 0, balls = 75;La funcion init(), es la primera funcion que vamos a crear y es la que estara encargada de todo el proceso de animacion. Dentro vamos a popular los circulos usando un for loop, definir el tamaño del canvas, agregar el evento que permite a los circulos seguir el mouse, y llamar a la funcion para animar los circulos.
function init(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
for (let i = 0; i< balls; i++){
circles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: 5,
color: '#ffffff',
velocity: {
x: (Math.random() - 0.5) * 1.2,
y: (Math.random() - 0.5) * 1.2
}
});
}
canvas.addEventListener('mousemove', (ev)=>{
mouseX = ev.clientX;
mouseY = ev.clientY;
});
animate();
}Al final de la funcion anterior, estaremos llamando a la funcion animate(). esta funcion se va a encargar de calcular la posicion de cada circulo y animarlo su movimiento. Ademas, dentro estaremos llamando tres funciones que explicaremos mas abajo; una para dibujar los circulos, una que permitira conectar cada circulo usando una linea y al final haremos un requestAnimationFrame() para llamar a la propia funcion animate().
function animate(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
circles.forEach(circle =>{
circle.x += circle.velocity.x;
circle.y += circle.velocity.y;
//rebotar en las paredes
if(circle.x - circle.radius < 0 || circle.x + circle.radius > canvas.width){
circle.velocity.x *= -1;
}
if(circle.y - circle.radius < 0 || circle.y + circle.radius > canvas.height){
circle.velocity.y *= -1;
}
//mouse
const dx = mouseX - circle.x;
const dy = mouseY - circle.y;
const distToCursor = Math.sqrt(dx * dx + dy * dy);
const speed = 0.1;
circle.x += (dx /distToCursor) * speed;
circle.y += (dy / distToCursor) * speed;
drawCircle(circle.x, circle.y, circle.radius, circle.color);
});
//conectar los circulos
connectCircles();
requestAnimationFrame(animate);
}Lo siguiente sera crear la funcion que permitira dibujar los circulos.
//dibujar los circulos
function drawCircle(x, y, radius, color){
ctx.beginPath();
ctx.arc(x,y,radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}En esta funcion, vamos a implementar un for loop para conectar los circulos usando una linea dependiendo de la distancia que exista entre un circulo y otro. Presta atencion a que vamos a estar usando el opbjeto Math para estar ejecutando tareas matematicas para obtener la distancia entre los circulos. Luego utilizaremos el resultado agregadoa una variable para poder dibujar las lineas de coneccion entre los circulos.
//conectar los circulos
function connectCircles(){
for(let i = 0; i < circles.length; i++){
for(let j = i+1; j < circles.length; j++){
const distance = Math.sqrt(
Math.pow(circles[i].x - circles[j].x, 2) + Math.pow(circles[i].y - circles[j].y, 2)
);
if(distance < 100){
ctx.beginPath();
ctx.moveTo(circles[i].x, circles[i].y);
ctx.lineTo(circles[j].x, circles[j].y);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 0.5;
ctx.stroke();
ctx.closePath();
}
}
}
}Al final de este script, vamos a crear un addEvenListener para actualizar el tamaño de la ventana, sin que se pierdan la cantidad de circulos animados. O sea, eso evita que al reducir o ampliar la ventana del navegador, los circulos se pierdan fuera de pantalla o se limiten a quedarse en un espacio limitado del canvas inicial. Luego, al final vamos a llamar la funcion init() para iniciar la animacion.
window.addEventListener('resize', () =>{
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
init();Con esto ya tenemos todo terminado. Espero les guste esta animacion, comenten y nos vemos en la proxima.