El auge de los grficos vectoriales Y su

El auge de los gráficos vectoriales Y su uso en Gene. Xus Gabriel Gambetta ggambett@artech. com. uy

Agenda Introducción Motivación Imágenes raster Compresión Rotación y escalado El caso de Internet Gráficos vectoriales SVG Uso en Gene. Xus Diagramas actuales Nuevos diagramas Nuevas formas de edición

Motivación Imagen raster = matriz de colores Cada elemento representa un pixel

True Color Cada elemento es un valor RGB Color aditivo : colores básicos rojo, verde y azul 8 bits por componente x 3 componentes = 24 bits por pixel 24 bpp 16. 7 millones de colores Más de los que el ojo humano puede distinguir 411 x 544 x 24 bpp = 655 KB

Modo indexado Cada elemento es un índice Paleta de colores : subconjunto de los 16. 7 millones de colores 8 bits por índice 256 colores en la paleta 411 x 544 x 8 bpp = 218 KB (1/3) Se pierde variedad de color

Compresión RLE = Run Length Encoding Se aprovechan las apariciones contiguas de un mismo valor WWWWWWWWWWBBBBBBBBBBBWBBWWWWWW 19 W 33 B 1 W 2 B 11 W

Compresión RLE (II) RLE en 4 bpp (16 colores) AAAAAAABBBBBCCCCDEEDDDFDEFDEDGDDGG GGFDDDDEEDDDDDECCCCCBBCHHCCCC 7 A 5 B 4 C 1 D 2 E 3 D 1 F 1 D 1 E 1 D 1 G 2 D 4 G 1 F 4 D 2 E 10 D 1 E 5 C 2 B 1 C 2 H 4 C Cuantos más valores posibles, menos oportunidades de compresión

Compresión RLE (III) Peor caso 1 V 1 L 1 D 1 U 1 J 1 V 1 L 1 D 1 M 1 V 1 I 1 E 1 Y 1 J 1 R. . . El volumen de datos aumenta RLE no es práctico para imágenes con más bpp

Compresión LZ ¿Otra forma de aprovechar redundancias? ABCABCABC “Peor caso” para RLE. . . 1 A 1 B 1 C . . . sin embargo existe información redundante 6 ABC

Compresión LZ (II) LZ 77 Lempel-Ziv 1977 Ultimos símbolos leídos Salida : símbolos + pares <distancia, largo> ABCABCABC ABC<-3, 3><-6, 3>

Compresión LZ (III) LZ 78 Diccionario de símbolos Se construye a medida que se leen los símbolos de entrada Salida : Indices en el diccionario ABCABCABC 01233 0 = A; 1 = B; 2 = C; 3 = ABC

Compresión Huffman Árbol binario de símbolos Se combinan los dos símbolos menos frecuentes en un nodo con la suma de frecuencias, hasta construír el arbol binario El camino de la raíz a un nodo se puede escribir en binario Cuanto más frecuente es un símbolo, más corto es el camino desde la raíz

Compresión Huffman (II) EL GENEXUS ES EXCELENTE S 1111 G 1110 _ 110 N 1011 L 1010 U 10011 E 0 X 10010 T 10001 C 10000 E _ N S L G X U C T 8 3 2 2 2 1 1 1

Compresión Huffman (III) Sin comprimir 4 bits por símbolo x 23 símbolos = 92 bits Huffman E : 8 x 1 = 8 bits _ : 3 x 3 = 9 bits N : 2 x 4 = 8 bits S : 2 x 4 = 8 bits L : 2 x 4 = 8 bits G : 1 x 4 = 4 bits X : 1 x 5 = 5 bits U : 1 x 5 = 5 bits C : 1 x 5 = 5 bits TOTAL : 65 bits

Hasta aquí. . . Modo indexado + LZ 78 + Huffman = GIF Referencia : 137 KB (1/5) ¡Menos colores! (16. 7 millones 256) Pero son colores “representativos” La imagen original y la imagen comprimida son idénticas bit a bit “Lossless compression” ¿Será necesario?

La visión humana Capacidad limitada para diferenciar colores 0, 127, 0 ≠ 0, 128, 0 Diferencia imperceptible para humanos Diferencia significativa (1 bit) para la compresión Distinta respuesta a distintas longitudes de onda Mayor sensibilidad a cambios de luminosidad que de color

Metadata ¡Estamos comprimiendo imágenes!

La idea. . . Algoritmo genérico vs algoritmo específico Se pueden obtener resultados mucho mejores con un algoritmo diseñado para comprimir imágenes Aprovechar limitaciones de la visión humana Dominio 1 D vs dominio 2 D No es una secuencia lineal de valores sino una matriz

Dominio espacial vs dominio de frecuencias Dominio espacial = +

Dominio espacial vs dominio de frecuencias (II) Dominio de frecuencias = +

Dominio espacial vs dominio de frecuencias (III) Transformada de Fourier “Suficientes” frecuencias Frecuencias altas ruido Filtro pasa-bajo

JPEG 1. Conversión de RGB a YUV 2 canales de color 1 canal de luminosidad 2. Downsampling Sólo a canal de luminosidad Promedio de elementos adyacentes ½ o ¼ del volumen de datos original Degradación visual casi nula

JPEG (II) 3. Bloques de 8 x 8 pixels Aprovechamiento de redundancia espacial DCT (Discrete Cosine Transform) Similar a Fourier, para matrices Eliminación de frecuencias altas ¿Cuántas? Parámetro “quality” de JPEG 4. Compresión sin pérdidas Referencia : 47 KB (7%) Mantiene 24 bpp

Pero. . . Sigue siendo una matriz de pixels Problemas al escalar ¿ ? ¡ ! Problemas similares al rotar

El caso de Internet Restricciones Mayor tamaño = mayor costo Mayor tamaño = mayor latencia = menor interactividad Otras necesidades Animaciones El paso lógico Imagen + redundancia espacial = JPEG + redundancia temporal = MPEG El resultado no es aceptable No resuelve problemas de escala

Un enfoque distinto. . . Descripción geométrica vs representación de la descripción geométrica Matriz de 100 x 100 pixels, 24 bpp = 30 KB <centro (50, 50); radio 50; color (255, 0, 0)> = mucho menos La complejidad pasa al cliente “Renderer” ¿Será suficientemente expresivo?

¿Será suficiente?

¿Será suficiente? (II)

¿Será suficiente? (III)

¿Será suficiente? (IV) http: //www. terminator 3. com

SVG Scalable Vector Graphics Open Dialecto de XML Side effect de publicar información + XSLT Elementos visuales Scripting Interactividad

SVG (II) Elementos visuales Path Shape Text Filling y Stroking Gradients y Patterns Filters

SVG (III) <circle cx="25" cy="25" r="20" fill="red"/> <defs> <rect id="rect" width="15" height="15" fill="red"/> </defs> <use x="5" y="5" xlink: href="#rect"/> <use x="30" y="30" xlink: href="#rect"/>

SVG (IV) <defs> <linear. Gradient id="gradient 1" gradient. Units="object. Bounding. Box" x 1="0" y 1="1" x 2="0" y 2="0"> <stop offset=". 28" style="stop-color: red; "/> <stop offset=". 7" style="stop-color: yellow; "/> <stop offset="1" style="stop-color: green; "/> </linear. Gradient> </defs> <circle fill=“green” cx="100" cy="70" r="80"/> <circle style="fill: url(#gradient 1); " cx="100" cy="70" r="80"/>

Uso en Gene. Xus Aspecto visual Exponer más información como XML Documentación interna Nuevas formas de interacción

Aspecto visual

Aspecto visual (II)

Aspecto visual (III)

Aspecto visual (IV)

Nuevos diagramas (II)

Nuevas formas de interacción