Source: http://graficos.conclase.net/curso/index.php?cap=001
Timestamp: 2020-05-30 16:57:30+00:00

Document:
Curso de Gráficos - Conceptos
Capítulo 1 - Conceptos
Antes de dar paso al curso, se presentarán y se definirán varios términos relacionados con el tema de gráficos.
Sistema visual u ocular. Las imágenes que percibimos son debidas a nuestro sistema visual: ojo, cerebro, y nervio óptico, principalmente. El ojo, que forma parte de este sistema visual, se caracteriza por sus componentes oculares. El iris controla la cantidad de luz que es permitida entrar al ojo. La lente ocular concentra la luz permitida en el ojo para formar una imagen. La proyección de la imagen es situada en la retina - una estructura de dos dimensiones. La retina se compone principalmente de conos y bastoncillos, que son células especiales. Estos conos y bastoncillos tienen la funcionalidad de recibir estímulos de luz para nuestra visión diurna y nocturna, respectivamente. La luz es descompuesta en las intensidades que corresponden a los colores rojo, verde, y azul. Este trío de colores se denomina los colores primarios. A partir de los colores primarios podemos conseguir otros tres colores: cian, amarillo, y magenta, llamados los colores complementarios. Cian, amarillo, y magenta son complementarios a los colores rojo, verde, y azul, respectivamente, ya que combinados formarán el color blanco.
Resolución gráfica. En un sistema gráfico, se representan colores para formar una imagen. Los colores son combinados para formar tonos y otros colores en un área pequeña. Este área es llamada "píxel", que viene del inglés: picture element o elemento pictográfico (o de imagen). Este elemento o píxel es la parte fundamental más pequeña que contiene información para crear una imagen en un sistema gráfico. Un conjunto de píxeles forma una malla para crear una imagen completa. La mayoría de los sistemas gráficos (por no decir todos) usa una malla rectangular con las mismas dimensiones de una superficie rectangular: anchura y altura. La anchura es el número de columnas y la altura, el número de filas de tal superficie gráfica. El número de píxeles en la anchura y en la altura constituyen la resolución (gráfica) de la imagen. Por ejemplo, 640 x 480 significa que la resolución gráfica de la imagen constituye 640 columnas y 480 filas de píxeles formando una malla de 307.200 píxeles. Analizando otro ejemplo: 800 x 600, comprobamos que obtenemos una imagen de 480.000 píxeles. Esta imagen contiene muchos más píxeles y por tanto mayor resolución pictográfica. Con una mayor resolución gráfica se obtiene una mejor calidad de imagen.
Cuando hablamos de mejor resolución gráfica, hablamos de usar un número mayor de líneas de píxeles en la horizontal y vertical. Realmente, lo que está pasando es que cuanto más se junten los píxeles, nos es más difícil distinguir entre uno y otro píxel vecino. Esto es debido en parte a la distancia física entre los conos en nuestra retina y en parte a las condiciones visuales que dependen de nuestro entorno. Esta habilidad de discernir detalles se llama acuidad o agudeza (visual). Nuestra agudeza es menor por el desgaste, al envejecer, y por efectos de nuestro entorno; por ejemplo, al disminuir el contraste y brillo.
La resolución y el concepto de una malla de áreas de colores son análogos a un mosaico. En tal forma de arte, un mosaico intenta representar una imagen a partir de azulejos pequeños de determinados colores y tonos. Cada azulejo intenta aproximarse en color a un área de la imagen, combinando los colores en susodicho área, como refleja la siguiente imagen:
Modelos de colores. En sistemas gráficos, los colores son descompuestos y representados por combinaciones de valores numéricos. Generalmente, se habla de un color diferente para cada combinación de valores. En realidad, se está hablando de tonos diferentes de colores, pero en el argot informático cada tono es tratado como un color diferente. Por ejemplo, si se habla de un sistema gráfico de 15 bits por píxel (bpp) tenemos a nuestra disposición 32.768 colores, aunque en verdad sean unos cuantos colores y varios miles de tonos. De igual forma, podemos manipular 24 bpp obteniendo un conjunto de 16.777.216 colores.
Existen varios modelos de descomposición de colores, especialmente usados en tecnología. Los modelos más populares y usados son RGB, RGBA, CMYK, HLS, e YUV:
RGB. Estas siglas provienen del inglés red, green, y blue; esto es, rojo, verde, y azul, respectivamente. Este trío de colores intenta modelar el sistema visual humano. La mayoría de los monitores y televisores se basan en este modelo, debido a que están basados en la emisión de luz. Este modelo también se le atribuye la propiedad de sistema aditivo, ya que se añaden las intensidades para formar un color.
RGBA. Se trata del mismo modelo RGB, pero con otra propiedad: canal alfa. Este canal se usa como un índice de la transparencia en un píxel. Esto nos sirve a la hora de mezclar varios colores designados para un solo píxel. Este modelo es más reciente y se suele usar para crear efectos y técnicas visuales como el suavizado de imagen (o "anti-aliasing"), niebla, llamas, y objetos semi-transparentes: cristal, agua, vidrieras, etcétera.
CMYK. Las siglas representan, en inglés, cyan, magenta, yellow y black; esto es, cian, magenta, amarillo, y negro, respectivamente. Los tres primeros colores son complementarios a los de RGB. Este modelo se usa más en la imprenta para crear imágenes a partir de tintas de colores. Para obtener un color más vivo, se le añade la tinta negra también. Este modelo tiene la propiedad de sistema sustractivo, ya que se restan las intensidades a la luz. El pigmento se obtiene porque el material absorbe la energía de la luz y por tanto una parte de su espectro. La energía que transmite se percibe como un color determinado. Por ejemplo, nosotros percibimos el color verde, porque tal pigmento absorbe todos los "colores" del espectro de la luz emitida y transmite/refleja el color verde.
HLS. En inglés, las siglas son hue, lightness o luminance, y saturation; esto viene a ser, matiz, brillo, y saturación, respectivamente. Este modelo se basa en lo empírico de nuestra percepción visual. En lugar de usar un modelo tricolor para formar otros colores y tonos, el modelo HLS se basa en tres propiedades que sirven para definir los colores que percibimos. El matiz es el color que solemos denominar: azul, violeta, rojo, dorado, etcétera. El brillo describe la vividez y brillo de un tono de color. La saturación diferencia la percepción de un tono "puro" a otro tono que ha sido mezclado con blanco para formar un tono pastel - suave. Este modelo es usado por artistas, prinicipalmente.
YUV también escrito YCbCr o incluso YPbPr. Este modelo se basa en el modelo RGB, pero restringiendo y descomponiendo algunos valores del RGB. YUV se usa en señales de televisión y en equipos de vídeo y grabación como S-Vídeo, y MPEG-2 y por tanto DVD. Originalmente, la principal razón de usar este modelo fue para mantener compatibilidad con los televisores analógicos en blanco y negro, cuando se introdujeron los televisores en color.
El componente Y es el brillo total. U y V son componentes cromáticos (colores) basados en los componentes rojo y azul del modelo RGB. El proceso comienza con una imagen en blanco y negro (Y). Luego, se obtiene el componente U, mediante una resta entre Y y el componente azul del RGB original, y V mediante una resta entre Y y el componente rojo.
Representación gráfica. Nuestro objetivo como programadores gráficos y como artistas es la representación de nuestra realidad. Debemos aproximarnos a la imagen ideal usando varias técnicas visuales. En definitiva, estamos tratando de engañar a nuestro sistema visual para que nuestra imagen aparente ser real. Dicho de otra forma, tenemos que visualizar una imagen de resolución infinita en un área de resolución limitada. Éste es el concepto principal de la representación gráfica. Todas nuestras técnicas visuales y manipulaciones de una o varias imágenes se basan en presentar una imagen engañando al usuario lo suficientemente como para que la imagen final aparente ser el objeto real. Sin embargo, a veces debemos hacer sacrificios en nuestra "misión" de crear ilusiones. Ya que existen limitaciones según el hardware de nuestro sistema gráfico, es posible que decidamos reducir la resolución por falta de memoria, tiempo de computación, falta de tiempo y recursos, etcétera. Tal filosofía se puede ilustrar por el cuadro de René Magritte, Ceci n'est pas une pipe (1928).
El título, Esto no es una pipa , es cierto, ya que es una representación de una pipa, y no una pipa de verdad.
Modelar. Huelga decir que nuestra herramienta para crear gráficos es al fin y al cabo nuestro ordenador (o computadora). Esto implica que tendremos que trabajar con valores numéricos y por consiguiente deberemos realizar cálculos para conseguir nuestra imagen. Los valores numéricos que usaremos representan vértices, líneas, vectores, vórtices (vértices en tres dimensiones), y demás conceptos matemáticos, al igual que la manipulación de bits para colores, combinación de imágenes, etcétera. Siguiendo la misma lógica de la representación gráfica, debemos representar un objeto usando estos conceptos matemáticos. Este concepto de modelado se basa en la composición de objetos primitivos como vértices y líneas. Por ejemplo,
Si queremos representar un cuadrado, tendremos que guardar información acerca de los vértices y líneas para poder recrear la imagen de un cuadrado. Dibujamos una línea desde un vértice a otro representando un lado de este cuadrado. Luego, dibujamos una segunda línea desde el último vértice a uno nuevo; y así sucesivamente hasta dibujar los cuatro lados del cuadrado. Acabamos de definir, en términos de objetos primitivos, el modelo de un cuadrado. Del mismo modo, podemos definir las características de un cubo: un conjunto de 8 vértices, 4 aristas, y 6 caras o planos. Con esta información, podemos crear una imagen desde cualquier punto de vista: de lado, desde arriba, abajo, etcétera. También podemos girar el objeto, mudarlo, cambiarlo de tamaño, y deformarlo, con tan sólo aplicar fórmulas a la información definida. Al tratar con modelos de objetos de dos o tres dimensiones (o más), nos aproximamos a un nivel más matemático, y por tanto, el ordenador nos ayuda a realizar los cálculos necesarios.
Mapear. Ya que estamos usando conjuntos de píxeles para representar imágenes, a veces necesitamos que la imagen represente dimensiones más "humanas". Digamos que queremos crear una imagen de un mapa. Requerimos que nuestro mapa nos dé información precisa. Por ello, cada línea en nuestro mapa debe representar una longitud determinada; por ejemplo, cada tramo de carretera equivale a 10 kilómetros. Si esto es cierto para todos los tramos de nuestra imagen, entonces nuestro mapa está a escala. Análogamente, podemos tener varias imágenes pero de distintos tamaños. Necesitamos combinar estas imágenes para que tengan la misma escala. Esto se denomina mapear, del inglés mapping, o cambiar de escala.
El cambio de escala también puede producirse debido al modelo matemático. Por ejemplo, si queremos representar una ecuación matemática: y = 2x + 3, podemos calcular los valores de y a partir de valores escogidos de x. Estas coordenadas se usarán para poder seleccionar un píxel que las represente. Sin embargo, no todos los valores van a ser posibles representar, según los valores escogidos. Realmente estamos hablando de representar una imagen en dimensiones matemáticas en un sistema gráfico de píxeles. Debemos realizar un cambio de escala y seguramente de coordenadas.
El mapeo es necesario al tratar con objetos de diferentes dimensiones y orientaciones. Se debe transformar el estado de todos los objetos a una base para que sean compatibles. En el ejemplo de la ecuación matemática, acabaríamos transformando las coordenadas cartesianas calculadas a coordenadas en píxeles.
2019-06-02 23:40:01
hola a todos alguien me puede solucionar esto .
void TrianguloRelleno( PUNTO2 A, PUNTO2 B, PUNTO2 C );
que pongo en PUNTO2 A Y B Y C
no se como hacerlo ayudaaaaa
2019-06-03 02:04:25
Para aclarar, esta función pertenece a nuestra mini-biblioteca gráfica, que funcione bajo MS-Windows. Sugerimos consultar el apéndice A del curso de gráficos. Puedes dirigirte directamente a: http://graficos.conclase.net/curso/index.php?cap=900#inicio
La entidad 'PUNTO2' es una estructura que se define como,
struct PUNTO2
donde 'x' e 'y' son las coordenadas en píxeles.
La función, 'TrianguloRelleno()', requiere tres puntos que representan los tres vértices del triángulo a dibujar.
2019-11-18 14:13:26
esto fue una prueba exitosa pero no funcion el while
queria muchos colores y nada, saludos
PUNTO2 A={0,0},B={499,499},C={0,499};
PUNTO2 D={250,0},E={357,499},F={125,499};
PUNTO2 G={300,50},H={400,400},J={10,200};
/* A partir de aquí, escribe las sentencias para dibujar */
TrianguloRelleno(A, B , C);
CambiarColorBrocha( 125, 125, 125 );
TrianguloRelleno(D, E , F);
CambiarColorBrocha( 200, 125, 12 );
TrianguloRelleno(G, H , J);
while(!CambiarColorBrocha( 100, 100, 100 )){
for(int i=0;i<255;i++)CambiarColorBrocha( i, i, i );
2019-11-20 03:52:43
Tenga presente que 'CambiarColorBrocha()' sólo cambia el color para el siguiente dibujo. Esto significa que se debe dibujar algo; no basta con cambiar el color. Una posible solución es dibujar diferentes triángulos con diferentes posiciones. Por ejemplo,
for( int i=0; i<255; i++ )
A.x += 2 ;  B.x += 2 ;  C.x += 2 ;
A.y += 2 ;  B.y += 2 ;  C.y += 2 ;
TrianguloRelleno( A, B , C );
CambiarColorBrocha( i, i, i );
Observe que eliminamos el bucle 'while', ya que la condición no es correcta; la macro, 'CambiarColorBrocha()', retorna un entero a ser interpretado como booleano para indicar si tuvo éxito o no.
© Junio de 2004 - Septiembre de 2009, Steven R. Davidson, steven arroba conclase punto net

References: Resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución