Diseño y Construcción Gráfica de Logo DocIRS
Grafo con Funciones Analíticas

José Enrique González Cornejo
Enero 2017



El logo de DocIRS que se muestra en la parte superior de la página es la imagen corporativa de la compañía, y está íntegramente graficado con códigos vectoriales. En el presente artículo lo utilizaremos de referencia describiendo sus propiedades matemáticas y construcción

El logotipo de DocIRS es un grafo conexo de 11 puntos. (Ver artículo "El Logo de DocIRS es un grafo, específicamente un árbol") y es lo que la representa la empresa, dado que su quehacer es unir puntos, a través de las más diversas relaciones tecnológicas y de gestión de calidad.

Un grafo conexo, no requiere que tenga una forma geométrica determinada, pues basta que estén los puntos o nodos conectados por líneas.(Ver "Propiedades Geométricas Cualitativas"). En efecto, desde el punto de la Teoría de Grafos, las cualidades métricas de un grafo o de la disposición de sus puntos no los hace diferentes, si su estructura es la misma. (Ver Algebra de Lie Mn(K) - Aplicaciones ~ Formalización)

Nótese que el grafo-árbol que representa el logo de DocIRS tiene un punto de grado 8, ocho puntos de grado 1 y dos puntos de grado 2, donde el grado de un punto o nodo es el número de líneas que inciden en él. (Ver Frank Harary, "Graph Theory", USA Addison-Wesley 1969). Es decir, desde el punto de vista de la Teoría de Grafos, el logotipo coorporativo tiene múltiples representaciones, por ejemplo los grafos G1 y G2 que se muestran en las siguientes imágenes. En efecto, ellos son equivalentes o isomorfos, porque ambos cumplen con está misma conformación.


Ahora, a fin de representar el diseño gráfico del logo de DocIRS de una forma estructurada y estética, se optó por simetrías en subgrafo tipo estrella de 8 puntos separados por ángulos modulo pi/4 y un cola de dos puntos. La idea poder generarlo mediante un algoritmo en base a códigos (HTML, DOM Javascript, SVG, CSS ) y no necesariamente construirlo con una aplicación de imágenes en formatos como GIF, JPG, PNG,..Sino determinarlo por medio de funciones, para lo cual se aplicó geometría analítica, utilizando SGV (Scalable Vector Graphics) y CSS(Cascading Style Sheets) para insertar el nombre en texto.

Por tanto, para configurar el boceto del logo de la empresa, inicialmente se localizaron en un plano cartesiano los 8 puntos, de tal manera que cada uno de ellos responde a la ecuación de la circunferencia de la forma:

(x - x1)2 + (y - y1)2 = r2,

donde (x1,y1) es el centro y radio r.

El punto central (x1,y1) es parte del boceto de grafo, y en forma externa, los otros dos puntos que se prolongan desde el diámetro central en el sentido de la abscisa. Todos los puntos se localizan equidastantes en una distancia r. Sobre la parte superior se localizó el nombre de fantasía de la empresa DocIRS, con las cordenadas correspondientes. (Cuando se incorpora el nombre de la empresa separadamente, se debería hablar de imagotipo6)

 

Bosquejo en el Plano Cartesiando
Localización Puntos
Construido con HTML y DOM Javascript
Animación Gif Logo DocIRS

Javascript Funciones que Generan Gráfica del Logo de DocIRS
Uso de SVG (Scalable Vector Graphics)
<script type="text/javascript">
var numero_nodos=8
var coord_x=new Array()
var coord_y=new Array()
var coordenadas=""
 
  function determina_coordenadas(){
origen_x= 90
origen_y = 90
r=50
for (var i=1;i<=numero_nodos;i++ )
{
angulo=2*i*Math.PI/(numero_nodos)

if(angulo>0 && angulo<=Math.PI)

{
x=origen_x + r*Math.cos(angulo)
y= origen_y + Math.sqrt(r*r-(x-origen_x)*(x-origen_x))

}
else
{
x=origen_x - r*Math.cos(angulo)
y= origen_y-Math.sqrt(r*r-(x-origen_x)*(x-origen_x))

}

coord_x[i]=parseInt(x)
coord_y[i]=parseInt(y)

coord_x[numero_nodos]=parseInt(origen_x+r)
coord_y[numero_nodos]=parseInt(origen_y)

coord_x[0]=parseInt(origen_x)
coord_y[0]=parseInt(origen_y)

coord_x[numero_nodos+1]=parseInt(origen_x+2*r)
coord_y[numero_nodos+1]=parseInt(origen_y)

coord_x[numero_nodos+2]=parseInt(origen_x+3*r)
coord_y[numero_nodos+2]=parseInt(origen_y)
} }
            function dibuja_grafo() {
document.write("<?xml version='1.0' standalone='no'?>")
document.write("<svg width='" + (300) + "px' height='" + (150) + "px' version='1.1' xmlns='http://www.w3.org/2000/svg'>")

document.write("<path d='M10 10'/>")

document.write(" <!-- Points -->")


for (var i=0;i<=numero_nodos+2;i++ )
{

document.write("<circle cx='" + coord_x[i] + "' cy='" + coord_y[i] + "' r='3' fill='navy'/>")

}


for (var i=1;i<=numero_nodos;i++ )
{
var linea="<line x1='" + coord_x[0] + "' y1='" + coord_y[0] + "' x2='"+ coord_x[i] + "' y2='"+ coord_y[i] + "' style='stroke:navy;stroke-width:0.5' />"
document.write(linea)
}

document.write("<line x1='" + coord_x[8] + "' y1='" + coord_y[8] + "' x2='"+ coord_x[9] + "' y2='"+ coord_y[9] + "' style='stroke:navy;stroke-width:0.5' />")
document.write("<line x1='" + coord_x[9] + "' y1='" + coord_y[9] + "' x2='"+ coord_x[10] + "' y2='"+ coord_y[10] + "' style='stroke:navy;stroke-width:0.5' />")


document.write("</svg>")

}


determina_coordenadas()
dibuja_grafo()

</script>