logo-antoiba

Antonio Ibáñez Programming

Crear un Point Mesh Animation dinámico con HTML5 y canvas

CSS3 HTML HTML5 JavaScript jQuery Canvas

Vamos a crear con Canvas, una herramienta de HTML5 muy potente, una animación donde se crean puntos que se mueven aleatoriamente y se unen por líneas cuando llegan a una determinada distancia entre sí. Y si el ratón está cerca de los puntos.

Puedes acceder al jsfiddle en el siguiente link.

1. HTML

Para empezar debemos preparar el código html.



<canvas id="canvas"></canvas>
<div id="text">
<h1>FLASH</h1>
</div>

Es bastante simple, pero no se necesita nada más.

2. CSS

Ahora vamos con el CSS. Le damos un color al fondo, el que prefieras. Y a "canvas" le damos una posición absoluta y un top y left de 0.



body {
background: rgba(215, 44, 44, 0.7);
margin: 0rem;
min-height: 100vh;
font-family: Futura, sans-serif;
}
#canvas, #text {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1;
}
#text {
min-height: 100vh;
width: 100vw;
z-index: 1;
color: #fff;
text-transform: uppercase;
font-size: 8vmin;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#text h1 {
opacity: 0.9
}

3. JS

Lo mejor para que el código quede correcto y se cargue cuando el árbol DOM esté listo envolvemos en la sentencia de jQuery $(document).ready o para abreviar $(function() {}.

Para asegurar que el elemento "canvas" siempre tenga la altura y anchura de la pantalla, pondremos el código para que se aplique cada vez que se modifique el tamaño de la pantalla.



var resizeReset = function() {
w = canvasBody.width = window.innerWidth;
h = canvasBody.height = window.innerHeight;
}

3.1 CREANDO LOS PUNTOS

Para crear los puntos se utiliza un objeto que tiene una serie de propiedades por defecto.



const opts = { particleColor: "rgb(200,200,200)", lineColor: "rgb(200,200,200)", particleAmount: 40, defaultSpeed: 1, variantSpeed: 1, defaultRadius: 2, variantRadius: 2, linkRadius: 200, }

La variante para speed y radius se usan para dar aleatoridad al tamaño y movimiento de los puntos. Luego linkRadius es como de cerca deben de estar los puntos antes de que unan por líneas.

El elemento "canvas" se debe de redimensionar al cambiar el tamaño de la pantalla para que las partículas siempre choquen con el borde de la ventana. La función "resizeReset()" se carga una vez cargado.



let delay = 200, tid;

window.addEventListener("resize", function(){
deBouncer();

});

let deBouncer = function() {

clearTimeout(tid);

tid = setTimeout(function() {

resizeReset();

}, delay);

};

El objeto "Particle" es una función que genera cada uno de los puntos.



Particle = function(xPos, yPos){
this.x = Math.random() * w;
this.y = Math.random() * h;
this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed;
this.directionAngle = Math.floor(Math.random() * 360);
this.color = opts.particleColor;
this.radius = opts.defaultRadius + Math.random() * opts. variantRadius;
this.vector = { x: Math.cos(this.directionAngle) * this.speed, y: Math.sin(this.directionAngle) * this.speed };
this.update = function(){ this.border(); this.x += this.vector.x; this.y += this.vector.y;
};

this.border = function(){
if (this.x >= w || this.x <= 0) {
this.vector.x *= -1;
}
if (this.y >= h || this.y <= 0) {
this.vector.y *= -1;
}
if (this.x > w) this.x = w;
if (this.y > h) this.y = h;
if (this.x < 0) this.x = 0;
if (this.y < 0) this.y = 0;
};
this.draw = function(){
drawArea.beginPath();
drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2);
drawArea.closePath();
drawArea.fillStyle = this.color; drawArea.fill();
};

Para empezar a mover todo se necesita crear un bucle:



function setup(){
particles = [];
for (let i = 0; i < opts.particleAmount; i++){
particles.push( new Particle() );
}
window.requestAnimationFrame(loop);
}

Este artículo es una adaptación del código de thenewcode.com en el siguiente link.

Yo he añadido unas líneas para que las líneas aparezcan por donde pasas el ratón. Ponemos la posición actual iniciada a un número negativo muy alto, para que los puntos no aparezcan iluminados, yo he puesto -1000.

Luego creamos un evento asociado a cuando se mueve el ratón e igualamos la posición actual a por donde pase el ratón.



currentPosX = -1000;
currentPosY = -1000;
$('body').mousemove(function( event ) {
currentPosX = event.pageX;
currentPosY = event.pageY;
});

La función donde se crean las líneas he añadido una sentencia en el if. También he añadido la variable "distFromXY" que mide donde está el ratón en ese momento.



let linkPoints = function(point1, hubs){
for (let i = 0; i < hubs.length; i++) {
let distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y);
let distFromXY = checkDistance(point1.x, point1.y, currentPosX, currentPosY);
let opacity = 1 - distance / opts.linkRadius;
let opacityX = 1 - distFromXY / opts.linkRadius;
if (opacity > 0 && opacityX > 0) {
drawArea.lineWidth = 0.5;
drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
drawArea.beginPath();
drawArea.moveTo(point1.x, point1.y);
drawArea.lineTo(hubs[i].x, hubs[i].y);
drawArea.closePath();
drawArea.stroke();
}
}
}

Y listo, ya se crearán las líneas solo cuando la distancia entre puntos sea lo suficientemente grande y por donde pasemos el ratón.

Para que funcione el código poniéndolo en un archivo externo, debemos encerrar el código que está en el jsfiddle entre la función de document ready de jQuery.



$(function() {

};


Escribe un comentario

Anterior Menu Dropdown con jQuery y CSS responsive

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies