Contorno del círculo, cuadrado y triángulo

Instituto Politécnico Nacional

Unidad Profesional Interdisciplinaria de Ingeniería

y Ciencias Sociales y Administrativas

Contorno del círculo, cuadrado y triángulo

Introducción

Una figura geométrica es todo espacio encerrado entre líneas que inician y terminan en un mismo punto, muchos de los objetos que nos rodean están formados dichas figuras, lo cual nos es de mucha utilidad a la hora de desarrollar un trabajo multimedia, brindando así un mayor impacto en la presentación de dicho trabajo, debido a que nos podemos apoyar en estas para crear formas cada vez más complejas y así dar una mejor apariencia a nuestros trabajos, a continuación, mostraremos la importancia de estas y mencionaremos las que son más importantes para nosotros (contorno, Circulo, Cuadrado y Triangulo).

Contorno

Etimología: Procede del latín en el prefijo “con “, que puede traducirse como “todo”, y “tornus”, que es sinónimo de “dado vueltas”.

Definición: Un contorno es una entidad compuesta por todas las entidades de que consta dicha geometría (líneas y arcos). Si el contorno estuviera definido por una o varias splines, ésta o éstas se descompondrían automáticamente en una sucesión de líneas y arcos, con el fin de que dichas splines puedan ser entendidas y mecanizadas por los diferentes controles numéricos.

El punto de comienzo del contorno será el punto donde se comience a cortar la pieza, por tanto es muy importante la decisión de localización del punto inicial del contorno.

El contorno es un objeto gráfico, que se forma cuando el trazo de una línea comienza y acaba en el mismo punto.

En cualquier contorno podemos apreciar que delimita dos zonas:

• La zona acotada: El contorno y el interior.
• La zona infinita: El fondo

La línea base de un contorno define su complejidad, sus características y propiedades.

Los contornos más básicos son el cuadrado, el círculo y el triángulo.

Los contornos mixtos: son aquellos que están formados por varios tipos de contornos. Y mediante estas combinaciones de contornos se puede crear cualquier forma imaginable.

Cada una de estas formas tendrá unas características que dependerán del color que posea, el lugar en el que se encuentren, su orientación, el tamaño, el espesor de su trazo etc.

Este tipo de contornos mixtos son muy utilizados en las webs, ya que las dotan de variedad visual y a la hora del diseño rompiendo las monótonas formas puras rectangulares y consiguen definir de forma efectiva distintos espacios de información.

Los contornos, al ser curvos tienen un inconveniente que ya habíamos comentado con anterioridad en otro artículo, que es la limitación que poseen algunos lenguajes de programación para representar curvas o figuras circulares como el lenguaje HTML que nos ofrece formas cuadradas o rectangulares, así pues, la implementación de éstas líneas curvas debe hacerse por medio de imágenes.

Existe otra forma de incluir tramos curvos en las webs que no sea por medio de imágenes y es mediante un fichero de Flash swf, que al tratar estas curvas como gráficos vectoriales les aporta una gran definición, aunque este método también tiene un inconveniente que es la actualización de los textos, ya que debemos acceder al fichero fla para hacerlo.

Contorno orgánico: Es aquél contorno que está formado por curvas libres.x

Los contornos orgánicos son los más abundantes y podemos encontrarlos por todas partes en la naturaleza y sugieren fluidez, desarrollo, humanidad etc. Y puesto que se encuentran constantemente en la naturaleza, también son constantemente utilizados en el dibujo y la pintura, ya que conforman la base para pintar figuras humanas, paisajes etc.

Por motivos técnicos son muy difíciles de incluir en las webs este tipo de contornos, ya que deben incluirse como imágenes, y además porque este tipo de contornos puede no adaptarse bien por su aspecto visual, al orden natural de una web con sus formas rectangulares etc. Podríamos plantearnos como solución para incluir los contornos orgánicos en una web la posibilidad de adaptarlos lo más posible a un contorno mixto, transformando las curvas libres en curvas de Bézier, trozos de circunferencia, líneas rectas etc.

Detección de contornos

Dado que los contornos caracterizan los límites de un objeto, un primer paso suele ser la extracción de contornos.

Un contorno se caracteriza por presentar una transición de claro a oscuro o viceversa. Por lo tanto, se pueden detectar calculando el gradiente de la imagen en dos direcciones ortogonales.

Los operadores gradiente más comunes son los operadores de Roberts y Sobel.

Una plantilla detecta contornos horizontales, y la otra verticales, obteniéndose dos imágenes de gradientes.

Para decidir si en un pixel determinado hay un contorno o no, se define un umbral a partir del cual se considera la existencia de contorno:

La imagen de contornos Ic (x, y) se puede formar a partir de:

La Circunferencia

La circunferencia es un contorno continuamente curvado, cuyos puntos están todos a la misma distancia de un punto central, llamado centro del círculo. La distancia constante de cualquier punto de la circunferencia se denomina radio

La circunferencia representa el área que contiene en su interior, denominada círculo, la forma más enigmática de todas, considerada perfecta por nuestros antepasados. Su direccionalidad es la curva, asociada al movimiento, al encuadramiento, a la repetición y al calor.

Contornos derivados de la circunferencia son el óvalo y el ovoide, con cualidades parecidas a las de esta, pero que expresan aún más inestabilidad y dinamismo, aunque el movimiento perfecto sea una cualidad propia de la circunferencia.

La proyección tridimensional de la circunferencia es la esfera, el cuerpo geométrico más perfecto, el que contiene un mayor volumen en un menor espacio, el que define la forma tanto de los átomos como de los cuerpos celestes. La circunferencia y el círculo son tal vez los elementos geométricos más perfectos y estables, aunque cargados de una gran carga dinámica.

Elementos de un círculo

Las formas circulares son muy difíciles de representar en una página web, ya que todos los elementos que nos facilita el lenguaje HTML son rectangulares, aunque aparenten no serlo. Además, las formas curvas se visualizan muy mal en los monitores, debido a la interpretación gráfica mediante pixeles, que origina efectos de escalado indeseables. 

Otro inconveniente de usar círculos en el diseño web deriva precisamente de ser la forma que contiene más área en el menor perímetro, ya que la mayoría de las veces al diseñador le interesa precisamente lo contrario, reducir al mínimo el área y maximizar al máximo el perímetro.

Tal vez la única forma de incluir una forma circular completa en una página sea incluyéndola en una imagen. Pero cualquier imagen es de por sí rectangular como objeto HTML, lo que nos obligará a desperdiciar todo el espacio comprendido entre el contorno circular y los bordes de la imagen, apareciendo espacios sin contenido no deseables en la mayoría de los casos. 

Este efecto negativo se puede paliar incluyendo dentro de la imagen la forma circular y los demás objetos que le rodean en la composición y que se encuentran dentro de los límites del rectángulo que define la imagen, pero entonces esos elementos serán estáticos, fijos, sin posibilidad de ser modificados si no es cambiando todo el contenido de la imagen. 

Una mejor solución es incluir la imagen que contiene el contorno circular (o curvo en general) como fondo de la página o de un elemento contenedor de la misma (tabla, celda de tabla, párrafo, capa, etc.), lo que nos permitirá presentar otros objetos HTML ocupando espacios vacíos alrededor de la forma circular. 

Formas más sutiles y efectivas de incluir curvas en una página pueden ser recortando imágenes en forma de óvalo o círculo, e incluso simulando caminos curvos mediante elementos textuales o gráficos dispuestos en sucesión.

Cuadrado

El cuadrado es la figura geométrica formada por cuatro líneas rectas de igual longitud que forman ángulos perfectamente rectos en los puntos de unión entre ellas. El cuadrado es una figura muy estable y de carácter permanente, asociada a conceptos como estabilidad, permanencia, honestidad, rectitud, limpieza, esmero y equilibrio.

El cuadrado expresa direccionalidad horizontal y vertical, referencia primaria con respecto al equilibrio y el bienestar. Invita a mirar su centro y pasear la mirada en espiral en torno a ese punto.

Rectángulo

La figura derivada del cuadrado por modificación de sus lados es el rectángulo, de propiedades análogas al cuadrado, aunque sugiere menos perfección y estabilidad.

Los rectángulos horizontales aportan solidez y estabilidad. Cuando son de gran tamaño permiten que la mirada del espectador se pasee de un lado a otro, en sentido horizontal.

Los rectángulos verticales dan la sensación de menos solidez, es menos estable. En ellos, la mirada del espectador puede moverse verticalmente, dando sensación de elevación, y es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.

Los rectángulos son las formas más naturales para un ordenador, ya que el monitor y las ventanas de los sistemas operativos gráficos son todas rectángulos horizontales. Una página web posee una forma claramente rectangular, definida por la ventana del navegador. Además, los elementos web (tablas, capas, animaciones Flash, applets de Java, etc.) son de forma rectangular.

Esto hace que los rectángulos sean especialmente adecuados para su uso en las páginas web, proporcionando equilibrio y estabilidad a las mismas.

Sin embargo, es conveniente seguir una serie de pautas a la hora de usar rectángulos:

• Cada rectángulo debe estar alineado con los demás objetos de la página que le rodean.
• El tamaño del rectángulo debe ser mayor que el contenido con espaciados convenientes por los cuatro lados.
• No usar en las tablas bordes por defecto, es decir, grises y con efectos de relieve.
• Si se usan para separar lógicamente registros, es mejor asignarles un borde fino (sobre 1 píxel) de un color que contraste suficientemente con el borde, pero que no resulte llamativo en exceso.
• Si se desea situar en la página varios rectángulos de funcionalidad análoga (caso de elementos de un menú de navegación, por ejemplo), es preferible posicionarlos en series horizontales, ya que se percibirán más como una línea que como un conjunto rectangular.

La dureza visual de los rectángulos se puede suavizar añadiéndoles otros elementos que los modifiquen en parte. Un ejemplo de esto son las tablas o botones con esquinas redondeadas, que rompen la monotonía de la forma rectangular.

Otra forma de compensar la rigidez de las formas rectangulares es combinarlas en la composición con formas curvas que aporten libertad y dinamismo.

Características de cuadrados y rectángulos

Los cuadrados y rectángulos verán modificadas sus cualidades visuales según su:

• Forma
• Tamaño
• Color del contorno y área interna
• Ubicación

La proyección tridimensional del cuadrado es el hexaedro o cubo, cuerpo geométrico muy asociado a las obras propias del ser humano, como los edificios.

El triángulo

Es la línea con dos grados. Esta figura geométrica representa un camino que ofrece soporte estructural tanta para el diseño de una obra o edificio. En el diseño, el triángulo extiende su utilidad a la dirección por su aspecto visual que conduce la mirada puesta en otra cosa. Apunta a algo como una flecha. Utilizar el triángulo puede representar cualidades inspiradoras o una forma de trascender como una metáfora.

El triángulo equilátero es una figura de tres lados cuyos ángulos son iguales. Es también una figura estable, con tres puntos de apoyo (uno en cada vértice) aunque no tan estático como el cuadrado. Su direccionalidad es la diagonal. Puede tener un fuerte sentido de verticalidad siempre que lo representemos por la base. Se le asocian significados de acción, conflicto y tensión.

Dependiendo de cómo coloquemos ciertas figuras podremos tener una sensación u otra, por ejemplo: el triángulo y el cuadrado si lo representamos apoyado en uno de sus ángulos tendremos las sensaciones contrarias: inestabilidad y dinamismo.

SIGNIFICADO: Se trata de una figura que según su colocación puede tener diferentes significados.

• Triángulo apuntando hacia la derecha: Crecimiento continuo.
• Triángulo apuntando hacia arriba: Crecimiento exponencial.
• Triángulo apuntando hacia abajo: Caída rápida y grave.
• Triángulo apuntando hacia la izquierda: Retroceso continuo.

En Señalética: Los triángulos (incluyendo otras figuras que simulan triángulos) pueden sustituir a las flechas para representar Señales DIRECCIONALES.

Adicionalmente pueden funcionar como señales PREVENTIVAS, como el caso de "Ceda el paso"

Ejemplos reales

Por toda la ciudad podemos observar diferentes monumentos los cuales son creados apartir de figuras geometricas un claro ejemplo de estas le la siguiente escultura que se encuentra ubicada sobre el entronque de periferico sur y avenida de los insurgentes.

Las  siguientes imágenes se tomaron de una página llamada catalogo diseño visibilidad creativa “www.catalogodiseno.com” donde encontramos una enorme cantidad de obras de arte talladas en madera teniendo como base principal  las figuras geométricas “circulo, cuadrado, triangulo y circunferencia” podemos observar que al combinar varias de estas logramos dar vida a un sinfín de imágenes nuevas lo único que puede limitar la creación de estas es solo el alcance de nuestra imaginación.

No solo podemos observar obras de arte, también encontramos juegos, los cuales involucran estas figuras un claro ejemplo de estas son:

Tangram

Juego de origen chino formado por siete piezas poligonales, generalmente de madera, con las que deben formarse figuras sin superponerlas.

El avioncito

Es un juego endémico de México y está conformado por figuras geométricas enumeradas del 1-10  

   

Conclusión general:

En este informe explicamos la importancia y significado del uso de los contornos para el diseño multimedia.

Un contorno no solo puede generar figuras geométricas, si no puede crear imágenes más complejas y a su vez la delimitación de las mismas.

       Gracias a los contornos podemos construir formas tales como circulo, cuadrado y triángulo, las que a su vez, generará formas más complejas que permiten una mayor abstracción visual, dinamismo y variedad de formas presentes.

Las figuras pueden contener significado a partir de la interpretación según como se use, en la transmisión del mensaje que se quiere dar.

Cibergrafía

Producción de Artes Gráficas. (2012). PSICOLOGÍA DE LA FORMA. 26 de agosto de 2016, de Weebly Sitio web: http://senaletica.weebly.com/psicologiacutea-de-la-forma.html

Luca. (2011). Líneas y Contornos. 27 de agosto de 2016, de Designals Sitio web: http://www.designals.net/2011/03/de-lineas-y-de-contornos/

Círculo

Nicida Malca. (2014). Fundamentos de Diseño Gráfico - Formas Básicas. 27 de agosto de 2016, de Scribd Sitio web: https://es.scribd.com/doc/7449561/Fundamentos-de-Diseno-Grafico-Formas-Basicas

Karen Castañeda. (2011). Punto, Línea, Contorno, Color, Dirección, Escala, Dimensión, Tono y Textura.. 27 de agosto de 2016, de SlideShare Sitio web: http://es.slideshare.net/karencastaneda1/punto-lnea-contorno-color-direccin-escala-dimensin-tono-y-textura

Imagen

Juan Luis R. Pons . (2013). Juegos chilangos de ayer y hoy: Avioncito. 26 de agosto de 2016, de Chilango Sitio web: http://www.chilango.com/con-ninos/nota/2013/07/02/juegos-de-ayer-y-hoy-avioncito

Contorno

Juan Ignacio Rodríguez Navarro. (2008). El Contorno, Contorno Mixto y Contorno Orgánico. 27 de agosto de 2016, de Desarrollo Multimedia Sitio web: http://www.desarrollomultimedia.es/articulos/el-contorno-el-contorno-mixto-y-contorno-organico.html

Bibliografía:

Marcos Faúndez Zanuy. (2000). Tratamiento digital de voz e imagen y aplicación a la multimedia. España: Marcombo.