David Gómez i Fontanills 2003 | dgomezf@uoc.edu | revisió "Producción y tratamiento de gráficos por ordenador I"

Módulo 1: Percepción visual

 

 

etapa 5: Percepción y composición visual

 

apartado: Esqueleto visual de la imagen [ABREUJAT: "Esqueleto visual img."]

El tema del esqueleto estructural nos introduce al concepto de composición visual. Nuestro campo visual determina lo que vemos. Los ejes principales para estructurarlo son el vertical y el horizontal que tienen que ver con nuestra forma de estar en el mundo. Cualquier conjunto visual tiene perceptivamente su propio esqueleto. Algunos objetos y/o formas que contienen otras las aíslan en parte del resto actuando como marcos. Su esqueleto estructural y las fuerzas creadas por los elementos visuales crean el esqueleto visual de la imagen. El análisis del esqueleto visual de una imagen puede ser un método útil para descubrir las relaciones de equilibrio, las direcciones y otras fuerzas perceptuales que actúan en ella. A continuación se muestran tres ejemplos de ello.

*****imatge recurs:m3e3_rec11.swf

INSTRUCCIONS PRODUCCIÓ:

Atenció: no consta res de drets ©. Està tot correcte?

peu de foto (atenció: seleccionable):

Análisis visual realizado por Rudolf Arnheim (ARNHEIM 2001) sobre:
"La Source" (1856) de
Dominique Ingres

*****

 

*****imatge recurs:m3e3_rec12.swf

INSTRUCCIONS PRODUCCIÓ:

Atenció: no consta res de drets ©. Està tot correcte? VEGAP?

peu de foto (atenció: seleccionable):

Análisis visual sobre:
"Chaim Soutine" (1917) de Amadeo Modigliani

*****

 

*****imatge recurs:NOVA, anàlisi estrucutral d'una web

peu de foto:

utilitzar:

estructuraweb1.png i estructuraweb2.png

peu de foto (atenció: seleccionable i link actiu):

Análisis visual sobre:
www.enterpulse.com

*****

 

Las relaciones entre las formas de los elementos, su posición en el espacio y su color configuran una estructura de la imagen dominada por fuerzas perceptuales y relaciones de equilibrio y desequilibrio.

apartado: Fuerzas perceptuales

subapartado: Campo visual y marco de imagen [ABREUJAT: "Campo visual y marco..."]

IMATGE INTERACTIVA (cap noia segueix el cursor amb la mirada)

*****imatge recurs: m4e1_rec3.dcr

INSTRUCCIONS PER A PRODUCCIÓ:

Aquesta és una imatge interactiva divertida que dóna un toc simpàtic als materials. Crec que s'ha de mantenir tal qual. En tot cas només s'ha de treure del material en la versió impresa ja que allà no té cap funció.

Una suggerència és que es passi a format SWF (ara està en DCR) per unificar formats. Això no hauria de ser difícil. En tot cas mantenir sempre la funcionalitat (segueix el cursor amb la mirada, gira el cap quan aquest està a un extrem i quan es posa sobre els ulls mira guenyo i parpalleja).

peu de foto: no en té

*****

El campo visual humano es una forma ovalada de unos 170º en su horizontal y unos 150º en su vertical, donde sólo la zona central se ve nítida. Nuestra percepción no desenfocada de la realidad responde al movimiento del ojo y a la composición que se hace nuestro cerebro de la información recibida. Si realmente fijáramos la vista en un punto y la dejáramos quieta, el resto lo veríamos desenfocado.

*****imatge recurs: m4e1_rec4.swf (camps visuals)

INSTRUCCIONS PER A PRODUCCIÓ:

Està molt bé tal qual. En tot cas hauríem de comentar com presentar-ho en la versió impresa dels materials.

peu de foto (que ha de ser seleccionable per l'usuari): Los campos visuales de cada ojo humano y el campo binocular en su intersección según James J.Gibson. Podéis ocultar cualquiera de los dos campos usando los botones.

*****

Además, nuestro cuello puede girar casi 180º. Lo que unido al movimiento del ojo y al campo visual nos permite tener una visión nítida de unos 240º y percibir los rasgos básicos de las formas, colores y movimientos en casi 360º. No hace falta decir que podemos mover nuestro cuerpo y darnos la vuelta o agacharnos con gran rapidez.

Todo lo que recibe y procesa nuestro sistema perceptivo lo interpreta la conciencia obteniendo conocimiento visual de nuestro entorno. Para ello, a menudo aplica sus propias leyes, como la aplicación de ejes sobre las formas, la división o agrupamiento de las partes, etc. La percepción visual se manifiesta en el cerebro a partir de la información recogida del entorno por los ojos, pero no como un registro fiel y mecánico de ésta. Nuestro cerebro está preparado para encontrar (o inventar) regularidades que nos sirvan para comprender y recordar (con el objetivo primigenio de sobrevivir).

A pesar de que nuestro campo visual es ovalado, la mayoría de creaciones gráficas que hacemos y observamos están realizadas dentro de un marco. Es especialmente así en los gráficos creados para sistemas multimedia que serán visualizados dentro del marco rectangular de la panalla y a su vez dentro del marco de una ventana de sistema o del navegador.

subapartado: Campo de fuerzas

Hasta en las composiciones más simples nuestro sistema perceptivo crea fuerzas perceptuales que parecen atraer o repeler los elementos visuales entre sí y respecto al marco. "Es virtualmente imposible percibir unidades aisladas y no afectadas por el contexto donde se encuentran. La relación es inevitable y ello provoca que el acto de la visión sea una experiencia dinámica" (SAUSMAREZ 1983). Las fuerzas visuales no son fuerzas físicas que actúan entre los objetos que vemos. Pero, como ellas, tienen una dirección, un punto de aplicación y una intensidad. Son fuerzas que se dan en la experiencia visual del espectador; creadas por la interacción entre elementos visuales en el proceso de percepción. En la siguiente demostración intentamos hacer visibles algunas de éstas fuerzas, los "puntos de atracción" que nuestro sistema perceptivo crea en una composición.

IMATGE INTERACTIVA

***recurs: m3e3_rec2.dcr

instruccions producció:

Aquesta imatge està molt bé. Només tres coses:

- intentar optimitzar la programació per evitar el que a vegades passa: el cercle "s'encalla"

- considerar la possibilitat de refer-la en SWF (ara està en DCR) per tal d'unificar formats. Això sí, sempre que conservi la funcionalitat.

- fer que el text sigui seleccionable per l'usuari.

El peu de foto es manté el que hi ha.

El percepto (el resultado de la percepción) es un campo de fuerzas continuo y variante. Hasta las imágenes que percibimos como "en reposo" son el resultado de fuerzas activas en distintas direcciones que se contrarrestan hasta equilibrarse. Sólo tenemos que cambiar un elemento para poner la imagen en marcha.

IMATGE ESTÀTICA (imatge de l'estrella l'hexagon, el triangle i el quadrat)

*****imatge recurs:m3e3_rec3.gif

instruccions producció: és correcte

peu de foto: [el mateix que als materials però seleccionable]

*****

apartado: Peso visual: equilibrio y tensión [ABREUJAT: "Peso visual"]

subapartado: Aproximación al peso visual [ABREUJAT: "Aproximación"]

A continuación se propone, a modo de aproximación al concepto de equilibrio visual, experimentar las sensaciones de equilibrio o desequilibrio que producen distintas composiciones visuales. El objetivo es extraer de la experiencia orientaciones para la propia creación. Para ello será conveniente contrastar los resultados propios con los de otras personas.

IMATGE INTERACTIVA

****recurs: m3act3_rec1b.swf

Instruccions producció:

Com veieu això era una "actividad de aproximación" que passa a integrar-se dins el discurs general dels materials. Això en principi no afecta massa. En línies generals és molt semblant però, hi ha algunes correccions que cal fer.

L'estudiant ha de poder valorar cadascuna de les composicions de l'1 al 7 i finalment veure el resultat de totes les valoracions que ha donat. Aquest resultat ha de ser un text seleccionable i així el pot copiar i enganxar a un missatge per enviar-lo a l'aula.

Donat que les valoracions les fem amb números hem d'evitar numerar les composicions com ara per no confondre. Per tant tindrem A, B, C, D, E com a agrupament general de composicions (enlloc de 1,2,3,4,5) i subdividirem en Figura A1, Figura A2, Figura B1, Figura B2, Figura C1, etc...

Cada composició tindrà uns botons de radio per valorar. Per exemple:

Figura D1: 1 2 3 4 5 6 7  

A més tindrem un botó de "RESULTADOS" on apretant ens mostrarà els resultats que hem omplert. Per exemple una simulació del que obtindria un estudiant que hagués respost a tot:

Figura A1: 6 Figura A2: 2
Figura B1: 7 Figura B2: 1
Figura C1: 4 Figura C2: 4
Figura D1: 5 Figura D2: 5
Figura E1: 6 Figura E2: 1

Hi haurà d'haver dos peus de foto (que també han de ser seleccionables): un de genèric:

Test de equilibrio visual: Valora en una escala del 1 al 7 las siguientes imágenes según consideres que están en "equilibrio" o que existe "tensión".

I un d'específic per quan surten els RESULTADOS:

Resultados del test: Éstas son tus valoraciones. Si quieres enviarlas al Foro del Aula puedes copiar el texto y pegarlo en un mensaje.

Aquí podria sortir l'icona de "contraste en el aula" (veure propostes)

**

A part d'això hi ha algunes CORRECCIONS GRÀFIQUES A FER:

Actuals Figures 1a i 1b (que passen a ser A1 i A2): tot i ser molt semblants en una s'utilitza un suavitzat (antialiasing) i a l'altra no. Decidir-se per una mateixa solució. Si s'opta pel suavitzat que sigui millor que el que hi ha ara a la Figura 1b, que és una mica cutre. D'altra banda fixeu-vos que a la Figura 1b el triangle de la dreta s'encabalca sobre la línia del marc. Millor que quedi "dins" (com a la Figura 1a).

Actual Figura 2b: Les franges blava i verda surten lleugerament fora del recuadre per sota la línia de la dreta. Ajustar bé.

Actual Figura 3b: el triangle vermell s'encabalca sobre la línia de dalt. Millor que quedi dins, la línia per sobre el triangle.

Actuals Figures 5a i 5b: La línia d'emmarcat és més fina que a les altres. Unificar. Vigilar també que es crea com un espai als límits entre elements de color i línia.


Observese que n
o hay respuestas "correctas" o "incorrectas" a este test. Ésta es una actividad de aproximación sobre percepción visual, donde lo interesante es comparar los resultados con otras personas. Invita a otras personas a realizar el test. Si quieres puedes enviar los resultados al foro del aula y comentarlos allí.

subapartado: Equilibrio y tensión

La necesidad de equilibrio es una de las influencias más fuertes sobre la percepción visual humana. Como primates bípedos que somos, la sensación de equilibrio máximo la tenemos con los dos pies sobre el suelo y en posición vertical. Esta experiencia sobre el equilibrio del propio cuerpo la aplicamos al resto de las cosas, la mayoría de veces (pero no siempre) con éxito. Intuimos un determinado peso para los objetos (a partir de su volumen, textura,…) y a partir de éste y de su orientación en el espacio los percibimos como equilibrados o no equilibrados.

Imponemos a las cosas vistas un eje vertical con un referente secundario horizontal. La sensación de equilibrio o desequilibrio viene dada por la relación entre estos ejes. A continuación se puede visualizar como un círculo (físicamente no estable) se equilibra perceptivamente por la imposición de los ejes vertical y horizontal. También se puede apreciar que cuando el radio de la circunferencia no coincide con el eje vertical la imagen se percibe en tensión, no equilibrada.

*****IMATGE INTERACTIVA

imatge recurs:m3e3_rec3.swf

INSTRUCCIONS PRODUCCIÓ:

Aquesta aplicació està bé tal com està. Només que té un petit "bug":

Quan estem en "equilibrio/mostrar ejes" si apreten "desequilibrio" enlloc d'anar a aquest anem al de "equilibrio" sense eixos (com si apretessim "ocultar ejes"). En canvi des de "desequilibrio/mostrar ejes" això funciona bé (anem a "equilibrio" apretant el botó corresponent).

ATENCIÓ: la versió dels materials impresos està malament. Els eixos no els té bé. Basar-se en com estan a la versió digital.

peu de foto: [el mateix que als materials però seleccionable per l'usuari]

*****

Inconscientemente desplazamos este eje vertical dominante en función del punto de equilibrio percibido. Podemos ver un ejemplo de ello en la demostración siguiente con distintos elementos visuales.

*****IMATGE INTERACTIVA

recurs: imatge recurs:m3e3_rec4.swf

peu de foto: [treure el peu (queda integrat en el text)]

*****

El peso relativo de un elemento visual en la composición depende de su tamaño, color, textura y posición en el espacio respecto al resto de elementos. A continuación se puede ver como tanto en el cuadro de Jackson Pollock como en un estampado contínuo, el peso de los elementos visuales es equivalente en toda la composición, se distribuye por igual. Son imágenes que están en equilibrio por su homogenidad.

*****IMATGE ESTÀTICA

****imatge recurs:m3e3_rec5.jpg

peu de foto: [deixa de tenir-ne, treure'l i deixar només indicació de drets ©]

*****

El tirón hacia el suelo de la fuerza de la gravedad también tiene una fuerte influencia en nuestra percepción visual. Percibimos como más equilibradas las imágenes con más peso visual en la base que en la parte superior y "vemos" como más larga una distancia si está en la parte superior de la imagen que la misma distancia en la parte inferior.

*****IMATGE INTERACTIVA

**imatge recurs:m3e3_rec7.swf

peu de foto: el mateix que ara però seleccionable per l'usuari

*****

La misma imagen invertida se percibe de forma completamente distinta. La primera es una imagen equilibrada en la que el peso se acumula en la base, la segunda es una imagen en desequilibrio con todo el peso en la parte superior.

En la creación gráfica y en las artes visuales tanto el equilibrio como la tensión pueden ser un objetivo del creador en función del efecto buscado. Respecto a la búsqueda del equilibrio escrive Rudolf Arnheim: "¿Por qué buscan los artistas el equilibrio? (…) al estabilizar las interrelaciones existentes entre las diversas fuerzas de un sistema visual, el artista resta ambigüedad a su enunciado" (ARNHEIM 2001). Por el contrario Donis A. Dondis escrive en relación al uso intensionado de la tensión en la creación visual: "Tanto para el emisor como para el receptor de la información visual, la falta de equilibrio y regularidad es un factor desorientador. En otras palabras, es el medio más eficaz para crear un efecto en respuesta al propósito del mensaje, efecto que tiene un potencial económico directo en la transmisión de información visual" (DONDIS 1998).

apartado: Flecha visual: dirección

***IMATGE INTERACTIVA:

**imatge recurs: m3e3_rec8.swf tal com està al material imprés

peu de foto:[no n'hi ha]

*****

 

IMATGE INTERACTIVA:

*****imatge recurs: m3e3_rec9.swf

peu de foto:[el mateix que als materials]

*****

La imagen del violín en posición vertical es simétrica. ¿La imagen del violín apaisado no? Sí, también. Pero detectamos mejor la simetría bilateral de un objeto si el eje de simetría coincide con el eje vertical. "El hombre y el animal son seres lo suficientemente bilaterales como para tener dificultad a la hora de distinguir la derecha de la izquierda" (ARNHEIM 2001). A pesar de ello no se percibe igual un cuadro que su imagen especular, como se ha visto con la pintura de Miguel Ángel.

De esta constatación se puede deducir que hay fuerzas visuales que actúan en el eje horizontal influyendo en nuestra percepción de la imagen. El uso de herramientas o el orden de lectura desde la aparición de la escritura pueden haber influido al respecto.

CC-Ejemplos aplicados
Localització: al costat del darrer paràgraf ("De esta constatación...")
Text en página:
"Equilibrio inestable" P.Klee
Text alt:
Obra: "Equilibrio inestable" de Paul Klee
Títol en finestra flotant:
>> Contenido complementario: ejemplo aplicado

"Equilibrio inestable". Paul Klee. 1922
Contingut en finestra flotant:

IMATGE ESTÀTICA:

**RECURS m3e3_rec10.gif

peu de foto: el mateix però seleccionable per l'usuari

En la cultura occidental prevalece el sentido de izquierda a derecha. Parece que hay un "movimiento natural" hacia el lado derecho inferior de la imagen. Los elementos compositivos pueden actuar contrarrestando esta tendencia para conseguir el equilibrio. En este terreno no podemos universalizar, porque es un hecho fuertemente sujeto a variables culturales y que puede ser distinto para personas zurdas y diestras.