Etiqueta: visualización

Números Modulares

Posted on by Herbert

Se trata más bien de una curiosidad o divertimento matemático, en el mismo espíritu del modulador de números primos: ¿podemos ver patrones en las tablas de multiplicar?

Una forma bastante interesante de representar esta operación es de forma modular, es decir, en la multiplicación 10 × 2:

El primer factor (10) define la cantidad de puntos, es decir el módulo para todo n ∈ ℕ y el segundo constituye la forma para trazar el producto: Si 1 × 2 es 2, una línea unirá el 1 y el 2; 2 × 2 = 4, se unirá el 2 y el 4, etc.

Esta forma modular de representar los productos arroja regularidades muy interesantes. Por ejemplo, si aumento el número del módulo, pero mantengo el multiplicador, es decir de 10 × 2 paso a 1000 × 2 aparece la siguiente figura:

Cardioide, llamado así por su semejanza a un corazón. Esta figura emerge al multiplicar ×2 independiente del módulo (mayor el módulo, mayor resolución de la figura). Al multiplicar por ×3 aparecerá un Nefroide (un riñón).

La figura del cardioide aparece cotidianamente en la taza, cuando la luz del sol se refleja en las caras internas (curvas) y se proyectan sobre la superficie del café.

Un aspecto significativo resulta ser que el módulo constituye también la cantidad de figuras posibles de obtener, ya que comenzarán a repetirse cíclicamente. Es decir, en 9 × n tendré sólo 9 figuras, independiente del n. Como demostración, te invito a comprobarlo tú mismo con esta herramienta.

Entonces, en el ánimo de visualizar los patrones que pueden emerger a partir de estas figuras únicas, las dispuse en una grilla donde horizontalmente voy aumentando el módulo y verticalmente el multiplicador:

Grilla para visualizar las tablas de multiplicar a partir de las figuras únicas. Aparecen patrones en diferentes ángulos diagonales. Acá un PDF en alta resolución.

La primera fila corresponde a la multiplicación por cero, donde todas las líneas se conectan con ese punto1; la segunda fila (×1) corresponde a la identidad, la tercera fila (×2) va revelando el cardioide, la cuarta fila (×3) el nefroide, etc.

La figura describe un triángulo2 porque verticalmente las figuras se repiten en la misma secuencia y orden, tanto positivos como negativos3.

Son interesantes los patrones que se identifican en diversos ángulos de la diagonal, por ejemplo, los que llamo “productos ortogonales”: 2 × 0; 4 × 1; 6 × 2; 8 × 3; 10 × 4 … 2n + 2 × n

¿Viste algo interesante? gracias por tus comentarios

Descarga: Poster (76×75)

  1. Estas figuras están rotadas en 90 grados respecto al ejemplo inicial, para efectos de ubicar el cero en la parte superior del círculo [↩]
  2. Como los números triangulares [↩]
  3. Obviamente no puedo hacer lo mismo con el módulo, ya que no existe la forma negativa de representarlo [↩]

Pequeños Múltiples

Posted on by Herbert

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

CitiPulse model;
Petal current;

color[] c = {
#D63F09,
#FFA94D,
#FAE203,
#8FCB35,
#00828E,
#00426E,
#A64DFF,
#EB12EB,
#AE1D04,
#FF8408,
#DECC02,
#7EB331,
#0F8CA5,
#135589,
#8A27EC,
#CA0DCA,
#870101,
#C46200,
#B8AE01,
#6C9A2E,
#2096C0,
#2D6EAD,
#6C00D7,
#A809A8,
#690808,
#984805,
#929100,
#59802A,
#31A1DA,
#4688D1,
#4C0098,
#860486
};
String file;

float MAX = 120; // radio máximo del pétalo
float offset = 5;
color currentCol = color(255);

void setup() {
int side = 350;
size(350, 350);
smooth();
noStroke();
model = new CitiPulse(width/2, height/2);
populateCitiPulse(model);
current = new Petal();
file = ""+year()+month()+day()+hour()+minute()+".mov";
}

/**
*
* alfa + PI
* beta = ––––------
* 2
*
*
*
* MAX * sin(alfa/2)
* radio = -----------------
* sin(alfa/2) + 1
*
*/

void draw() {
background(255);
noFill();
stroke(#E3E3E3);
strokeWeight(1);
ellipse(width/2, height/2, MAX*2 + offset*2, MAX*2 + offset*2);
model.draw();
}

void keyPressed() {
if (key == 'v') {
for (int i = 0; i < model.petal.length; i++) {
println("petal["+i+"].value = "+model.petal[i].value);
}
println("---------------------------------------------");
}
if (key == ' ') {
populateCitiPulse(model);
}
if (key == 'x') {
exit();
}
if (key == 's') {
saveFrame("img/citipulse-#####.png");
}
}

void mouseMoved() {
currentCol = get(mouseX, mouseY);
}

void mousePressed() {
println(current.name+", cuyo valor es "+current.value);
}

class CitiPulse {

float x, y;
Petal[] petal;

CitiPulse(float x, float y) {
this.x = x;
this.y = y;
}

void draw() {
float offset = 5;
for (int i = 0; i < petal.length; i++) {
pushMatrix();
{
translate(x, y);
rotate(petal[i].alfa * (float)i);
petal[i].be();
}
popMatrix();
}
}
}

void populateCitiPulse(CitiPulse mod) {

int num = round(random(3, 10)); // número de pétalos o términos de primer nivel

float alfa = TWO_PI / (float)num;
float beta = (alfa + PI) / 2;

float radio = (MAX * sin(alfa/2))/(1 + sin(alfa/2));
float ac = MAX - radio;

println(" num = "+num);
println(" alfa = "+alfa+"\t ("+degrees(alfa)+" grados)");
println(" beta = "+beta);
println("radio = "+radio);
float result = radio + ac;
println(" AC = "+ac+"\t radio + AC = "+result);
println("---------------------------------------------");

mod.petal = new Petal[num];

for (int i = 0; i < mod.petal.length; i++) {
mod.petal[i] = new Petal();
mod.petal[i].alfa = alfa;
mod.petal[i].beta = beta;
mod.petal[i].r = radio;
mod.petal[i].ac = ac;
mod.petal[i].x = mod.x;
mod.petal[i].y = mod.y;

// lo único de cada pétalo
mod.petal[i].value = random(.2, 1);
mod.petal[i].name = "Elemento "+i;
mod.petal[i].c = c[i];
}
}

class Petal {
float x, y;
color c, co; // color & color over
float value;
String name;
int seed;

/* los valores a continuación son comunes para todos los pétalos */
float alfa, beta;
float r; // radio
float ac; // distancia desde el centro de la flor al centro del círculo

Petal() {
seed = round(random(99999));
}

Petal(float x, float y, float value, color col, String name) {
this.x = x;
this.y = y;
this.value = value;
this.name = name;
c = col;
}

void be() {
noiseSeed(seed);
value = noise(seed + (float)millis()/6000);

if (over(currentCol)) {
current = this;
co = color(red(c)-25, green(c)-25, blue(c)-25);
draw(0, 0, r + offset, co);
}

draw(offset, 0, r, c);

}

boolean over(color col) {
if (c == col) {
return true;
}
else {
return false;
}
}

void draw(float ox, float oy, float radio, color col) {
fill(col);
noStroke();
pushMatrix();
{
translate(ox, oy);
beginShape();
vertex(0, 0);

for (float t = -beta; t <= beta; t+=.1) {

float xpos = value*cos(t)*radio;
float ypos = value*sin(t)*radio;

vertex(ac*value + abs(r-radio) + xpos, ypos);
}
endShape(CLOSE);
}
popMatrix();
}
}

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

  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. [↩]

Civilscope

Posted on by Herbert

Civilscope Logo

La idea de este proyecto es mostrar de manera fácil y ní­tida las capas y fronteras cí­vicas en las cuales estamos inmersos. Civilscope es un servicio web que, a partir de una dirección determinada, mapea todas las divisiones, distritos y circunscripciones que la rigen. Este servicio funciona solamente para la gente de Chicago porque opera sobre la API de Civic Footprint, una iniciativa del Center for Neighborhood Technology de Chicago. Pienso que tener algo así­ en Chile serí­a buení­simo para poder transparentar en algo las oscuras y arcanas fronteras polí­ticas que nos gobiernan. En parte por eso me entusiasmé cuando Simon me propuso la idea; para poderlo mostrar como ejemplo y poder desarrollar algo así­ para nosotros. De hecho, nuestra estructura es bastante más sencilla, con menos capas y jerarquí­as traslapadas. Particularmente en Chicago existen distritos verdaderamente extraí±os en cuanto figura. Esto se debe a una práctica de distritage llamada “gerrymandering”. En el sistema norteamericano los votantes son divididos por distritos. Lo que cuenta al final no es la cantidad total de votos sino la cantidad de distritos en los que tal o cual candidato ha ganado. Esto lleva a practicar estrategias de “pack & crack”, es decir, agrupar a la oposición y concentrarla lo más posible en un distrito para que arrase, pero para que pierda por poco en todas las demás. Esta práctica de redibujar los distritos ocurre cada vez que hay alternancia en el poder, para perjudicar a la opsición. Cada dí­a esta operación se vuelve más sofisticada ya que se ocupan programas computacionales para redibujar los distritos basados en los registros de votantes. Es por eso que herramientas como esta permiten transparentar en algo estas prácticas. http://www.civilscope.org/