Hoy voy a hablar de otro de mis pasatiempos: vectorizar imágenes.
[Parte I] [Parte II]
Sobre los vectores
Una imagen vectorial está compuesta por elementos geométricos como puntos, rectángulos, etc. definidos mediante sus coordenadas. Esto quiere decir que sin importar cuanto zoom hagamos, la imagen se vuelve a dibujar sin pixelarse.
Por ejemplo, tomemos esta esta imagen:
Si la abrimos en una pestaña nueva y hacemos zoom, no se deforma.
Si la abrimos con un editor de texto (al guardarla como .txt por ejemplo) vemos algo así:
<path
style="fill:#ff00ff;
stroke:#000000;
stroke-width:2;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-opacity:1"
d="M
21.036737,99.274854
74.021322,59.563732
120.77816,94.293247
Z"
id="path10" />
Tenemos un path, es decir una ruta entre puntos. Lo primero que aparece son los estilos, style. Podemos ver las propiedades del trazo (stroke) y el relleno (fill). Este último es #ff00ff (magenta) (ver Nota 1: Colores).
Después de eso viene lo que quería mostrar: en d= tenemos tres coordenadas: ¡los puntos del triángulo!
De esta forma el editor genera la imagen. La idea no es escribir las coordenadas a mano, no temáis. Pero creo que es interesante saber cómo funciona.
Nota 1: Colores Como los colores son RGB y van de 0 a FF (255 en hexadecimal), FF en rojo (R, red), 00 en verde (G, green) y FF en azul (B, blue) nos da magenta.
Curvas de Bézier
Si sólo tuvieramos las coordenadas de los puntos sólo podríamos dibujar polígonos. Pero se pueden dibujar otro tipo de figuras con Curvas de Bézier (les dejo la explicación mátemática en el link). Intuitivamente se tiene, por cada punto, dos coordenadas extra que se representan como anclajes o tiradores:
En la imagen de arriba, los nodos, es decir las puntas del segmento, están marcados con un rombo porque son esquinas (ya vamos a ver despues que si son las puntas sólo pueden ser esquinas). Además, de cada nodo sale una especie de palanca o tirador que termina en un círculo. Gracias a la magia de las matemáticas, dados dos nodos y dos puntos de anclaje (los círculos) se puede dibujar de forma precisa una curva.
Inclusive se puede hacer una curva más complicada:
El máximo de “panzas” (a falta de un término más técnico) que puede tener una curva en un solo segmento es de dos, una en cada dirección.
Tutorial básico de creación de vectores
Hay varias herramientas que sirven para crear y editar SVG (Scalable Vector Graphics - Gráficos Vectoriales Escalables), pero yo desde siempre uso Inkscape.
Después, lo que hace falta es elegir una imagen. Empecemos por una fácil:
.
Cuanto más pixelada está la imagen, más satisfacción causa ver el vector terminado…
Al abrir Inkscape nos crea un documento nuevo. Podemos arrastrar una imagen y elegir si la incrustamos (como parte del archivo) o la enlazamos (sólo se guarda la dirección).
Marcando los puntos
Para empezar a dibujar hay que elegir la herramienta Bézier del menú:
Ahora hay que empezar a poner los puntos que van a formar la ruta. Para una imagen sencilla alcanza con poner un punto en cada esquina. Recordar que la curva puede tener como máximo dos “panzas” así que si tiene más de dos hay que poner un punto cada dos cambios de dirección (después vemos un ejemplo).
En la imagen de arriba se muestran los lugares donde hay que poner los puntos, alcanza con ir haciendo click en orden de las agujas del reloj rodeando el dibujo y volver a hacer click en el primer punto al terminar. Queda algo así:
No se parece mucho… pero ya lo vamos a arreglar. Después tenemos que elegir la herramienta de nodos (tecla n):
Ahora hacemos click en una esquina, por ejemplo la punta de la cola, y con shift arrastramos desde el nodo hacia abajo:
¡Ahí apareció el tirador! Y se empieza a curvar uno de los segmentos. Según la dirección en la que hayan tirado puede haberse movido el que va de la cola al ala o el que va de la cola al pico.
En cualquier caso, ahora que el tirador está visible, lo pueden acomodar hasta que más o menos acompañe el dibujo que está detrás:
Para terminar de acomodar la curva hay que hacer lo mismo en la otra punta, shift + click y arrastrar hacia abajo. Si se activa el tirador que no es, arrastren en la dirección contraria. Puede tomar un par de intentos de los dos lados pero al final se puede.
La diferencia es sutil, pero ahora sigue fielmente la curva:
Repetimos la operación para todos los nodos y nos queda así:
Después podemos elegir el color de la imagen de atrás con el cuentagotas (tecla d):
Y para eliminar el negro de los bordes vamos a la izquierda de toda la tira de colores (abajo) que tiene una cruz:
Hacemos click derecho en la cruz - fijar trazo. Seleccionamos la imagen del fondo y la borramos. ¡Y ya está! Podemos usar la imagen directamente como .svg guardando desde Inkscape o exportándola a png desde Archivo -> Exportar.
Esta fue una imagen bastante sencilla porque tenía solo esquinas, la próxima voy a mostrar cómo hacer algo con más curvas.
Por comentarios o sugerencias mi correo está al final de la página. También pueden levantar un issue en el repo de GitHub del sitio.