DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
05-11-2015

Siguiendo con los experimentos con HTML, Canvas y JavaScript, hoy les traigo un pequeño experimento que permite crear un punto luminoso con JavaScript y Canvas.

A lo largo del tiempo hemos visto varios experimentos empleando JavaScript y Canvas, además de la inmensa cantidad de recursos que existen en Internet que emplean el Canvas y JavaScript como tecnologías fundamentales:

Creando un punto luminoso (JavaScript)

Sin perder tiempo les presento la totalidad del JavaScript que iremos analizando poco a poco en la siguiente sección:

            var _w = 800;
            var _h = 400;
            var circle;

            var c = document.getElementById('canv');
            var $ = c.getContext('2d');
            $.fillRect(0, 0, c.width, c.height);

            var set = function () {
                circle = new Circle(100, 100, 15);
                point();
            }

            var point = function () {

                var id = $.getImageData(0, 0, _w, _h);
                var pxl = id.data;
                for (var x = 0; x 

Como podrás imaginar, el HTML es extremadamente simple y consta únicamente de un elemento canvas.

Analizando el JavaScript anterior

Primero declaramos unas variables, entre ellas la que permite acceder al elemento canvas y su contexto para poder manipularlo:

            var _w = 800;
            var _h = 400;
            var circle;

            var c = document.getElementById('canv');
            var $ = c.getContext('2d');
            $.fillRect(0, 0, c.width, c.height);

También creamos una función de expresión circle la cual especifica la posición (X y Y) y las dimensiones del círculo:

    var Circle = function (_x, _y, _dim) {
        this.cx = _x;
        this.cy = _y;
        this.dim = _dim;
    };

La función de expresión simplemente calcula la distancia entre dos puntos:

    var dist = function (x1, y1, x2, y2) {
        var x = x1 - x2;
        var y = y1 - y2;
        return Math.sqrt(x * x + y * y);
    }

El punto central

La función de expresión point es el punto central o corazón de nuestro experimento JavaScript; esta función es la que pinta en el elemento canvas y varía dicho color según la distancia que existe entre cada uno de los puntos (pixeles) que conforman nuestro lienzo o Canvas y el círculo definido a principio del código JavaScript, de esta forma creamos un punto luminoso:

var dens = circle.dim / dist(x, y, circle.cx, circle.cy);
Un detalle interesante el cual es el "truquillo" de este experimento es que mientras más cercanos sean los puntos del Canvas al círculo definido -en un inicio el código- menor será la distancia (obviamente -.-) y por lo tanto el cálculo de la distancia entre dos puntos será más pequeño y la división daría un valor mayor -un color más claro-.
En lo que al cálculo de distancias en una circunferencia, daría puntos con colores iguales o parecidos dando el efecto deseado:
Circunferencias

Variando el color del punto luminoso

Las multiplicaciones por valores constantes sirven para variar el color, pruebas distintos valores y verás cambios de colores.

Calculando la posición a pintar

El cálculo de la variable idx es para recorrer un arreglo de una dimensión a partir de los contadores (x yy) de una matriz, esto se debe a que la función getImageData devuelve un array de una dimensión y no una matriz como podríamos esperar.

Se multiplica por cuatro debido a que hay que agregar los canales RGBA los cuales son 4 y se suman al total de la matriz; si ejecutas el siguiente comando:

id.data.length

Veras que retorna -para nuestro experimento- 1280000; es decir la longitud de la data es calculada como:

AC * LC * TRGBA

En donde:

Que en nuestro experimento viene siendo:

800 * 400 * 4 = 1280000

Pitando en el Canvas el punto luminoso

Finalmente pintamos el color calculado a través de la distancia entre dos puntos para cada canal RGBA:

    pxl[idx] = dens * 70;
    pxl[idx + 1] = (dens * 70);
    pxl[idx + 2] = (dens * 70) * 0.55;
    pxl[idx + 3] = 255;

Y esto es todo; de nuevo les dejo el enlace del experimento original: CodePen: Chronic Fusion.


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

Hover over the cards

Hover over the cards

Árbol arcoíris creciente

Árbol arcoíris creciente

Algunos artículos que te pueden interesar

La API Battery (Batería) en HTML5

La API Battery (Batería) en HTML5

La API de la batería en JavaScript provee información sobre el nivel de carga actual del dispositivo.

Andrés Cruz 17-11-2014

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015

¿Cómo cambiar el contraste de una imagen con HTML5?

¿Cómo cambiar el contraste de una imagen con HTML5?

En este artículo veremos cómo aumentar o reducir el contraste de una imagen con HTML5; además hablaremos un poco de como sería el proceso para aumentar el brillo de una imagen; que es un caso similar.

Andrés Cruz 12-05-2014