Idea

La idea del proyecto es hacer un motor que se encargue de crear imágenes a partir de un Array de diccionarios con anidamiento que contiene las formas, gráficos, bloques y grupos que dan en sí la imagen final. Las imágenes se refrescarán cada X tiempo según configuración o según rendimiento del equipo o navegador donde se esté ejecutando. Con ello facilitará a nivel de proceso iteraciones y dinamismos con la imagen final, que será lo que vea el usuario, haciendo que con una simple variación de uno o más valores dentro del Array de diccionarios se permita visualizar este cambio, permitiendo con ello, movimientos y cualquier otro tipo de interactuación con el entorno.

El motor constará de un gestor de formas, objetos, etc. Unos serán por defecto y otros pueden ser añadidos por el usuario, de esta forma permitimos un sistema simplificado de formas y objetos, así como conjuntos que se repiten y así poder hacer reciclaje de objetos y elementos sin que el usuario tenga que hacer un sistema en esprofeso para ello. También constará de los eventos que permitan no solo interactuar al programador o a los elementos entre sí, sino también a los usuarios que consuman el producto final.

Todo ello se moverá en JSON con Arrays que contengan diccionarios u objetos. Los Arrays pueden tener anidados Arrays para hacer capas o bloques, y los objetos pueden tener hijos, por lo general es el atributo "childs". El orden de las capas se otorga al orden en que se encuentren en los Arrays, siendo los índices más bajos los que estén al fondo y los que tengan el índica más alto los que estén más al frente.

También ha de mencionarse el posicionamiento, que en el plano principal constará de 9 posiciones de inicio por el hecho de que estamos hablando de un entorno dinámico que muy posiblemente no tenga un tamaño preestablecido y que se adapte a la pantalla, variando si ésta varía, no siendo igual empezar a dibujar desde el centro que desde un lado u otro. Las posiciones se basan en el teclado numérico de un teclado normal de PC de 105 teclas, con los valores del 1 al 9. Es importante destacar que esto es para empezar el dibujado, a partir de ahí, todo se iniciará en el punto 0x0 desde el objeto, es decir, si un objeto se pone en la posición 3x5, el punto 0x0 de un elemento hijo será el punto 3x5 del padre, y si se anida otro objeto en el hijo, siendo el nieto del objeto maestro sería la suma de la posición del hijo y la del padre, y así sucesivamente. Por lo que hay que tener especial cuidado en las anidaciones, incluso la rotación y el efecto Alpha se heredan. Todo ello no impide que se pueda trabajar desde el objeto base y anidar con simples Array, lo que sería realmente agrupar, como sucede en el juego XGravity.

Las iteracciones humanas con el entorno se harán a partir de eventos sobre el objeto HTML CANVAS, por lo que ha de estar disponible cara el usuario sin que halla elementos por delante, si se monta un objeto por delante, éste impedirá que se interactúe con el objeto HTML CANVAS en la parte que éste ocupe. Los eventos recogen posición por lo que se pueden hacer rangos y analizar si se encuentra en una posición concreta o no, como por ejemplo, para hacer botones o interactuar como Shooter contra objetos en pantalla.

Finalmente, nos encontramos ante un entorno gráfico que intenta representar lo mismo en cualquier proporción y resolución, aunque halla recortes en los lados o extremos superiores e inferiores, así como variación de calidad por resolución. Para ello se basa en un entorno cuadrado que se conforma con un lado equivalente al lado más estrecho, es decir, si estamos en un entorno visual horizontal, el cuadrado se adaptará a la altura del mismo; mientras que si es un entorno vertical se adaptará al ancho, de esta forma, simplemente ha de extenderse la imagen o el procesado fuera del rango cuadrado, permitiendo que la parte importante, que es el cuadrado que centra la imagen sea completo. Con respecto a la resolución se utiliza un sistema de celdas que indica los puntos que tiene el dibujo (No confundir los puntos de dibujado que son áreas con un número X de píxeles con los propios píxels), lo que permite que en cualquier resolución salga el mismo dibujo puesto que el dibujo ocupará Y celdas o cuadrados de dibujo; y cada celda ocupará X píxeles de dibujo.

Con todo esto, se entiende que la idea es hacer un sistema muy ágil de interpretación del esquema de dibujo (Arrays y diccionarios), lo que daría lugar a que la complejidad de proceso sea el número de partículas (Imágenes, formas, etc.) y no los dinamismos ni las interactuaciones humanas sobre el entorno.

Iniciando

Kanvas no es más que una pequeña librería ECMAScript 2015 totalmente autosuficiente, por lo que sólo requiere de la implementación en HTML de dicha librería para poder ser iniciada. Para ello podemos hacer uso de cualquiera de las direcciones puestas al principio del manual (/es/#Kanvas). El siguiente ejemplo HTML muestra la creación de un Kanvas vacío que ocupa todo el marco HTML del navegador.

                    

                    

                        
                        Language
                        html
                    
                
                    

                        
                        Lines
                        37
                    
                
                    

                        
                        Characters
                        1121
                    
                
                    
                        

                        
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>Kanvas - Test</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta charset="utf-8" />

        <style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">

            html,body{
                height : 100%;
                margin : 0px;
            }

            body{overflow : hidden;}

            .kanvas{
                position : absolute;
                top : 0px;
                left : 0px;
                width : 100%;
                height : 100%;
            }

        </style>

        <script data-type="text/javascript" data-language="ECMAScript 2015" src="/Kanvas.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>

        <script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">

            kanvas = new Kanvas();

        </script>

    </head>
    <body></body>
</html>
                    
                

Como podemos ver en el ejemplo, que el propio Kanvas es una clase objeto con la cual creamos un objeto el cual será el objeto que gestiona todo lo que se verá en este manual. Cada instancia Kanvas gestionará un único Kanvas en el GUI, permitiendo poder hacer uso de más de un elemento al mismo tiempo dentro del entorno HTML.

Configuración

Al ser una simple librería no contamos con archivos externos de configuración por lo que si queremos hacer uso de ésta o cambiar los parámetros por defecto de la misma, hemos de hacer a partir del propio constructor, a partir de meterle al constructor, como primer parámetro, un diccionario con los parámetros que queremos alterar.

NOTA: Por defecto, si se deja vacío, se usará la configuración por defecto; si se le mete un valor String se entenderá como el nombre de la instancia dentro de JavaScript para poder ser referenciada en los eventos; y si es un diccionario, éste representará cada uno de los parámetros que queramos alterar o incluso añadir, para hacer uso de éstos, por ejemplo, para nuevos componentes que se le agreguen al Kanvas o para hacer uso de forma externa al mismo usando el sistema de gestión de parámetros de configuración del propio Kanvas. Para agregar más parámetros simplemente hemos de escribirlos con un valor y listo.

IMPORTANTE: Cuidado a la hora de agregar nuevos parámetros pues si se agrega uno que ya existe, al existente se le cambiará el valor, pudiendo dar resultados inesperados.

IMPORTANTE: Si el nombre del objeto no se corresponde con el real, los eventos sobre éste no funcionarán y se puede correr el riesgo de que los eventos tiren contra otro objeto no esperado.

Un ejemplo de como gestionar los parámetros puede ser lo siguiente:

                    

                    

                        
                        Language
                        js
                    
                
                    

                        
                        Lines
                        20
                    
                
                    

                        
                        Characters
                        606
                    
                
                    
                        

                        
// Objeto Kanvas con los valores de configuración por defecto.
kanvas = new Kanvas();

// Objeto Kanvas con cambio de nombre del objeto.
kanvas2 = new Kanvas("kanvas2");

// Múltiples objetos Kanvas por diccionario.
objetos_kanvas = {
    prueba_1 : new Kanvas("objetos_kanvas.prueba_1"),
    prueba_2 : new Kanvas("objetos_kanvas.prueba_2"),
    prueba_3 : new Kanvas("objetos_kanvas.prueba_3"),
    prueba_n : new Kanvas("objetos_kanvas.prueba_n")
};

// Objeto Kanvas con los FPS alterados.
kanvas_slow = new Kanvas({
    object_name : "kanvas_slow",
    frames_per_second : 12
});

                    
                

Los parámetros de configuración que tiene Kanvas por defecto internamente son los siguientes:

quality

Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad global del objeto HTML CANVAS. Su valor por defecto es 1.

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        1
                    
                
                    

                        
                        Characters
                        23
                    
                
                    
                        
\text{quality} = (0, 1]
                    
                

quality_x

Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad en el eje X del objeto HTML CANVAS. Su valor por defecto es 1.

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        1
                    
                
                    

                        
                        Characters
                        25
                    
                
                    
                        
\text{quality_x} = (0, 1]
                    
                

NOTA: Se aconseja dejar dicho valor en 1 por la posibilidad de dar una visualización no deseada, así como posicionamientos inesperados.

quality_y

Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad en el eje Y del objeto HTML CANVAS. Su valor por defecto es 1.

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        1
                    
                
                    

                        
                        Characters
                        25
                    
                
                    
                        
\text{quality_y} = (0, 1]
                    
                

NOTA: Se aconseja dejar dicho valor en 1 por la posibilidad de dar una visualización no deseada, así como posicionamientos inesperados.

cells

Valor decimal mayor que 0 que representa el número de celdas en que se divide el lado más estrecho del objeto HTML CANVAS (El lienzo donde se plasmarán los gráficos 2D). Este valor es orientativo para permitir dar posicionamientos absolutos a los objetos que se metan dentro del CANVAS, similar al sistema de DPI en Android. Su valor por defecto es 100.

origin

Valor entero positivo comprendido entre 1 y 9, ambos inclusive, que representa el punto 0 (Eje X 0 y eje Y 0) u origen del cual se empieza a contar positivo o negativo. Este valor representa la posición de origen según el teclado numérico, siendo los siguientes:

1. Esquina inferior izquierda.
2. Inferior centro.
3. Esquina inferior derecha.
4. Medio izquierda.
5. Centro del lienzo.
6. Medio derecha.
7. Esquina superior izquierda.
8. Superior centro.
9. Esquina superior derecha.

Su valor por defecto es 5.

frames_per_second

Valor decimal mayor que 0 que representa los fotogramas por segundo, es decir, la tasa de refresco por segundo, o la cantidad de imágenes o vistas a procesar cada segundo. Por defecto es 60.

IMPORTANTE: La tasa de fotogramas puede bajar según la capacidad del equipo y los recursos que consuma el procesado del mapeado del Kanvas.

NOTA: Los fotogramas no los dará exacto puede excederse en el caso de los Webkit cosa de 3 o 4 FPS.

ratio

Valor decimal igual o superior a 0 que representa el ratio o relación de aspecto del CANVAS (Lienzo). Dicho valor puede ser también un valor equivalente a 0 con tipado diferente como puede ser null, false, "", etc. Los cuales representan que cogerá el ratio por defecto que tenga el marco donde se instala el GUI del objeto Kanvas. Su valor por defecto es null.

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        1
                    
                
                    

                        
                        Characters
                        15
                    
                
                    
                        
r = \frac{x}{y}
                    
                

NOTA: Para facilitar la visualización del ratio se puede hacer uso de una pequeña división donde el numerador sea el ancho y el denominador sea el alto, o un un valor decimal que represente el resultado de dividir el ancho entre el alto. Se entiende con un ratio de pantalla vertical a un valor superior a 1; una pantalla cuadrada un 1; y una pantalla horizontal cuando es inferior a 1.

NOTA: El ratio no impedirá que el CANVAS intente coger el máximo área posible del marco HTML donde se encuentre, simplemente que en el lado donde sobre, éste se centrará automáticamente.

overwrite

Valor booleano que verifica si donde se llame a dicho parámetro, algún o algunos elementos puedan ser sobreescritos si se da la ocasión. Por defecto es false.

Dicho valor es usado para cuando se intenta agregar elementos nuevos a la configuración entre otros posibles casos de este tipo.

position

Posición HTML donde instalar el objeto Kanvas, es decir, el DIV con sus contenido CANVAS y cachés. Dicho valor puede ser un objeto ya cargado propiamente dicho o bien, un selector CSS en formato String. Su valor por defecto es el selector CSS "body" para ser cargado directamente sobre el BODY.

autostart

Valor Booleano que verifica si se autoinicia (true) o se hace un inicio manual (false). Por defecto su valor es true. Para hacer el inicio manual ha de llamarse a la función "start", por ejemplo:

                    

                    

                        
                        Language
                        js
                    
                
                    

                        
                        Lines
                        14
                    
                
                    

                        
                        Characters
                        367
                    
                
                    
                        

                        
// Objeto Kanvas autoiniciado.
kanvas_autoiniciado = new Kanvas({
    object_name : "kanvas_autoiniciado",
    autostart : true
});

// Objeto Kanvas no autoiniciado.
kanvas_manual = new Kanvas({
    object_name : "kanvas_manual",
    autostart : false
});
// Para iniciar el objeto Kanvas manualmente hemos de hacer tal que así:
kanvas_manual.start();

                    
                

object_name

Valor String que representa el nombre del objeto. Por defecto es "kanvas", sin embargo, si éste no es el nombre del objeto ha de darse en el constructor del objeto, ya sea mandando como primera parámetro un String con el nombre de la instancia o bien, en el diccionario de entrada, una llave con este nombre con el valor del nombre de la instancia.

Este parámetro es fundamental para que los eventos ataquen al objeto Kanvas en cuestión.

IMPORTANTE: Si está errado el nombre del objeto éste no funcionará correctamente, incluso pudiendo atacar a otros objetos Kanvas por cruce de nombres, por ejemplo, usando siempre el valor por defecto del mismo.

class

Valor String que representa la clase o clases HTML para identificar, por ejemplo, desde JavaScript o CSS. Por defecto es "kanvas".

IMPORTANTE: Es importante que si se altera la clase, ésta contenga, entre otras clases opcionales a decisión del desarrollador, la clase kanvas.

application

Valor String que representa el nombre de la aplicación. Por defecto su valor es Kanvas, pero puede ser alterado sin consecuencia alguna, simplemente, el atributo del objeto Kanvas HTML raíz "data-application" pasará a ser dicho valor.

x

Valor decimal que representa el valor del eje X de cualquier elemento por defecto. Por defecto, dicho valor es 0.

NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la configuración.

y

Valor decimal que representa el valor del eje Y de cualquier elemento por defecto. Por defecto, dicho valor es 0.

NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la configuración.

width

Valor decimal que representa el valor del ancho de cualquier elemento por defecto. Por defecto, dicho valor es 0.

NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la configuración.

height

Valor decimal que representa el valor del alto de cualquier elemento por defecto. Por defecto, dicho valor es 0.

NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la configuración.

Calidad

Como ya se dijo anteriormente, Kanvas se basa en la etiqueta HTML CANVAS, a la cual se le puede establecer un parámetro de codificación de la imagen a mostrar y pocos parámetros referidos a la calidad más. Un punto importante para este tipo de trabajos es la resolución pues a mayor resolución más puntos por refresco ha de procesarse, y por lo tanto, también da un aumento significativo del rendimiento, sin embargo, CANVAS no tiene ningún atributo que gestione esto a excepción de WIDTH y HEIGHT, atributos que establecen los píxeles de ancho y alto consecutivamente, que no tienen porqué coincidir con el ancho y alto real de la imagen, la cual puede ser alterada mediante CSS, sin ir más lejos, para adaptarse a la pantalla, por lo tanto, la resolución en sí no es dinámica, sino fija, cuando dicho tamaño puede ser dinámico. Para ello se pensó en 4 atributos los cuales son:

• quality: Calidad global del CANVAS.
• quality_x: Calidad en el eje X.
• quality_y: Calidad en el eje Y.
• cells: Número de celdas en el lado más estrecho.

Estos atributos representan la calidad porcentual comprendida en el rango (0,1] para representar la resolución real dinámica del elemento CANVAS y por tanto, tener la misma relación de calidad ante la posibilidad de cambiar de tamaño o aspecto (Proporción). Para poder conseguir ésto, Kanvas trabaja por detrás adaptando las posiciones y medidas a éstos valores, quedando las siguientes fórmulas:

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        4
                    
                
                    

                        
                        Characters
                        80
                    
                
                    
                        
\displaylines{
    f_x = x \cdot q \cdot qx \\
    f_y = y \cdot q \cdot qy
}
                    
                

Por lo tanto, si tenemos una pantalla FullHD y el marco HTML está a pantalla completa, la calidad global está al 80%, la calidad del eje X está al 90% y del eje Y al 100% tendríamos el siguiente resultado:

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        4
                    
                
                    

                        
                        Characters
                        293
                    
                
                    
                        
\displaylines{
    W_{ancho} = x \cdot q \cdot qx = 1920 \cdot \frac{80}{100}  \cdot \frac{90}{100} = 1920 \cdot 0.8 \cdot 0.9 = 1920 \cdot 0.72 = 1382.4 \\
    H_{alto} = y \cdot q \cdot qy = 1080 \cdot \frac{80}{100} \cdot \frac{100}{100} = 1080 \cdot 0.8 \cdot 1 = 1080 \cdot 0.8 = 864
}
                    
                

IMPORTANTE: No se aconseja la modificación de los parámetros de configuración quality_x ni quality_y por poder alterar de forma inesperada la respuesta a ciertas operaciones, posiciones, o matices, así como variar el régimen de calidad de forma abrupta.

El resultado de estas operaciones se pondrán como atributo WIDTH y HEIGHT del elemento HTML CANVAS, lo que aumentará o disminiurá la calidad de la imagen, y por tanto, menor o mayor consumo de recursos, así como a la inversa en rendimiento.

IMPORTANTE: Los valores quality, quality_x y quality_y son valores que no deberían de ser nunca mayores que 1 (El 100%) por el hecho de lo aquí mostrado, que sería la resolución real a la que trabajar, lo mismo que tampoco puede ser cero o menor pues supondría una calidad absurda o imposible.

Todo esto permite hacer una relación de calidad con resolución variable tanto en el tamaño como relación de aspecto del marco HTML donde se encuentre el elemento CANVAS, así como poder gestionar a nivel de código cambios en la calidad sin detener la vista ejecutada, ahora bien, también nos deja ver que no hay ahora un concepto de posición fijo y que éste depende plenamente de calidad, para ello se usará una relación de tamaño al número de celdas en el lado más estrecho del marco HTML a partir del atributo cells, de esta forma, si queremos posicionar un objeto dentro del campo de visión del Kanvas, a partir del resultado anterior, tendríamos la siguiente formulación:

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        7
                    
                
                    

                        
                        Characters
                        164
                    
                
                    
                        
\displaylines{
    p_x = \frac{x \cdot q \cdot qx}{c} \\
    p_y = \frac{y \cdot q \cdot qy}{c} \\
    \\
    p_x = \frac{f_x}{c} \\
    p_y = \frac{f_y}{c}
}
                    
                

Continuando con el ejemplo anterior, si ponemos que queremos 20 celdas y que queremos un punto el cual esté en el 5 del eje X y en el 7 del eje Y tenemos:

NOTA: Cogemos del ejemplo anterior, para determinar el tamaño real de la celda el eje Y por ser más pequeño que el eje X.

                    

                    

                        
                        Language
                        maths
                    
                
                    

                        
                        Lines
                        6
                    
                
                    

                        
                        Characters
                        196
                    
                
                    
                        
\displaylines{
    {tc} = \frac{f_y}{c} = \frac{864}{20} = 43.2 \text{(Tamaño celda)} \\
    \\
    i_x = X \cdot {tc} = 5 \cdot 43.2 = 216 \\
    i_y = Y \cdot {tc} = 7 \cdot 43.2 = 302.4
}
                    
                

De esta forma podemos mover un objeto a partir de las celdas, entendiendo que se puede mover a un fragmento de una celda concreta con valores absolutos al lienzo y no a la resolución. Dicha idea imita los DPI de una pantalla Android por ejemplo, que hace una equivalencia de puntos, pero aquí también se ignora el tamaño, quedando para cualquier monitor, resolución, etc. Exactamente igual.

Objetivos

Aquí aparecerán reflejadas todas las tareas acerca de las tareas que hay que llevar a cabo en el Kanvas.

• Crear logo.
• Documentar Kanvas.
  • Repasar funcionalidad.
• Generar ejemplos para la documentación del Kanvas.
• Generar Delta Time Constant.
• Deslimitar los FPS de forma opcional, reduciendo la tasa de refresco de los 4ms por defecto de los Intervals.