GridSpace

GridSpace is a very small program developed in Processing that creates grid-based compositions. It was first developed back in 2008 and today I’m updating and releasing the code. This program allows you to export bitmaps and PDFs.

Planteamiento

La pintura comienza con la partición ordenada del espacio. La grilla cartesiana representa topológicamente la idea de la continuidad espacial. La gracia de este programa radica en la capacidad de distorsionar el espacio antes de comenzar. El proceso pictórico es básico: líneas que corren dentro de la grilla. La experimentación radica en la manipulación del espacio, no de las grafías o accidentes que ocurren en él, ellas son sólo una excusa para poder ver lo que ocurre con el espacio.

00016543

Sideways: Slitscan for Urban Travellers

Sideways is a very small program created with Processing that creates 2 slitscan bitmaps from a single video. The video must be a first-person road shoot so both sides (left & right) are created from the edges.

instructions

  • open the sketch in Processing. Download the program if necessary
  • import your video to the sketch or place it in the /data directory
  • update filename and extension variables accordingly

important variables

  • scanBorderOffset is the sample distance from the edge
  • scanWidth is the slice width
  • widthFactor is the multiplier of the output width

Check the Repo in Github

Examples

left side:

2014116114933_izq

right side:

2014116114933_der

For more information on the topic, check this Informal Catalogue of Slit-Scan Video Artworks and Research created by Golan Levin.

Pixograms Icon Webfont

Las partituras de interacción, introducidas el 2008 como un sistema de notación gráfica para el diseño de experiencia, han sido adoptadas por muchos profesionales y equipos de diseño sobre todo en el contexto nacional. Este año, hemos decidido darles un ajuste construyendo una herramienta que facilite su creación. Una de las mayores dificultades para ser adoptadas dentro de las metodologías de trabajo, y su posterior consolidación en el tiempo, radica en el tiempo que involucra crearlas ya que actualmente sólo disponemos de plantillas para Illustrator y Omnigraffle.

El avance es crear una aplicación que te permita escribir las partituras, con la fluidez de un compositor. Para esto estamos creando una aplicación web. La dependencia principal de esa aplicación es una tipografía de íconos que trabaja con ligaduras llamada Pixograms, que define un lenguaje visual básico para construir partituras de interacción o PiX –como las hemos llamado–. Dentro de los íconos tenemos diferentes categorías, como acciones de alto nivel (compartir, valorar, enviar, etc.), gestos touch, objetos comunes, respuestas del servidor y elementos abstractos, entre otros.

La idea de esta familia iconográfica comenzó con una lógica de íconos apilados, queriendo definir una suerte de “lenguaje aglutinante” iconográfico para construir ideogramas a partir de las diferentes combinaciones de palabras. Si bien una aproximación de este tipo podría ser más consistente y compleja como lenguaje, resultó ser poco viable como primer paso en la definición de una herramienta. Entonces, a partir de esa idea decidimos simplificar los íconos para que fueran nombrados con una sola palabra que fuese fácil de aprender y recordar. La versión actual cuenta con los aportes de Melany Marin e Ingrid Céspedes quienes sintetizaron y clasificaron el juego de íconos.

pixograms-sprites

Esta webfont está creada con grunt-webfont y con la valiosa ayuda de Hugo Solar, quien nos está ayudando a desarrollar el servicio de partituras PiX. El proyecto, bajo licencia artística, permite que otros puedan tomar esta familia como base para otros proyectos de diseño. Esperamos ir actualizando esta familia en la medida que las partituras requieran expandir su lenguaje incorporando más conceptos y objetos.

Árbol Pitagórico

En Febrero recién pasado tuve el honor de formar parte del primer programa de maestría en diseño de interacción, en Costa Rica. En esa ocación tuve el placer de colarme en el curso de Tomás de Camino a de introducción a la programación. Acá les dejo uno de los primeros ejercicios del curso:

show code

<br />
/*<br />
 * Recursive Hypotenuse<br />
 * by Herbert Spencer<br />
 * February 2014<br />
 */</p>
<p>float ang;  // this is the global angle<br />
int levels; // this is the amount of tree levels or how many times we will call the recursive function</p>
<p>void setup() {<br />
  size(510, 510);<br />
  noStroke();<br />
  smooth();<br />
  levels = 3;       // start with something small<br />
  mouseX = width/2; // place the mouse in the middle<br />
}</p>
<p>void draw() {<br />
  // white background<br />
  background(255);</p>
<p>  // the global angle can be modified by de 'x' movement of the mouse<br />
  ang = map(mouseX, 0, width, -HALF_PI, 0);</p>
<p>  // this is where we call the recursive function<br />
  hypotenuse(width/2 - 30, height, width/2 + 30, height, levels);<br />
}</p>
<p>// this is the recursive function<br />
// it requeres 4 floats and 1 int. The floats represent the position of 2 points, which define the hypotenuse<br />
// the level defines how many times are we calling this function recursevely</p>
<p>void hypotenuse(float x1, float y1, float x2, float y2, int level) {</p>
<p>  // determine the length, which is the distance between the points. We'll call it 'side', the side of the square<br />
  float side = dist(x1, y1, x2, y2);</p>
<p>  // determine the angle between the two points... not so tricky<br />
  float t = atan2(y2- y1, x2 - x1);</p>
<p>  // reset the coordinate system, just to be polite<br />
  pushMatrix();<br />
  {<br />
    // translate our axis to the first point, our new (0,0)<br />
    translate(x1, y1);</p>
<p>    // align space to the hypothenuse, using the angle we've just calculated<br />
    rotate(t);</p>
<p>    // draw the square<br />
    fill(col(level), 90); // nice color with transparency<br />
    rect(0, -side, side, side);</p>
<p>    // translate to the new hypothenuse<br />
    translate(0, -side);</p>
<p>    // determine the lengths of the triangle sides given a global angle 'ang'.<br />
    // 'a, b, c'; where 'c' is the hypotenuse. We have 'c', it's the distance between the first two points, ok?</p>
<p>    float a = cos(ang) * side;<br />
    float b = sin(ang) * side;</p>
<p>    // draw the triangle<br />
    noStroke();<br />
    fill(col(level), 150);<br />
    beginShape();<br />
    {<br />
      vertex(0, 0);                       // first vertex<br />
      vertex(cos(ang) * a, sin(ang) * a); // tricky second vertex<br />
      vertex(side, 0);                    // third vertex<br />
    }<br />
    endShape();</p>
<p>    // this is a method to eventually escape from this recursive fuction<br />
    if (level > 0) {<br />
      hypotenuse(0, 0, cos(ang) * a, sin(ang) * a, level-1);<br />
      hypotenuse(cos(ang) * a, sin(ang) * a, side, 0, level-1);<br />
    }<br />
  }<br />
  popMatrix();<br />
}</p>
<p>void keyPressed() {</p>
<p>  // you can toggle the levels by hitting keys a-z<br />
  if (key == 'a') {<br />
    levels++;<br />
  }<br />
  if (key == 'z') {<br />
    levels--;<br />
  }</p>
<p>  // so we keep levels reasonable...<br />
  levels = constrain(levels, 0, 16);</p>
<p>  // output to console how many levels do we have at the moment<br />
  println("levels = "+levels);<br />
}</p>
<p>color col(int level){<br />
  int n = levels - level;<br />
  float r = 18;<br />
  float g = 134 + 11 * n;<br />
  float b = 255 - 19 * n;<br />
  color c = color(r,g,b);<br />
  return c;<br />
}<br />

Para agregar o quitar niveles de recursión debes presionar las teclas a y z. El código está publicado acá.

El arte de saber preguntar

En CitiSent estamos permanentemente investigando cómo mejorar nuestro servicio. Uno de los temas centrales para nosotros, en términos de diseño de interacción, es cómo se deben formular las preguntas para configurar los estudios dentro de CitiSent.

Si entendemos que el servicio se divide en 3 fases: (1) formulación de la pregunta, (2) obtención de resultados y (3) visualización y síntesis; este primer segmento resulta ser crítico, especialmente en el contexto de los grandes datos, o big data. Hoy, hablar de big data ya forma parte del léxico común, muchas compañías han incorporado el análisis de grandes volúmenes de información, especialmente los producidos en redes sociales, para poder dar respuesta a los mercados cambiantes o atender mejor a sus clientes. En definitiva, el análisis de grandes datos por medio del software, ya forma parte de la estrategia de supervivencia de las instituciones modernas.

Para los investigadores que usan CitiSent (periodistas, sociólogos, urbanistas y planificadores, políticos, etc.) resulta fundamental poder escanear y filtrar grandes cantidades de información, pero más importante que eso es darle respuesta a sus interrogantes sin estar necesariamente delegando en el software la definición de los resultados (como la priorización y relevancia de los datos). Dicho de otro modo, es necesario poder dar mayor flexibilidad a la formulación de la query para que el investigador pueda expresar en sus propios términos sus preguntas y no en los términos de la máquina.

El modo de formulación de preguntas y la representación de sus resultados (que aspiran a representar conocimiento) son actualmente una dualidad asimétrica, donde la fuerza argumental de los resultados (desde la data –lo dado– a la información) es superior y definitivo en su fuerza argumental; los datos aparentan ser una expresión de la realidad incuestionable cuando en realidad son sólo el reflejo de las herramientas con los que fueron recolectados. Johana Drucker, en su publicación Humanities Approaches to Graphical Display argumenta que debemos pensar en los datos como captos.  El dato (del latín datum), no es algo dado sino algo captado. El “capto”, por otro lado, está “tomado” de forma activa mientras que los datos se suponen que son un “dado”, al poder ser registrados y observados. A partir de esta distinción surge un mundo de diferencias. Toda investigación humanista (ya sea historiográfica, periodística o política) reconoce su carácter situado, parcial y constructivista de la producción de conocimiento, donde el conocimiento se construye, es tomado a partir de una indagación creativa (smart query) y no es una representación objetiva de una realidad preexistente (por eso nuestro lema en CitiSent es “tú inventas la forma de mirar”, atentiendo a las destrezas propias de los investigadores que se apropian de la herramienta y la pueden usar bajo sus propios términos).
El espacio del problema corresponde entonces al diálogo de indagación entre la persona y el sistema, definido éste por la interfaz que presenta en formas tipográficas y de visualizaciones, los objetos de información. La manipulación de estos objetos hacia la reformulación de la pregunta (feedback loop) define el tono y la forma de este diálogo o el diseño de una conversación.

Es a partir de estas ideas, de la invensión de la mirada y del poder de las preguntas,  que abordamos el problema de la formulación de la query informática que el usuario somete como entrada en un sistema de búsqueda o mineríaa de datos. Consideramos que esta formulación es creativa y que el diálogo entre el sistema que retorna (y representa) resultados y el investigador que contrapregunta consiste el verdadero diálogo que es posible formalizar mediante el diseño de interacción.

En el caso de CitiSent, el feedforward por parte del usuario es el query que se formula en la configuración de un estudio. Éste consiste en la definición de temas, fuentes y lugares, que corresponden, a su vez, a facetas semánticas.

  • faceta de tópicos, que define una proximidad semántica en la relación de términos
  • faceta social (entidades animadas y su correspondiente grafo, distinguiendo personas e instituciones)
  • faceta geográfica, como proximidad a puntos o fuguras de recorte (máscaras obturadoras)
  • y una cuarta faceta tiemporal, implícita al modelo de extracción y análisis longitudinal en el tiempo
Configuración de un Estudio

Esta investigación busca conciliar el modelo cognitivo humanista de inquisición por un lado, con la respuesta del sistema de búsqueda y representación por otro. Buscamos establecer directrices de interacción para el diseño de sistemas (entendidos como servicios o agentes) que sean capaces de reconocer los talentos y destrezas del usuario-investigador, comprendiendo la interacción humano-computador como una conversación natural y simétrica.

Son preguntas como ésta la que nos motivan a estar mejorando permanentemente nuestro servicio.

¿Tienes algo que comentar? Nos interesa mucho conocer tu opinión, tal vez nos puedas ayudar.

The post El arte de saber preguntar appeared first on CitiSent Blog.

La Observación en Diseño

Exámen del Taller de 7ª Etapa

Nota: El taller de 7ª etapa de diseño gráfico trabajó, durante este tercer trimestre con las profesoras Michele Wilkomirsky y Macarena Álamos investigando y desarrollando un sistema de comunicación para la Ciudad Abierta de Amereida. El planteamiento, originado como un auto-encargo, desemboca en un proyecto que el taller aborda como una obra entre todos. A continuación doy cuenta de este proyecto, y de la materia que nos abre dentro del diseño gráfico; o más bien, las preguntas que nos deja abierta señalando el camino que debemos continuar.

Marginalia:

Su Materia

El diseño, dentro de su quehacer, involucra e integra muchas materias (materiales, artísticas, plásticas, psicosociales, económicas, culturales, comunicacionales, legales y un largo etcétera). El diseñador ha conocerlas, considerarlas e integrarlas, pero no le son propias. Lo propio del diseño, su conocimiento, radica en el diseñar mismo; en su modo de proceder, de informarse, de colaborar y, por supuesto, de materializar y dar forma. En este sentido, la observación, entendida como “la vía poética-creativa de llegar a la forma”, es la materia que siempre acompañará a todo taller.

Su Orientación

Fabio Cruz, en su clase de observación (editada en el sitio de la escuela), distingue 3 momentos, precedidos todos ellos –o detonados, más bien– por un encargo de un externo, de un otro, una solicitud que abre una ocasión. Estos momentos son:
  1. El tiempo de la observación, que constituye el fundamento (el tiempo del croquis)
  2. La dilucidación del acto, que define la meta-actividad o función que engloba todo
  3. La disputa de la forma, de cómo se resuelve la(s) pieza(s) gráfica(s) dando cabida a este acto
El el caso del diseño gráfico, que aparece como una constante en todos los proyectos, es éste “sujeto a editar” es (casi siempre) una organización. Es para una organización –de personas, por supuesto– es que hay que construir una voz, un relato y un modo de relatar, un lenguaje visual, un modo de comunicar e interactuar, etc. Es una situación donde las piezas gráficas conocidas están estructuras desde una figura anterior que les da coherencia. Son la superficie de algo mayor, son la punta del iceberg. La observación del diseño debe dilucidar este acto mayor que implica una organización. El croquis de observación tradicional, que observa al habitar humano, los espacios y las luces en las que se inserta, etc; no es suficiente. Necesitamos más dimensiones, u otras dimensiones. Además de habitar la extensión común y corriente, habitamos una “extensión inextensa” como la que recorrió el poeta Dante en su travesía entre el infierno y el cielo. Se hace necesario un modo de ver, de registrar, de relacionar y de fijar que nos permita penetrar en esta realidad. En una suerte de triangulación matemática, similar al trabajo de los primeros cartógrafos que debían deducir un mapa a partir de observaciones parciales de la costa, mediciones estelares y temporales, de vientos y corrientes. Ese mapa –nunca antes visto– era sólo comparable a cómo nosotros, seres humanos, nos imaginabamos observados por un Dios que está en el cielo. ¿Cómo es este mapa? ¿Cómo ha de darse este juego “del pensar algebraico” para desencadenar otro lenguaje? Tampoco hay que olvidar que el sentido poético de la observación es elogiar, para poder entrar en la maravilla del ver por primera vez, para poder crear otra realidad. Es desde una mirada de elogio es que podemos realmente originar. Es por esto, que para nosotros, diseñadores gráficos embarcados por este encargo en la construcción de un sistema complejo de comunicación, que debe reconocer a la corporación cultural amereida con un planteamiento propio, con un patrimonio cultural y material (la Ciudad Abierta), con extensión natural (el parque eco-cultural), con su contexto urbano y legal; debemos tener una figura o imagen que nos permita desencadenar obras gráficas: imagen, arquitectura de contenidos, sitio web, sistema de señalética y regalo para quienes la visitan. Creo que la clave de esto puede estar en la pintura. Los cubistas o surrealistas (no lo se), en este ánimo de ver más allá, comenzaron un lenguaje de elogio y de invensión de la mirada. En este sentido, Heidegger nombra esta voluntad por acceder a esta verdad como aletheia, y para nosotros, dibujos para dilucidar. Este lenguaje de modelos articula el paso hacia la disputa de la forma.

Su forma

Ha de darse en el continuo diálogo entre la mente que abstae-decide y la mano que interpreta y ejecuta, en una constante iteración que va refinando y precisando la forma, alcanzando su justeza y alivianando su estructura. El taller es una organización, un órgano. Pero, para que opere como tal, debe compartir esta nueva observación, y por ello, se hace preciso que se constituya como lenguaje. Éste es el camino que ya emprendimos.

12 de Diciembre de 2013

El Diseño, o el bucle infinito

El diseño gráfico es completo –en el arco de su argumento– porque se basta de sí mismo para comunicar su relato. Digo que se basta de sí mismo porque se construye como una cifra, con sus imágenes, sus letras, su código, su discurso y su tiempo. La superficie contiene todas las claves que condensan y fijan el discurso en una cifra gráfica. Ejemplos de esto se encuentran en todas partes: afiches, revistas, envases, carteles, folletos, revistas, libros; incluso las artes gráficas –incluso la pintura– comparten esta naturaleza unidireccional de lo fijo. Y con “lo fijo” no quiero decir que sea cerrado, o restado en alguna medida. Tan solo quiero argumentar que en esta fianza de lo fijo descansa la potencia que tiene el lenguaje visual de hacer detonar, en el lector, toda la potencia de su discurso.

El diseñador recibe un argumento –o lo articula– para luego interpretarlo, darle espacio, darle forma, darle voz gráfica; materializa su palabra y su apariencia, le da un tempo, una demora. El diseño gráfico es, entonces, unidireccional y fijo, cada vez.

partial-loops

(1) discurso gráfico de lo fijo
(2) diálogo autor-lector / sistema-usuario
(3) participación reflexiva de los muchos que hacen emerger nuevos espacios. El autor/diseñador define las reglas de interacción. ¿Determinismo estructural cerrado o libertad abierta en constante expansión?… ¿nos preguntamos eso cuando diseñamos?

El diseño de interacción supone otra estructura discursiva. La forma digital –sabemos– no es fija sino que permanece en el flujo del diálogo. Trata de construir una simetría inicial entre:

  1. el discurso (voz del autor) y
  2. el lector que responde, que dice, que anota y que extiende este espacio (ya nunca más fijo).

Esta partida es simple. Primero lo fué con el hipertexto, donde la idea de continuidad del discurso autoral quedó suspendida y abierta por la voluntad del lector. Y ahora es la performatividad del algoritmo, cifrado como código, que es capaz de condicionar el espacio (como campo de posibilidades) y de hacer emerger desde un flujo abierto por la naturaleza (también abierta, por cierto) del diálogo entre lectores y discurso (sistema).

El espacio del algoritmo se volvió herramienta o medio de expresión: se volvió hoja en blanco. La colaboración en este espacio –ahora hoja en blanco– se abrió a los múltiples lectores que dialogaban entre sí. Nuevamente una asimetría, la de los muchos lectores (realmente muchos) y un solo autor, o voz anterior que invitaba. Claro que hay que reconocer que esta voz anterior siempre fue determinante, pues define y acota la naturaleza del espacio; es el convocante, el anfitrión que define los rangos de libertad. Pero –y aquí viene la pregunta– ¿es verdaderamente libertad o determinismo estructural? ¿existe sólo la belleza en el descontrol del desconocido o hay una belleza inatrapable capaz de hacer aparecer genuinamente lo original? ¿puede el autor-diseñador, como voz autorizada y autorizadora, desaparecer para dar paso al diálogo foráneo, anticipado sólo parcialmente por la propuesta de su juego, a las formas completamente inanticipables? y si el autor-diseñador se retira graciosamente, ¿quién toma el control?

Estas preguntas, aparentemente nuevas, son antiguas. Son las mismas preguntas que ha tenido desde siempre, por ejemplo, la arquitectura. Pero no me refiero aquí a la libertad de “la forma arquitectónica” sino a la libertad del que habita la obra, que si bien puede reconocer en ella una destinación, un acto, una función; puede ser y hacer en ella en completa libertad. El arte, a diferencia del diseño, abre preguntas. El diseño busca cumplir un encargo y dar solución dentro de ciertos límites conocidos. El arte, en cambio, como se funda los valores del artista y en su visión de mundo, construye una nueva realidad para dar cabida a esta visión desde la propia libertad que se logra conquistar.

Este debate, aparentemente teórico y filosófico nos compete mucho más de lo que quisiéramos: en nuestra constitución y nuestras leyes, en nuestros gobiernos y democracias que dicen provenir (o querer interpretar recursivamente) la voz de nosotros mismos. Estos sistemas enteramente diseñados operan como verdaderos algoritmos que quieren condicionar la naturaleza de lo que ellos emerge. Creo que el verdadero poder no está en quienes tomas las desiciones puntuales, sino en quienes definen esos diseños/algoritmos.

Debemos aún persiguir la utopía de querer orquestar las múltiples voces y diálogos de la polis desde el diseño. Es la utopía de construir un nosotros permanente, así como los que piden una asamblea constituyente para definir una nueva constitución1.

Un diseño de esta naturaleza es sin relato, sólo estructura y reglas de diálogo (un algoritmo). Aquí ¿Existe la libertad pura, anterior a estar contenida? ¿o sólo podemos hablar de ella dentro del determinismo estructural que la contiene? ¿qué significa, en este contexto, traer el desconocido? El desconocido, así como la belleza, emerge en el diálogo, o mejor dicho, en todas las posibilidades contenidas que son capaces de articularse en una consistencia. Es la palabra, en sus múltiples formatos y géneros, en su realidad de lenguaje reflexivo, que es capaz de volverse sobre sí misma y re-configurarse para traer lo nuevo, esta vez, la poiesis de ese esquivo nosotros2.

Notas
  1. Celebro el espíritu de diálogo y representación detrás de la idea de una convocatoria de este tipo pero tiemblo al pensar qué demonios se entiende por asamblea constituyente y en lo ineficaz y frustrante que puede llegar a ser. Las reglas de eso aún no están diseñadas como para que podamos leer un movimiento de bandada en un enjample incoherente, como los estorninos []
  2. Este texto está adaptado del prólogo que escribí para el proyecto Baobab []