Pequeños Múltiples

Había una vez una empresa llamada CitiSent, donde una de las primeras ideas que tuvimos para ofrecer servicios de visualización se refería a comprender y comparar la calidad de vida de las distintas ciudades del país1.

Para construir esta visualización desarrollamos un tesauro2 de 6 grandes temas urbanos que generaban un indicador de percepción a partir del análisis de texto (sentiment analysis) en redes sociales. Cada uno de estos indicadores determina el tamaño de un pétalo, debidamente codificado con un color. La idea es que este sistema de representar (y condensar) la imformación permite comparar muy eficientemente las diferencias y contrastes entre los datos (las disparidades). Esta modalidad se denomina pequenos múltiples (small multiples). Esto es similar a las caras de Chernoff.

show code

<br />
CitiPulse model;<br />
Petal current;</p>
<p>color[] c = {<br />
#D63F09,<br />
#FFA94D,<br />
#FAE203,<br />
#8FCB35,<br />
#00828E,<br />
#00426E,<br />
#A64DFF,<br />
#EB12EB,<br />
#AE1D04,<br />
#FF8408,<br />
#DECC02,<br />
#7EB331,<br />
#0F8CA5,<br />
#135589,<br />
#8A27EC,<br />
#CA0DCA,<br />
#870101,<br />
#C46200,<br />
#B8AE01,<br />
#6C9A2E,<br />
#2096C0,<br />
#2D6EAD,<br />
#6C00D7,<br />
#A809A8,<br />
#690808,<br />
#984805,<br />
#929100,<br />
#59802A,<br />
#31A1DA,<br />
#4688D1,<br />
#4C0098,<br />
#860486<br />
};<br />
String file;</p>
<p>float MAX = 120; // radio máximo del pétalo<br />
float offset = 5;<br />
color currentCol = color(255);</p>
<p>void setup() {<br />
int side = 350;<br />
size(350, 350);<br />
smooth();<br />
noStroke();<br />
model = new CitiPulse(width/2, height/2);<br />
populateCitiPulse(model);<br />
current = new Petal();<br />
file = ""+year()+month()+day()+hour()+minute()+".mov";<br />
}</p>
<p>/**<br />
*<br />
* alfa + PI<br />
* beta = ––––------<br />
* 2<br />
*<br />
*<br />
*<br />
* MAX * sin(alfa/2)<br />
* radio = -----------------<br />
* sin(alfa/2) + 1<br />
*<br />
*/</p>
<p>void draw() {<br />
background(255);<br />
noFill();<br />
stroke(#E3E3E3);<br />
strokeWeight(1);<br />
ellipse(width/2, height/2, MAX*2 + offset*2, MAX*2 + offset*2);<br />
model.draw();<br />
}</p>
<p>void keyPressed() {<br />
if (key == 'v') {<br />
for (int i = 0; i &lt; model.petal.length; i++) {<br />
println("petal["+i+"].value = "+model.petal[i].value);<br />
}<br />
println("---------------------------------------------");<br />
}<br />
if (key == ' ') {<br />
populateCitiPulse(model);<br />
}<br />
if (key == 'x') {<br />
exit();<br />
}<br />
if (key == 's') {<br />
saveFrame("img/citipulse-#####.png");<br />
}<br />
}</p>
<p>void mouseMoved() {<br />
currentCol = get(mouseX, mouseY);<br />
}</p>
<p>void mousePressed() {<br />
println(current.name+", cuyo valor es "+current.value);<br />
}</p>
<p>class CitiPulse {</p>
<p>float x, y;<br />
Petal[] petal;</p>
<p>CitiPulse(float x, float y) {<br />
this.x = x;<br />
this.y = y;<br />
}</p>
<p>void draw() {<br />
float offset = 5;<br />
for (int i = 0; i &lt; petal.length; i++) {<br />
pushMatrix();<br />
{<br />
translate(x, y);<br />
rotate(petal[i].alfa * (float)i);<br />
petal[i].be();<br />
}<br />
popMatrix();<br />
}<br />
}<br />
}</p>
<p>void populateCitiPulse(CitiPulse mod) {</p>
<p>int num = round(random(3, 10)); // número de pétalos o términos de primer nivel</p>
<p>float alfa = TWO_PI / (float)num;<br />
float beta = (alfa + PI) / 2;</p>
<p>float radio = (MAX * sin(alfa/2))/(1 + sin(alfa/2));<br />
float ac = MAX - radio;</p>
<p>println(" num = "+num);<br />
println(" alfa = "+alfa+"\t ("+degrees(alfa)+" grados)");<br />
println(" beta = "+beta);<br />
println("radio = "+radio);<br />
float result = radio + ac;<br />
println(" AC = "+ac+"\t radio + AC = "+result);<br />
println("---------------------------------------------");</p>
<p>mod.petal = new Petal[num];</p>
<p>for (int i = 0; i &lt; mod.petal.length; i++) {<br />
mod.petal[i] = new Petal();<br />
mod.petal[i].alfa = alfa;<br />
mod.petal[i].beta = beta;<br />
mod.petal[i].r = radio;<br />
mod.petal[i].ac = ac;<br />
mod.petal[i].x = mod.x;<br />
mod.petal[i].y = mod.y;</p>
<p>// lo único de cada pétalo<br />
mod.petal[i].value = random(.2, 1);<br />
mod.petal[i].name = "Elemento "+i;<br />
mod.petal[i].c = c[i];<br />
}<br />
}</p>
<p>class Petal {<br />
float x, y;<br />
color c, co; // color &amp; color over<br />
float value;<br />
String name;<br />
int seed;</p>
<p>/* los valores a continuación son comunes para todos los pétalos */<br />
float alfa, beta;<br />
float r; // radio<br />
float ac; // distancia desde el centro de la flor al centro del círculo</p>
<p>Petal() {<br />
seed = round(random(99999));<br />
}</p>
<p>Petal(float x, float y, float value, color col, String name) {<br />
this.x = x;<br />
this.y = y;<br />
this.value = value;<br />
this.name = name;<br />
c = col;<br />
}</p>
<p>void be() {<br />
noiseSeed(seed);<br />
value = noise(seed + (float)millis()/6000);</p>
<p>if (over(currentCol)) {<br />
current = this;<br />
co = color(red(c)-25, green(c)-25, blue(c)-25);<br />
draw(0, 0, r + offset, co);<br />
}</p>
<p>draw(offset, 0, r, c);</p>
<p>}</p>
<p>boolean over(color col) {<br />
if (c == col) {<br />
return true;<br />
}<br />
else {<br />
return false;<br />
}<br />
}</p>
<p>void draw(float ox, float oy, float radio, color col) {<br />
fill(col);<br />
noStroke();<br />
pushMatrix();<br />
{<br />
translate(ox, oy);<br />
beginShape();<br />
vertex(0, 0);</p>
<p>for (float t = -beta; t &lt;= beta; t+=.1) {</p>
<p>float xpos = value*cos(t)*radio;<br />
float ypos = value*sin(t)*radio;</p>
<p>vertex(ac*value + abs(r-radio) + xpos, ypos);<br />
}<br />
endShape(CLOSE);<br />
}<br />
popMatrix();<br />
}<br />
}</p>
<p>

Este ejemplo de la unidad de visualización puede ser regenerado al presionar ESPACIO, pero es preciso ganar foco sobre el elemento haciendo click sobre él

Notas
  1. a este servicio lo llamamos CitiPulse []
  2. Un tesaurio es un diccionario jerárquico de palabras. En el caso de Citipulse definimos 6 grandes categorías: Medioambiente, Movilidad, Entorno Urbano, Sociabilidad, Gobernanza y Economía Local y Oportunidades. Cada una de ella dividias, a su vez, en otras sub-categorías, hasta completar un vocabulario de alrededor de 500 palabras. []

Topologoscopio

En la utopía de la ciudad cívica (en ese espíritu de MediaFranca) más allá del espacio comprendido como la permanente y odiosa disputa, el espacio público se presenta como un símbolo, en la representación permanente de la escena pública (en el sentido teatral).

El espacio público de Valparaíso es un espacio en disputa, como el de tantas otras ciudades. Esta disputa se fija, en mayor o menor medida, en la forma arquitectónica, urbana y paisajística resultante que en su conjunto constituye la ciudad. Pero el espacio urbano es también, por definición, abierto y público: todos tenemos palabra y postura frente a este espacio en un divergencia creativa, expresión de las diversas voluntades y anhelos. Pero esta conversación es invisible y privada, alcanzando sólo la visibilidad producto de la controversia y la disputa.

Planteamos que el desafío urbano actual es recomponer el estatus simbólico del espacio público como “espacio para la representación”; constituyendo diversos hitos escenográficos para dar cabida esta conversación pública (agones), prefigurando la justa y necesaria convergencia que culmina en la forma construida de la ciudad, forma en constante transformación y ajuste. El arquetipo es el ágora griega o el foro romano, hoy ausentes en forma y función. Pero más gravemente, en espíritu. Topologoscopio entonces reúne a la conversación entre ciudadanos, su ciudad comtemplada y su palabra; todo esto en la iscripción de una escena urbana.

La palabra inscrita en el espacio público tiene una tradición de autoridad oficial, en opsición al grafitti; forma subrecticia y rebelde. La palabra espacial-espaciada viene a decir de aquello que debe permanecer para guardarse en la memoria colectiva. Apela al sentido de lo trascendente de la polis.

Aquí, la palabra intencionada puede quedar fija, (o fijada, al menos por un tiempo, en su cuota de permanencia borrada por el clamor de las otras voces, en una suerte de palimpsesto razonado).

Ficha Técnica:

Este proyecto corresponde al trabajo presentado por la e[ad] Escuela de Arquitectura y Diseño PUCV a la muestra “Work in Progress” realizada en la FADEU Facultad de Arquitectura y Estudios Urbanos PUC en abril de 2015.

Equipo

Juan Carlos Jeldes, Rodrigo Saavedra, Valentina Roco, Herbert Spencer

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

Á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á.

Pizarra

Uno de los problemas más frecuentes con que me topo al momento de hacer clases es la incompatibilidad entre el proyector y la pizarra. Cada día, y con más frecuencia, se requiere de un proyector (datashow) para presentar, demostrar código, traer referentes, indicar procedimientos, revisar casos, etc. El proyector ya es –digámoslo así– un commodity indispensable y que se echa de menos con facilidad.

Pero la dimensión que trae el dibujo o el acto de dibujar en la pizarra, en paralelo y reforzando el discurso es fundamental. Sobre todo en diseño. Mostrar un esquema de un Keynote no es igual a dibujarlo. Gracias a DrawSomething hemos aprendido que el proceso del dibujo dice tanto como el dibujo mismo, la secuencia va desplegando el significado porque tiene su propio discurso.

La iluminación tampoco ayuda: el proyector requiere de una luz atenuada, la pizarra, luz incidente (sobre todo si es negra).

Desarrollé, para el curso Imagen Escrita una aplicación elemental en Processing para tener una pizarra proyectable. Esta aplicación es a su vez, la base para desarrollar herramientas aumentadas de dibujo más complejas.

Les comparto esta aplciación porque últimamente me ha servido mucho, incluso en reuniones de diseño, para discutir wireframes, esquemas y demases. Espero que les sirva.

Instrucciones del teclado

  • (m) – cambia de pizarrón negro a pizarra blanca
  • (z) – deshace el último trazo. Se puede usar iterativamente hasta que no quede ninguno.
  • (ESPACIO) – borra todo
  • (s) graba la pizarra a una imagen en la carpeta ‘img’ relativa a la ruta de la aplicación

Actualización: El programa de la Pizarra se encuentra disponible para descargar en Github, entre las mejoras: ahora se pueden hacer líneas rectas con SHIFT y tiene compatibilidad para tablets.

Mesh Network

Esta ilustración fue generada para explicar el funcionamiento de una red enmallada (mesh network) en cuanto figura de distribución y conexión entre nodos. La aplicación práctica de esta red fue discutida en el post anterior, describiendo la necesidad de una arquitectura de red resistente a cataclismos como el pasado terremoto y donde todos los nodos aportan, yendo más allá de ser meros clientes. Una red pública es aquella donde cada participante expande su alcance por el simple hecho de pertenecer.

show code

<br />
void setup() {<br />
  size(500, 500);<br />
  NODES = new ArrayList();<br />
  for (int i = 0; i < numNodes; i++) {
    Node n = new Node(random(margin, width-margin), random(margin, height-margin));
    if (random(1) >0.25) {<br />
      n.device = true;<br />
    } else {<br />
      n.r *= 1.5;<br />
    }<br />
    NODES.add(n);<br />
  }<br />
  newNode = false;<br />
  smooth();<br />
}</p>
<p>void draw() {<br />
  background(255);<br />
  if (newNode) {<br />
    NODES.add(current);<br />
    newNode = false;<br />
  }</p>
<p>  for (int i = 0; i < NODES.size (); i++) {
    Node n = (Node)NODES.get(i);
    n.calc();
    n.renderLinks();
  }

  for (int i = 0; i < NODES.size (); i++) {
    Node n = (Node)NODES.get(i);
    n.calc();
    if (n.device) {
      n.renderDevice();
    } else {
      n.renderNode();
    }
  }
}

class Node {
  int id; // the ID of this node
  float x, y; // position
  float r; // radius
  float signal; // ammount of signal
  boolean on; // is it on?
  boolean over; // is the mouse over this one?
  ArrayList nodes; // list of nodes that are connected to this one
  boolean device = false;
  float angle, step;

  Node(float X, float Y) {
    count++;
    id = count;
    x = X;
    y = Y;
    signal = 0;
    on = true;
    nodes = new ArrayList();
    r = 7.0;
    angle = random(TWO_PI);
    step = random(1);
  }

  void renderNode() {
    if (over) {
      noFill();
      stroke(linkColor);
      strokeWeight(.50);
      ellipse(x, y, nodeScope, nodeScope);
      fill(nodeFillColor);
      stroke(nodeStrokeColor);
    } else {
      fill(nodeFillColor, 150);
      stroke(nodeStrokeColor, 50);
    }
    if (on) {
      strokeWeight(3);
    } else {
      strokeWeight(0.5);
    }
    ellipse(x, y, r, r);
  }

  void renderDevice() {
    move();
    if (over) {
      noFill();
      stroke(linkColor);
      strokeWeight(.5);
      ellipse(x, y, nodeScope, nodeScope);
      fill(deviceFillColor);
      stroke(deviceStrokeColor);
    } else {
      fill(deviceFillColor, 150);
      stroke(deviceStrokeColor, 150);
    }
    if (on) {
      strokeWeight(1);
    } else {
      noStroke();
    }
    ellipse(x, y, r, r);
  }

  void renderLinks() {
    if (on) {
      stroke(linkColor, 100);
      for (int i = 0; i < nodes.size (); i++) {
        Node n = (Node)nodes.get(i);
        float d = dist(x, y, n.x, n.y);
        float sw = map(d, r, nodeScope, 5, 0.1);
        sw = constrain(sw, 0.01, 20);
        strokeWeight(sw);
        line(x, y, n.x, n.y);
      }
    }
  }

  void calc() {
    nodes.clear();
    for (int i = 0; i < NODES.size (); i++) {
      Node n = (Node)NODES.get(i);
      if (id != n.id) {
        float nodeDist = dist(x, y, n.x, n.y);
        if (nodeDist <= nodeScope &#038;&#038; n.on) {
          nodes.add(n);
        }
      }
    }
  }

  void move() {
    noiseSeed(id);
    angle += (noise((float)millis()/100.0) - .5) * HALF_PI;

    x += cos(angle)*step;
    y += sin(angle)*step;
  }
}

boolean OVER;
ArrayList NODES;
int numNodes = 50;
int count = 0;
float margin = 100;
float nodeScope = 60;
boolean newNode;
Node current;

color nodeFillColor = #F06E1D;
color nodeStrokeColor = #8E3E0B;
color linkColor = color(86, 115, 124, 80);
color deviceFillColor = #1FCCFF;
color deviceStrokeColor = #02A8D8;

void keyPressed() {
  if (key == 'a') {
    nodeScope += 5;
    println("node scope = "+nodeScope);
  }
  if (key == 'z') {
    nodeScope -= 5;
    println("node scope = "+nodeScope);
  }
  if (key == ' ') {
    for (int i = 0; i < NODES.size (); i++) {
      Node n = (Node)NODES.get(i);
      n.on = !n.on;
    }
  }
  if (key == 'x') {
    setup();
  }
  nodeScope = constrain(nodeScope, 5, width);
}

void mouseMoved() {
  float d;
  for (int i = 0; i < NODES.size (); i++) { 
    Node n = (Node)NODES.get(i); 
    d = dist(mouseX, mouseY, n.x, n.y); 
    if (n.r*1.5 >= d) {<br />
      OVER = true;<br />
      n.over = true;<br />
      current = n;<br />
    } else {<br />
      OVER = false;<br />
      n.over = false;<br />
    }<br />
  }<br />
}</p>
<p>void mouseDragged() {<br />
  if (OVER) {<br />
    if (current.over) {<br />
      current.x = mouseX;<br />
      current.y = mouseY;<br />
    }<br />
  }<br />
}</p>
<p>void mouseReleased() {<br />
  if (current.over && mouseButton==RIGHT) {<br />
    current.on = !current.on;<br />
  }<br />
}<br />

Cómo funciona

  • arrastre nodos para reconfigurar la red
  • teclas a y z modifican el alcance de cada nodo
  • botón derecho sobre el nodo lo enciende o apaga
  • tecla i sirve para invertir encendido/apagado de todos los nodos
  • x regenera la distribución de nodos

Espirales

Estos días no he hecho nada porque me la he pasado en puras reuniones. Mientras escucho, dibujo espirales en mi cuaderno y veo como los pequeños errores, engrosamientos y disminuciones de los espacios se acumulan, amplifican o suavizan.

Veo como las familias de espirales se multiplican, cruzan y entrelazan. Tal vez así la sensación de no hacer nada desaparezca.