Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Clase14

511 views

Published on

Color en la computadora. Pixeles y la información que requieren. Representación de la información de color. Profundidad de color. Canal alfa (alpha channel). Rutinas en VBScript para usar colores en HTML. Imágenes ráster y vectorizadas. Rueda del color. Problema ejercicio. Páginas de referencia.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Clase14

  1. 1. Color en la Computadora Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/introprogra Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados
  2. 2. Pixels <ul><li>Picture Elements = Pixels </li></ul><ul><ul><li>Pequeños puntos que componen la imagen en pantalla </li></ul></ul><ul><ul><li>Retícula discreta de puntos </li></ul></ul><ul><li>Resolución de una imagen: </li></ul><ul><ul><li>El número de puntos en ella </li></ul></ul><ul><ul><li>320x200, 640x480, etc. </li></ul></ul>
  3. 3. Información en un Pixel <ul><li>Las imágenes se componen de pixeles </li></ul><ul><li>Por cada pixel hay que guardar: </li></ul><ul><ul><li>Color </li></ul></ul><ul><ul><ul><li>¿B/W? </li></ul></ul></ul><ul><ul><ul><li>¿Colores? </li></ul></ul></ul><ul><ul><li>¿Posición? </li></ul></ul><ul><ul><li>¿Transparencia? </li></ul></ul>
  4. 4. Información en un Pixel <ul><li>Color </li></ul><ul><ul><li>B/W puro: </li></ul></ul><ul><ul><ul><li>1 bit por pixel </li></ul></ul></ul><ul><ul><li>Tonos de gris: </li></ul></ul><ul><ul><ul><li>1-255 por pixel (1 byte) </li></ul></ul></ul><ul><ul><ul><li>0 Negro, 255 blanco </li></ul></ul></ul><ul><ul><li>Color: </li></ul></ul><ul><ul><ul><li>Composición de rojo, verde y azul </li></ul></ul></ul><ul><ul><ul><li>RGB (R,G,B) </li></ul></ul></ul>
  5. 5. Profundidad de Color <ul><li>R,G,B </li></ul><ul><ul><li>16 colores: 4 bits </li></ul></ul><ul><ul><ul><li>Grupos – paletas – de colores </li></ul></ul></ul><ul><ul><li>256 colores: 8 bits (1 byte) </li></ul></ul><ul><ul><li>16 bits (¿Cuántos colores?) </li></ul></ul><ul><ul><li>24 bits (Color verdadero) </li></ul></ul><ul><ul><li>32 bits </li></ul></ul>
  6. 6. 24 Bits – Color Verdadero <ul><li>24 bits son 3 bytes </li></ul><ul><li>1 byte para cada color </li></ul><ul><ul><li>(0-255,0-255,0-255) </li></ul></ul><ul><li>Rojo: (255,0,0) - Verde: (0,255,0) - Azul: (0,0,255) </li></ul><ul><li>Blanco: (255,255,255) - Negro: (0,0,0) </li></ul><ul><li>Amarillo: (255,255,0) - Cyan: (0,255,255) - Magenta: (255,0,255) </li></ul>
  7. 7. Almacenamiento <ul><li>¿Cuántos bytes se necesitan para almacenar </li></ul><ul><ul><li>640x480 pixels en color verdadero? </li></ul></ul><ul><ul><li>1,024x768? </li></ul></ul><ul><li>¿Dónde se almacenan estos bytes? </li></ul><ul><li>¿Es necesario almacenar la posición de cada pixel? </li></ul><ul><li>¿Qué es un mapa de bits? </li></ul>
  8. 8. Colores y Canal Alfa <ul><li>RGB: (R,G,B) </li></ul><ul><li>1 byte para opacidad </li></ul><ul><ul><li>0% de opacidad: transparente </li></ul></ul><ul><ul><li>100% de opacidad: opaco </li></ul></ul><ul><li>Byte de opacidad: Canal Alfa </li></ul><ul><ul><li>Alpha channel </li></ul></ul><ul><li>RGBA: (R,G,B,A) </li></ul><ul><li>32 bits (24 RGB + 8 de alpha) </li></ul>
  9. 9. VBScript para Colores <ul><li>Función RGB(Red,Green,Blue) </li></ul><ul><ul><li>Devuelve un número que representa un color </li></ul></ul><ul><li>Dim i,j </li></ul><ul><li>Document.Write &quot;<Table Border=0>&quot; </li></ul><ul><li>For i = 0 To 255 Step + 5 </li></ul><ul><li>Document.Write &quot;<TR>&quot; </li></ul><ul><li>For j = 0 To 255 Step + 5 </li></ul><ul><li>Document.Write &quot;<TD BGColor=#&quot; & Hex(RGB(i,0,j)) & &quot; Width=5 Height=5></TD>&quot; </li></ul><ul><li>Next </li></ul><ul><li>Document.Write &quot;</TR>&quot; </li></ul><ul><li>Next </li></ul><ul><li>Document.Write &quot;</Table>&quot; </li></ul>ej064.html
  10. 10. Raster Images <ul><li>Mapas de Bits </li></ul><ul><li>Guardan información de color </li></ul><ul><ul><li>De todos los pixeles </li></ul></ul><ul><li>Formatos: </li></ul><ul><ul><li>BMP, JPEG (JPG), GIF, PNG, etc. </li></ul></ul><ul><li>Problema: </li></ul><ul><ul><li>Al agrandarlos: aparecen los “alias” </li></ul></ul>ej060.html
  11. 11. Problema de Alias <ul><li>Aparecen por la digitalización de una imagen </li></ul><ul><li>Alias </li></ul><ul><ul><li>“ Graditas” en la imagen </li></ul></ul><ul><li>Patrones de Moiré: </li></ul><ul><ul><li>Texturas que no están en el original </li></ul></ul>
  12. 12. Vector Images <ul><li>Imágenes vectorizadas </li></ul><ul><li>No guardan pixeles </li></ul><ul><li>Guardan información de construcción de imagen </li></ul><ul><ul><li>Los vectores </li></ul></ul><ul><li>No pierden detalle al agrandarlos </li></ul><ul><li>Formatos: WMF, DRW </li></ul>
  13. 13. La Rueda de Color <ul><li>Para combinación de colores </li></ul><ul><ul><li>Análogos </li></ul></ul><ul><ul><ul><li>Adyacentes en la rueda de colores </li></ul></ul></ul><ul><ul><li>Complementarios </li></ul></ul><ul><ul><ul><li>Opuestos en la rueda de colores </li></ul></ul></ul><ul><ul><li>Monocromáticos </li></ul></ul><ul><ul><ul><li>Tintas y sombras del mismo color </li></ul></ul></ul><ul><ul><ul><li>Tintas: blanco y el color </li></ul></ul></ul><ul><ul><ul><li>Sombras: negro y el color </li></ul></ul></ul>
  14. 14. Problema <ul><li>Construír la rueda de colores </li></ul><ul><li>Tomar como base el programa del círculo </li></ul><ul><li>Fecha de entrega: Miércoles 14 de marzo de 2007 </li></ul>
  15. 15. Referencias <ul><li>Patrones de Moiré y Alias: </li></ul><ul><ul><li>http://www.wfu.edu/~matthews/misc/DigPhotog/alias/index.html </li></ul></ul><ul><li>Manejo de color para programadores: </li></ul><ul><ul><li>http://www.sitepoint.com/article/color-for-coders </li></ul></ul><ul><li>Imágenes por computadora: </li></ul><ul><ul><li>http://www.rw-designer.com/computer-image </li></ul></ul>

×