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

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

void draw() {
  background(255);
  if (newNode) {
    NODES.add(current);
    newNode = false;
  }

  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) {
      OVER = true;
      n.over = true;
      current = n;
    } else {
      OVER = false;
      n.over = false;
    }
  }
}

void mouseDragged() {
  if (OVER) {
    if (current.over) {
      current.x = mouseX;
      current.y = mouseY;
    }
  }
}

void mouseReleased() {
  if (current.over && mouseButton==RIGHT) {
    current.on = !current.on;
  }
}

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

Manejando la Complejidad

Entre Ciencia y Arte hay un puente que está hecho por el Diseño. Desde la poética de la creación a la retórica de la razón. Sin embargo, ese paso nunca se nos ha mostrado claramente ni se pueden dividir las aguas para proponer un Diseño “más artístico” o “más científico”. Por lo menos, no de un modo en que siga siendo buen Diseño. Desde un punto de vista bastante peculiar, el diseñador Tony Dunne profesor de Design Interactions at the RCA, aborda la pedagogía del Diseño desde una postura comprometida con la responsabilidad social. Pero no lo hace un el sentido convensional sino más bien instaura el diseño como la materialización de un tema para el debate. Se trata de intervenir en problemáticas o insterticios —normalmente asociados a tecnologías  futuras— que resultan difíciles de plantear y discutir, debido a la complejidad de los mismos. Él “va río arriba” en términos especulativos y genera productos hipotéticos basados en tecnologías (biología sintética, manipulación genética o similares) para volver tangibles los problemas y generar el debate antes de que estos productos existan efectivamente, o —como él lo pone— que “pasen del laboratorio al mercado”; para saber si realmente queremos cosas así o no. Si las cosas son tangibles, entonces son debatibles; volviendo concreto lo fragmentado y extañamente efímero. Se trata de pensar un Diseño que palntee preguntas y no sólo respuestas, como estamos acostumbrados. Para más detalles de design for debate, basta mirar algunas notas de la conferencia del año pasado Innovationsforum Interaktionsdesign efectuada en Potsdam: Anthony Dunne // Dunne & Raby from Innovationsforum on Vimeo. La idea de que el Diseño puede jugar un rol crucial en el manejo de estas situaciones complejas es difícilmente novedoso pero podemos ver un gran potencial en la idea de diseñar “objetos controversiales” que sean absolutamente verosímiles, que aborden necesidades reales, que sean productivamente viables y que a la vez, sean capaces de generar un debate en temas cruciales y de interés público. Me gusta este punto de vista porque, además, revierte la dinámica tradicional del tecnodeterminismo donde el diseño se ocupa de construir aplicaciones a tecnologías ya desarrolladas y no tiene voz ni voto en decidir si se trata realmente de algo que queremos o no.

MediaFranca, parte 2


MediaFranca de Herbert Spencer en Vimeo. MediaFranca consiste en una plataforma para dispositivos móbiles que permite a los usuarios postear y atachar contenidos en el espacio fí­sico. La idea es construir un sistema que conecte a personas con lugares y con temas de interés social (issues) mediante un diáogo simétrico y democrático. Esta plataforma intenta salvar la distancia entre la conversación mediada digitalmente y la conversación cara a cara, promoviendo el paso de la interacción digital a la fí­sica, desplegando palabra en acción, y constituyendo así­ herramientas para la participación ciudadana. Dentro de las caracterí­sticas más importantes del sistema podemos mencionar:
  • Interfaz fotográfica de AR (Augmented Reality) que permite examinar y atachar contenidos al entorno inmediato
  • Sistema de notificación por hebras de conversación (conversation threads) suscritas
  • filtración de información por proximidad o relevancia (dentro de mi red social o lo relevante en el sentido democrático de la palabra), esto tiene que ver con la escalabilidad
  • uso de microformats para establecer distintos modos o plantillas para los “posts”, definiento el tipo de interacción, condición o medio del mensaje implí­cito. Esto apunta a la maleabilidad del sistema y de cómo los argumentos conforman los formatos que los contienen y no al revés.
Este video muestra someramente 2 escenarios de uso. Creo que lo más importante que plantea este proyecto es pensar el diseño de interacción como un oficio que debe velar por la sustentabilidad social de los medios de comunicación. MediaFranca permite la coordinación directa entre las personas, permite el afloramiento de discursos emergentes y promueve la desintermediación cí­vica. En este sentido, intenta de ser una “herramienta convivial” como dirí­a Ivan Illich. Para los que quieran leer más de este proyecto, pueden acceder a la documentación completa.

MediaFranca, parte 1

MediaFranca Logo

MediaFranca es el projecto de investigación que realizo como parte del programa MDes Interaction Design en CMU. Este projecto consta de dos partes: una tesis escrita y un proyecto de investigación y desarrollo (hasta la fase de prototipo) los cuales he decidio coordinar bajo una sola pregunta. La pregunta que inicia este proyecto que surge de la siguiente paradoja:

conectividad ≠ colectividad.

Existen muchos estudios, sobre todo en las áreas de la sociologí­a y las ciencias económicas, dedicadas a entender por qué, siendo que las economí­as occidentales muestran í­ndices favorables a niveles macroeconómicos, también reflejan sí­ntomas de sociedades desconectadas y enfermas. La gente, a pesar de tener mayor acceso a educación, salud, transporte; pese a que ha aumentado su nivel de vida y capacidad de consumo en general, parecera que está perdiendo la capacidad (y la disponibilidad) para involucrarse en temas relevantes de interés común. La gente en general, muestra mayores niveles de desconección, nihilismo y falta de confianza en el poder del grupo como unidad primordial para generar cambios polí­ticos y sociales.Las tecnologí­as de la información (TIs) están permanentemente ofreciendo nuevos servicios para conectar a las personas: plataformas colaborativas de todo tipo, blogs, listas de interés, foros para comunidades especí­ficas, comunicación sincrónica de audio y video, etc. Pero a pesar de la creciente disponibilidad de tecnologí­a con potencial social, la gente se agrupa en pequeños archipiélagos desconectados; individualmente cada cual pertenece a una combinación única de grupos, lo que nos vuelve cognitivamente participando de una realidad única y personal. La Web, como construcción de un registro social común, es percibida de tantas formas como personas hay en torno a ella. Lejos de buscar una proposición normativa al diseño de aplicaciones sociales en el contexto de la Web, lo que busco es establecer un criterio para acceder al diseño de plataformas que permitan la conversación simétrica entre pares. MediaFranca Poster PDF (inglés).