Ir al contenido principal

Nicolás' blog

Gráficos isométricos en Inkscape

Nicolás Guarín-Zapata

Comentarios

También disponible en:

English

A veces me encuentro en la necesidad de hacer un diagrama usando una proyección isométrica. Cuando el diagrama es complicado la mejor opción es usar algún software de CAD como FreeCAD, pero a veces sólo se necesita un diagrama simple. Otra situación en la que esto es común es en videojuegos, donde se el arte isométrico y arte pixelado son bastante comunes.

Lo que queremos se muestra en la siguiente figura.

Ejemplo de isométrico.

Es decir, queremos comenzar con cierto dibujo, o escrito en el caso del ejemplo, y queremos saber cómo se vería en una de las caras de una bloque isométrico.

A continuación, describiré brevemente las transformaciones involucradas en este proceso. Si sólo está interesado en la receta para hacer esto en Inkscape, pase al final de este post.

Transformaciones involucradas

Como estamos trabajando en una pantalla de computador, estamos hablando de 2 dimensiones. Por lo tanto, todas las transformaciones están representadas por matrices 2×2. En el ejemplo de interés en este post necesitamos las siguientes transformaciones:

  1. Escalado vertical

  2. Inclinación horizontal

  3. Rotación

Las siguientes son las matrices de transformación.

Escalado en la dirección vertical

La matriz está dada por

\begin{equation*} M_\text{scaling} = \begin{bmatrix} 1 &0\\ 0 &a\end{bmatrix}\, , \end{equation*}

donde \(a\) es el factor de escalamiento.

Inclinación horizontal

La matriz está dada por

\begin{equation*} M_\text{skew} = \begin{bmatrix} 1 &\tan a\\ 0 &1\end{bmatrix}\, , \end{equation*}

donde \(a\) es el ángulo de inclinación.

Rotación

La matriz está dada por

\begin{equation*} M_\text{rotation} = \begin{bmatrix} \cos a &-\sin a\\ \sin a &\cos a\end{bmatrix}\, , \end{equation*}

donde \(a\) es el ángulo de rotación.

Transformación completa

La transformación completa está dada por

\begin{equation*} M_\text{complete} = M_\text{rotation} M_\text{skew} M_\text{scaling}\, , \end{equation*}

particularmente,

\begin{align*} &M_\text{side} = \frac{1}{2}\begin{bmatrix} \sqrt{3} & 0\\ -1 &2\end{bmatrix}\approx \begin{bmatrix} 0.866 & 0.000\\ -0.500 &1.000\end{bmatrix}\, , \\ &M_\text{front} = \frac{1}{2}\begin{bmatrix} \sqrt{3} & 0\\ 1 &2\end{bmatrix}\approx \begin{bmatrix} 0.866 & 0.000\\ 0.500 &1.000\end{bmatrix}\, , \\ &M_\text{plant} = \frac{1}{2}\begin{bmatrix} \sqrt{3} & -\sqrt{3}\\ -1 &1\end{bmatrix}\approx \begin{bmatrix} 0.866 & -0.866\\ 0.500 &0.500\end{bmatrix}\, . \end{align*}

Estos valores parecen un poco arbitrarios, pero pueden obtenerse de la proyección isométrica misma. Pero esta explicación sería un poco larga para este post.

Tranformación en Inskcape

Ya tenemos las matrices de transformación y podemos usarlas en Inkscape. Pero primero, necesitamos entender cómo funciona. Inkscape usa SVG, el estándar web para gráficos vectoriales. Las transformaciones en SVG se realizan utilizando la siguiente matriz

\begin{equation*} \begin{bmatrix} a &c &e\\ b &d &f\\ 0 &0 &1\end{bmatrix}\, , \end{equation*}

que usa coordenadas homogéneas. Entonces, se puede presionar Shift + Ctrl + M y digitar las componentes de las matrices que se obtuvieron anteriormente para \(a\), \(b\), \(c\), y \(d\); dejando \(e\) y \(f\) con el valor 0.

Sin embargo, mi método preferido es aplicar cada transformación después de otro en el cuadro de diálogo Transformar (Shift + Ctrl + M). Y este es el método presentado en el resumen al final de esta publicación.

TL;DR

Si solo está interesado en las transformaciones necesarias en Inkscape Puedes consultar el resumen a continuación. Utiliza el tercer cuadrante como se presenta abajo.

Nombres para la representación en tercer cuadrante.

Resumen

Tenga en cuenta que Inkscape trata la rotación en sentido horario como positiva. Opuesto a la notación común en matemáticas.

Resumen para diagramas isométricos en Inkscape.

Comentarios

Comments powered by Disqus