Caso de desarrollo de un editor interactivo de diagramas usando álgebra lineal

• Las matrices son uno de los conceptos importantes de álgebra lineal que aprendemos en la escuela, y resultan útiles para resolver diversos problemas. En este artículo se explica cómo se usaron al desarrollar un editor interactivo de diagramas llamado Schemio.

Etapa inicial del desarrollo de Schemio

• Al principio, Schemio tenía una forma simple: los usuarios podían crear figuras y moverlas, cambiarles el tamaño y rotarlas.
• Las figuras se representaban como regiones simples definidas por posición, tamaño y ángulo de rotación.
• La estructura de datos representaba las figuras como un arreglo plano.

El problema de la estructura jerárquica

• Para conectar figuras entre sí y crear interacciones complejas, se introdujo una jerarquía de ítems.
• Con SVG es fácil renderizar una estructura jerárquica, pero Schemio tenía que ofrecer más que solo renderizado.
• Era necesario transformar entre coordenadas locales y coordenadas globales.

Escalado y punto pivote

• El escalado permite ajustar dinámicamente el tamaño de un objeto, y el punto pivote define el centro de rotación.
• Al agregar escalado y puntos pivote, la gestión de transformaciones se volvió más compleja, y el problema se resolvió usando matrices.

Fundamentos de las transformaciones con matrices

• Las transformaciones pueden expresarse mediante matrices. Por ejemplo, un punto en el espacio puede representarse como una matriz de 3x1.
• Al multiplicar la matriz de transformación por la matriz del punto, se obtiene el punto transformado.
• También es posible combinar matrices de transformación para realizar distintas transformaciones.

Coordenadas globales y coordenadas locales

• Convertir coordenadas locales a coordenadas globales es sencillo, pero hacerlo al revés es más complejo.
• Se puede usar la matriz inversa para convertir coordenadas globales a coordenadas locales.

Montaje y separación de objetos: el reto de las transformaciones jerárquicas

• Al arrastrar y soltar un objeto sobre otro o al cambiar la jerarquía, es necesario recalcular su nueva posición y rotación.
• Se ajustan la posición y la rotación del objeto arrastrado para que su movimiento en pantalla se vea natural.

Cierre

• Durante el desarrollo de Schemio, se resolvieron problemas complejos aprovechando conceptos matemáticos.
• Si te interesa el proyecto, puedes revisar el código fuente en GitHub y probarlo directamente en el sitio web de Schemio.

[GN⁺]

Comentarios en Hacker News

• Interés por haber descubierto un nuevo software de código abierto llamado Schemio

  • El diseño y la apariencia de Schemio son muy refinados
  • A pesar de ser de código abierto, no lo presume

• Adobe PostScript popularizó las matrices de transformación en la década de 1980

  • SVG toma mucho del modelo de imagen de PostScript
  • Se proporciona un enlace sobre el uso de matrices 2D en PostScript

• El material de WebGLFundamentals.org es una excelente introducción a la jerarquía de transformaciones

  • Se proporciona un enlace sobre el grafo de escena de WebGL

• El autor sugiere investigar sobre coordenadas homogéneas

  • Se proporciona un enlace de Wikipedia sobre coordenadas homogéneas

• El framework QGraphicsView es un framework gráfico muy potente

  • Ofrece herramientas potentes, incluidas transformaciones escena-objeto y jerarquías de objetos
  • No ha encontrado en la web una alternativa que funcione tan bien como QGVF

• Un aspecto genial de transformar en 2D usando matrices homogéneas 3x3

  • Las transformaciones 2D en realidad son cizallamientos en 3D a lo largo del plano z = 1
  • Se proporciona un enlace relacionado de YouTube

• Schemio se ve genial

  • Está creando muchos diagramas de flujo usando Claude
  • Le gustaría hacer un trabajo similar con Schemio

• Artículo y software interesantes

  • Había estado buscando un software de código abierto potente para diagramas
  • Es extraño que Schemio no hubiera aparecido en su radar
  • Parece que usar álgebra geométrica para transformaciones y animación sería más intuitivo
  • Se proporciona un enlace sobre álgebra geométrica

• Al mover un objeto, si tiene muchos objetos hijos, hay que actualizar el término A(i-1) de todos los hijos

  • Se pregunta si este proceso es costoso
  • En figuras de tamaño moderado, quizá esté bien

• Schemio es muy hermoso y realmente parece valer la pena usarlo