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

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.

Partituras de Interacción

Este lenguaje visual propone un sistema de notación gráfica para formalizar los flujos de interacción en una plataforma o servicio digital.

Descargar

Estos archivos están bajo licencia Creative Commons Atribución-Licenciar Igual 2.0 Chile desarrollado en la e[ad] Escuela de Arquitectura y Diseño por Katherine Exss (2007-2008) y Nicole Dupré (2008) como proyecto de título de Diseño Gráfico.

Update: La última versión de las partituras se encuentra en Github.

Introducción

La complejidad de un proyecto de desarrollo Web requiere de una metodología escalonada que normalmente es abordada por un equipo multidisciplinario. Dentro de este proceso podemos distinguir:

  1. Estrategia
  2. Investigación de usuarios
  3. Definición de arquitectura de información
  4. Definición de interacción
  5. Diseño de interfaz
  6. Producción
  7. Testeo

A lo largo de este proceso, los lenguajes de representación y formalización (mapas de navegación, wireframes, esquemas de datos, diagramas de flujo, etc.) van marcando cada etapa pero carecemos de un sistema que permita transversalizar el producto final: la experiencia del usuario.

Este lenguaje propone un sistema de notación que pueda acompañar el proyecto desde la etapa de estrategia (alto grado de abstracción) hasta la etapa final de implementación en código (alto grado de especificidad), permitiendo a cada actor del proyecto (estrategas, diseñadores y programadores) comprender el total y cuidar el cumplimiento de la visión original. Se trata de un sistema que permite coreografiar y orquestar cuidadamente el díagolo en continuidad entre la persona y el servicio.

Cómo funciona

Las partituras de interacción descomponen el diálogo entre la persona y el servicio en 3 distintas capas horizontales:

  1. Acciones del usuario: la intensionalidad del usuario expresada en sus acciones concretas
    ———————— línea de interacción ————————
  2. Contacto directo: los elementos de interfaz que permiten al usuario ejecutar tales acciones
    ———————— línea de visibilidad ————————
  3. Proceso: las funciones que permiten al sistema (servidor) dar respuesta en el diálogo con el usuario

Cada módulo de interacción se compone como un compás en esta partitura. Estos compases (o patrones de interacción) permiten ensamblarse para verificar la lógica y la calidad de la experiencia en determinados escenarios de uso, así como detectar incosistencias o puntos críticos en el servicio.

Esperamos que esta herramienta se constituya como una ayuda para el desarrollo de aplicaciones y servicios para Internet, así como un facilitador del diálogo dentro de los equipos de diseño.

Este proyecto se encuentra en fase de evaluación, por lo tanto, para poder avanzar en su afinación es de vital contar con tus comentarios.

Links

Todo depende del cristal con que se mire

Cuando se preguntan por la realidad, los filósofos piensan en un conejo. ¿Cómo tomo al conejo? ¿Con mis manos o por la orejas? Es decir, es la realidad algo que efectivamente existe a priori y a pesar mío (por las orejas) ¿o se trata efectivamente de una construcción, de un artificio cognitivo que hago para articular el flujo de estímulos incoherentes?

Si llevamos esta pregunta al contexto de diseño para Internet podremos ver una gran cantidad de extensiones y de scripts para que el browser (Greasemonkey para Firefox) se comporte y despliegue la realidad de maneras especiales, filtradas, retocadas, hackeadas, etc:

  • Para resolver problemas de usabilidad y CSS en distintios sitios y servicios
  • Para eliminar la publicidad y desplegar nada o cualquier cosa que yo quiera en vez
  • Para permitirme bajar los videos que normalmente no se pueden bajar
  • Para eliminar los flash, entre muchos otros
Pero sin duda, una de las extensiones más interesantes para tener un “buen cristal para mirar” es KnowMore.
Ayer, mientras Jorge me mostraba el servicio de SpringWidgets, me salió esto; una notificación indicándome que la compañía responsable por la página (News Corp) tenía problemas de influencias políticas y otros problemas relacionados con la ética . Apple, por su lado, parece que tampoco lo está haciendo muy bien, como muchos inocentes creen.
Que bien nos haría tener algo así para fiscalizar colaborativamente a nuestras empresas e instituciones en Chile. Lo que soporta todo esto: una wiki.

Colisiones 2D – II

Cada vez que dos pelotas chochan, nace una tercera perlota en el lugar del impacto. Las pelotas nuevas pueden variar de tamaño y el color está determinado por él. Se puede observar que naturalmente las pelotas más pequeñas decantan al fondo.


El código lo tomé desde: processing.org/​learning/​topics/​bouncybubbles.html

Para vel el applet corriendo y bajar el código:
ead.pucv.cl/​processing/​2008/​spencer-herbert/​pelotas_emergentes/​index.html

(presionar ESPACIO para prender y apagar la visualización de colisiones)

Cast: Herbert Spencer

Tags: processing, collisions, simulation and 2D