DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
10-11-2015

En esta entrada veremos cómo crear un sistema de partículas empleando JavaScript y Canvas como el siguiente:

Creando el sistema de partículas (JavaScript)

Al igual que siempre, primero les presento el código completo del experimento de partículas el cual analizaremos en la siguiente sección:

    var c = document.getElementById("canvas-club");
    var ctx = c.getContext("2d");
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var particles = [];
    var maxParticles = 100;
    var size = 5;
    var r = size / 2;
    var clearColor = "rgba(0, 0, 0, .1)";

    function random(min, max) {
        return (Math.random() * (max - min)) + min;
    }

    function P() {
    }

    P.prototype = {
        init: function () {
            this.x = random(0, (w - size));
            this.y = h + random(0, 20);
            this.vx = 0;
            this.vy = random(-1, -2);
        },
        draw: function () {
            var hue = (h - this.y) * .6;

            ctx.fillStyle = "hsla(" + hue + ", 100%, 50%, .8)";
            ctx.strokeStyle = "hsla(" + hue + ", 100%, 50%, " + this.alpha + ")";
            ctx.lineWidth = r / 2;

            ctx.beginPath();
            ctx.arc(this.x + r, this.y + r, r, 0, 2 * Math.PI, false);
            ctx.fill();

            this.update();
        },
        update: function () {

            this.x += this.vx;
            this.y += this.vy;
            this.vx *= 1.15;
            if (this.y  .5) {
                this.vx = random(-1, 1);
                this.vy -= .05;
            }

            if (this.y + 50 

Analizando el código JavaScript anterior...

Primero quisiera comenzar con algunas consideraciones:

Ahora si veamos en detalle el sencillo código JavaScript.

Variables Globales

En la primera sección son declaradas todas las variables globales; entre las mismas se encuentran aquellas que permiten acceder al Canvas y su contexto, además de las dimensiones del Canvas:

    var c = document.getElementById("canvas-club");
    var ctx = c.getContext("2d");
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;

Las partículas tendrán tamaños, colores y velocidades distintas que son calculadas aleatoriamente (Ramdom), estas características mencionadas son registradas a través de un conjunto de variables; las partículas serán almacenadas en un array en donde una partícula corresponde a una posición del array:

    var p = new P();
    p.init();
    particles.push(p);

La "clase base" de las partículas

Empleamos la propiedad prototype para crear una especie de "clase base" para nuestras partículas y acceder a sus propiedades:

function P() {}

    P.prototype = {
        init: function () {
            this.x = random(0, (w - size));
            this.y = h + random(0, 20);
            this.vx = 0;
            this.vy = random(-1, -2);
        },
        draw: function () {
            var hue = (h - this.y) * .6;

            ctx.fillStyle = "hsla(" + hue + ", 100%, 50%, .8)";
            ctx.strokeStyle = "hsla(" + hue + ", 100%, 50%, " + this.alpha + ")";
            ctx.lineWidth = r / 2;

            ctx.beginPath();
            ctx.arc(this.x + r, this.y + r, r, 0, 2 * Math.PI, false);
            ctx.fill();

            this.update();
        },
        update: function () {

            this.x += this.vx;
            this.y += this.vy;
            this.vx *= 1.15;
            if (this.y  .5) {
                this.vx = random(-1, 1);
                this.vy -= .05;
            }

            if (this.y + 50 

Más información sobre la propiedad prototype en: MDN: Object.prototype.

Como su nombre indica, la función draw pinta los pequeños círculos que son nuestras partículas.

La función update altera el comportamiento de las partículas, cambiando por valores aleatorios (o inicializando la posición una vez que no sean visibles dentro del Canvas) la posición y velocidad de las mismas.

Creando la estructura para todas las partículas

Con la función setTimeout se agregan partículas poco a poco en base a un intervalo de tiempo variante:

    function setup() {

        for (var i = 0; i 

Se van creando, pintando y animando las partículas poco a poco; esto da como resultado que las partículas se van mostrando progresivamente y no todas agrupadas de una vez.

Pintando las partículas (animando)

En esta sección pintamos una partícula por vez y empleamos el método window.requestAnimationFrame que ya fue tratado en una entrega anterior llamada: EL SECRETO DE LAS ANIMACIONES EN JAVASCRIPT (REQUESTANIMATIONFRAME()); recordando un poco el uso de la función Window.requestAnimationFrame(), permite animar figuras dibujadas en un elemento Canvas:

    function anim() {
        ctx.fillStyle = clearColor;
        ctx.fillRect(0, 0, w, h);

        for (var i in particles) {
            var p = particles[i];
            p.draw();
        }
        window.requestAnimationFrame(anim);
    }

Las líneas de código:

    ctx.fillStyle = clearColor;
    ctx.fillRect(0, 0, w, h);

Pintan un rectángulo negro transparente con el objetivo de mostrar una cola a los círculos moviéndose; mientras más claro el color de fondo, más largo será esta cola dejada por las partículas:

Cola Partícula

Si no fuera pintado este fondo negro transparente nuestro experimento quedaría de la siguiente forma:

Partícula sin fondo negro transparente

El resto del código JavaScript es de facil interpretación; de nuevo les dejo el enlace del experimento original: CodePen: Livelines.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014

Dibujando un SeekBar personalizado en Android con Canvas

Dibujando un SeekBar personalizado en Android con Canvas

Se explica cómo crear un sencillo SeekBar mediante la API de Canvas en Android que consiste consiste de una barra lateral (un rectángulo achatado) y una circunferencia que hará la vez de control y es la que manipularemos mediante un clic.

Andrés Cruz 18-07-2017

Funciones declarativas vs Funciones de expresiones en JavaScript

Funciones declarativas vs Funciones de expresiones en JavaScript

El compilador de JavaScript coloca las funciones de declarativas en un ámbito global a todo el programa al contrario de las funciones de expresión que solo corresponde a una sección definida del programa.

Andrés Cruz 25-05-2015