Category Archives: Visualización

Visualización de datos geolocalizados con CartoDB (I)

Este post trata sobre la creación de mapas y la visualización de datos sobre los mismos usando una herramienta tan potente y gratuita como es CartoDB.

CartoDB es una web que, de forma gratuita (también tiene modalidades de pago con funcionalidades y recursos adicionales) permite crear mapas y agregar diferentes conjuntos de datos a los mismos. Posteriormente posee una serie de opciones de cusotmización para mostrar de forma visual esos datos. Estas son sus características fundamentales:

Ofrece una libreria de datos para ser usados de forma inmediata.
Permite cargar (y exportar) datos desde y a diferentes formatos.
Posee diferentes estilos de mapas.
Ofrece diferentes opciones de customización para visualizar los datos en el mapa, como aplicar diferentes estilos, añadir pop-ups con información, diferentes tipos de marcadores, diferentes formas de visualización, etc.
Permite publicar los mapas de forma sencilla y de diferentes maneras.

Los pasos que se presentan a continuación son una introducción muy básica y sencilla al uso de CartoDB para crear sencillos pero potentes visualizaciones de datos geolocalizados. Se pueden encontrar más tutoriales de este estilo en formato curso en esta web.

1. Crear una cuenta en CartoDB. Logarse. Acceder al dashboard

Una vez que hemos accedido a CartoDB, lo primero que podemos hacer es, o bien escoger uno de los múltiples datasets que podemos encontrar disponibles dentro de la misma web, o bien cargar uno que deseemos usar en algún formato compatible (por ejemplo en CSV). De momento vamos a usar uno de los disponibles en la web, más adelante podremos usar otros preparados por nosotros mismos.

2. Seleccionar el dataset

Desde el menú que se despliega en la parte superior derecha de nuestro dashboard podemos acceder a nuestros dataset. Una de las opciones de las que disponemos es acceder a la libreria de datos de CartoDB, desde Data library. Vamos a buscar un dataset cualquiera, en este caso seleccionaremos uno que se llama Twitter T3chfest, sobre los mensajes de Twitter enviados durante el evento T3chfest… Podemos buscar datasets por palabras claves usando el buscador de la parte superior izquierda (Search).

Selección de datasets

3. Crear el mapa

Clicamos sobre el dataset. Ahora podemos ir a la parte superior derecha, donde hay otros dos enlaces, Connect dataset y Create map. Podemos clicar sobre cualquiera de los dos, pero para ir más rapido clicamos directamente sobre Create map.

Menú del dashboard

Es entonces donde se inicializa un nuevo mapa con los datos seleccionados. Se abrirá una nueva vista con el mapa y los datos cargados por defecto.

Vista de mapa

4. Visualizar los datos

Aunque estemos viendo el mapa, podemos cambiar a la vista de datos facilmente para ver con que datos se va a trabajar. Aunque no es indispensable, si es recomendable saber de que datos se disponen y si estos están en los formatos correctos (numérico, texto, etc.). Para ello basta con clicar sobre la opcion de Data View de la parte superior de la vista de mapa.

Vista de datos

Podemos ordenar los datos o filtrarlos para una mejor visualización. Si el dataset es nuestro, también podriamos cambiar el tipo de dato de cada columna. En este caso disponemos de múltiples columnas con datos que visualizar. Vamos a ver si podemos mostrar una vista del número de twits que se produjeron en cada zona geográfica y visualizamos su evolución en el tiempo.

5. Configurar la visualización

Podemos configurar los datos que se mostrarán y la forma en la que se dibujará la visualización usando la herramienta wizards de la barra lateral derecha de la vista de mapa (la que aparece como un pequeño pincel). Seleccionar una u otra configuración irá en función de la información y la visualización que querramos crear.

Configuración de visualización

En un primer caso, vamos a mostrar donde hubo twits, cuantos hubo y los vamos a agrupar por idioma también. Para esto seleccionamos la visualización de tipo Category. La categoria será el idioma. Seleccionamos la columna del idioma (en este caso se llama twitter_la) en el combo correspondiente. Reducimos también el tamaño del marcador. Como nos salen varios idiomas, vamos a filtrar los datos. Nos quedamos solo con el idioma inglés (en) y español (es).

Filtro SQL

Para filtrar los datos seleccionamos la pestaña del filtro en la barra de herramientas. Seleccionamos la columna sobre la que filtramos y marcamos o desmarcamos sus posibles valores. También podemos editar el filtro en formato SQL en la pestaña de herramientas correspondiente.

Modificamos los colores y customizamos a nuestro gusto, por ejemplo añadiendo una leyenda con los codigos de idioma. Una vez que el mapa esta listo, podemos publicarlo. Pulsamos sobre el boton PUBLISH de la esquina superior derecha. Nos ofrece tres opciones de publicación. Como una URL sin más, con un iframe, embebido en nuestra web, o usando la API JavaScript de CartoDB. Simplemente copiamos la URL que nos ofrece en la primera opción para visualizar el mapa que hemos creado.

Mapa de idiomas

6. Animar mapas

Vamos a crear un segundo mapa, esta vez animado. En este caso la visualización escogida nos permitira hacer esto. Vamos a mostrar los twits que fueron apareciendo a lo largo del tiempo. Para ello reseteamos la vista para eliminar el filtro de datos anterior.

Escogemos otra visualización, en este caso la llamada “Torque“. Esta visualización muestra una barra de progreso sobre el mapa que avanza a lo largo de las fechas asociadas al dataset visualizado.

Otra configuración

Seleccionamos la columna “postedtime” como la columna de tiempo. Configuramos colores y otras opciones y estaria listo. Por utlimo cambiamos el estilo del mapa a algo más oscuro para que se visualicen mejor los datos. Lo hacemos accediendo al “Change basemap” que hay en la parte inferior izquierda. Y estaria listo, se puede testear o publicar tal y como está.

Mapa de twits

Como inicio para comenzar a crear mapas con CartoDB creo que puede ser suficiente con lo anterior. En próximos post incluiré otros temas relacionados con el uso de estilos (CSS), la creación de mapas con varias capas y el uso de mapas con la API JS de CartoDB.

Mapas interactivos y geovisualización con Unfolding

Un nuevo post sobre visualización de datos, esta vez aplicados a la geoinformación y la visualización de mapas interactivos.

En esta ocasión usaremos Unfolding, una libreria en Java basada en Processing (del cual ya hablamos en el anterior post) y de muy facil uso, aplicada en el desarrollo de mapas interactivos y visualización de datos con información geográfica.

El ejemplo que presentamos a contianución desarrolla una sencilla aplicación de escritorio en Java (con Java Swing) que muestra un mapa interactivo donde se marcan diferentes localizaciones que representan marcas de cervezas. Al hacer click sobre un marcador cualquiera, se muestra un pop-up con información adicional del marcador.

Asi que basicamente de lo que se trata es de:

Mostrar el mapa.
Colocar los marcadores sobre el mapa.
Implementar la interacción con los marcadores (mostrar el pop-up).

1. Mostrar el mapa

Como se ha mencionado con anterioridad, Unfolding está basado en Processing y usa parte de su API para realizar ciertas acciones. Para empezar usa el PApplet que ya vimos en Processing como punto de inicio de la aplicación. Además, usa el método setup() para inicializar la apliación y el método draw() para ejecutarla, así como otros métodos ya vistos para configurar e inicializar la vista principal.

Por otro lado, Unfolding ofrece diferentes proveedores de mapas a disposición del usuario. Cada uno tiene sus condiciones de uso y restricciones. En el ejemplo que se presenta, se usará OpenStreetMap, que es bastante flexible y solo limitado por la carga de uso, sin muchas más restricciones. Una vez inicializado el mapa, establecemos una posición de origen mediante sus coordenadas geográficas de latitud y longitud.

/**
 * Birra applet.
 *
 * @author lagarcia
 */
public class BirraApplet extends PApplet {
...
/**
     * @see processing.core.PApplet#setup()
     */
    @Override
    public void setup() {
        /* Set canvas size */
        size(800, 600);

        /* Set proxy settings, if needed */
        Properties systemSettings = System.getProperties();
        systemSettings.put("http.proxyHost", "proxy.YYYYY.es");
        systemSettings.put("http.proxyPort", "8080");
        systemSettings.put("http.proxyUser", "lagarcia");
        systemSettings.put("http.proxyPassword", "XXXXXXX");
        System.setProperties(systemSettings);

        /* Init map */
        birraMap = new UnfoldingMap(this, new OpenStreetMap.OpenStreetMapProvider());

        /* To basically interact with the map */
        MapUtils.createDefaultEventDispatcher(this, birraMap);

        /* Set origin */
        Location madridLocation = new Location(40.4f, -3.7f);
        birraMap.zoomAndPanTo(madridLocation, 6);

        /* Set restrictions */
        birraMap.setZoomRange(6, 8);
    }

    /**
     * @see processing.core.PApplet#draw()
     */
    @Override
    public void draw() {
        /* Draw map */
        birraMap.draw();
    }
... 
}

/**

* Birra applet.

* @author lagarcia

public class BirraApplet extends PApplet {

...

/**

* @see processing.core.PApplet#setup()

@Override

public void setup() {

/* Set canvas size */

size(800, 600);

/* Set proxy settings, if needed */

Properties systemSettings = System.getProperties();

systemSettings.put("http.proxyHost", "proxy.YYYYY.es");

systemSettings.put("http.proxyPort", "8080");

systemSettings.put("http.proxyUser", "lagarcia");

systemSettings.put("http.proxyPassword", "XXXXXXX");

System.setProperties(systemSettings);

/* Init map */

birraMap = new UnfoldingMap(this, new OpenStreetMap.OpenStreetMapProvider());

/* To basically interact with the map */

MapUtils.createDefaultEventDispatcher(this, birraMap);

/* Set origin */

Location madridLocation = new Location(40.4f, -3.7f);

birraMap.zoomAndPanTo(madridLocation, 6);

/* Set restrictions */

birraMap.setZoomRange(6, 8);

}

/**

* @see processing.core.PApplet#draw()

@Override

public void draw() {

/* Draw map */

birraMap.draw();

}

...

}

El resultado sería este:

2. Colocar los marcadores sobre el mapa

Una vez tenemos el mapa, podemos proceder a crear los marcadores con la información pertinente asociada a cada uno y situarlos sobre el mapa.

Para ello lo que vamos a hacer es cargar cierta información de un fichero. Esa información contiene la localización geográfica en la que se colocará el marcador (longitud y latitud), el nombre del marcador y los datos asociados al marcador que se mostrarán posteriormente mediante un pop-up interactivo. Estos son los datos:

# Cervezas artesanas de España

# Ciudad, latitud, longitud, cerveza1-cerveza2-cerveza3-cerveza4

Salamanca,41.0,-5.6,Malasombra-Lega-Bizarra-Helmantica

Madrid,40.4,-3.7,La Virgen-Cibeles-Maravillas

Asturias,43.32,-5.9,Caleya

Vamos por pasos:

Cargamos los datos en una lista interna de DTOs (beans):

/* Load data */
DataLoader dl = new DataLoader();
dl.loadData("data/birras.csv");

/* Load data */

DataLoader dl = new DataLoader();

dl.loadData("data/birras.csv");

Crear los marcadores:

/* Get markers */
List<BirraMarker> markers = dl.getBirraMarkers(loadImage("img/beer-icon.png"));

1 2	/* Get markers */ List<BirraMarker> markers = dl.getBirraMarkers(loadImage("img/beer-icon.png"));

/**
     * Get the markers list.
     *
     * @param imgMarker
     * @return
     */
    public List<BirraMarker> getBirraMarkers(PImage imgMarker) {
        List<BirraMarker> birraMarkers = new ArrayList<BirraMarker>();
        for (BirraTown bt : birras) {
            BirraMarker marker = new BirraMarker(bt, imgMarker);
            birraMarkers.add(marker);
        }
        return birraMarkers;
    }

/**

* Get the markers list.

* @param imgMarker

* @return

public List<BirraMarker> getBirraMarkers(PImage imgMarker) {

List<BirraMarker> birraMarkers = new ArrayList<BirraMarker>();

for (BirraTown bt : birras) {

BirraMarker marker = new BirraMarker(bt, imgMarker);

birraMarkers.add(marker);

}

return birraMarkers;

}

La clase BirraMarker se extiende de SimplePointMarker y tiene unos atributos específicos que el mapa usará para situar y dibujar el marcador sobre él, como el icono (PImage img). También tiene un método draw() que se invoca para dibujar el marcador. Ahí se puede indicar la posición en la que se quiere dibujar la imagen asociada al marcador. Por ejemplo:

/**
     * @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)
     */
    @Override
    public void draw(PGraphics pg, float x, float y) {
        pg.pushStyle();
        pg.pushMatrix();
        pg.imageMode(PConstants.CORNER);
        // The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.
        pg.image(img, x - (img.width / 2), y - (img.width / 2));
        pg.popMatrix();
        pg.popStyle();
    }

/**

* @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)

@Override

public void draw(PGraphics pg, float x, float y) {

pg.pushStyle();

pg.pushMatrix();

pg.imageMode(PConstants.CORNER);

// The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.

pg.image(img, x - (img.width / 2), y - (img.width / 2));

pg.popMatrix();

pg.popStyle();

}

Añadimos los marcadores al mapa:

/* Add markers to map */
for (Marker m : markers) {
  birraMap.addMarkers(m);
}

/* Add markers to map */

for (Marker m : markers) {

birraMap.addMarkers(m);

}

Como se ve en el ejemplo, se usan múltiples clases y APIs de Processing, como PImage, loadImage(), etc.

3. Mapa interactivo

Por último, haremos el mapa interactivo. La intención es que al hacer click con el ratón sobre cada marcador, se muestre un pop-up sobre él con información adicional. Al volver a hacer click, o hacer click en otro marcador, el pop-up desaparece. Además también queremos mostrar otro pop-up sobre cada marcador si se coloca el puntero sobre él, que desaparezca cuando éste se vaya. Aquí mostraremos el nombre del marcador.

Ámbos eventos podemos definirlos mediante la API del PApplet heredada de Processing. Este serái el método para el evento de click sobre el mapa:

/**
     * @see processing.core.PApplet#mouseClicked()
     */
    @Override
    public void mouseClicked() {
        if (markers == null) {
            return;
        }

        /* Clear selection */
        for (Marker m : markers) {
            m.setSelected(false);
        }

        /* Select clicked marker */
        Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);
        if (m != null) {
            m.setSelected(true);
        }
    }

/**

* @see processing.core.PApplet#mouseClicked()

@Override

public void mouseClicked() {

if (markers == null) {

return;

}

/* Clear selection */

for (Marker m : markers) {

m.setSelected(false);

}

/* Select clicked marker */

Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);

if (m != null) {

m.setSelected(true);

}

Si no hay marcadores, devolvemos nulo, es decir, no hacemos nada. Si hay marcadores, primero deseleccionamos todos, ya que no admitimos selección múltiple en nuestro ejemplo. Despues detectamos cual es el primer marcador seleccionado en la posición del puntero (Marker m = birraMap.getFirstHitMarker(mouseX, mouseY)) y lo marcamos como tal (m.setSelected(true)).

El método para definir el evento de movimiento del ratón sería el siguiente:

/**
     * @see processing.core.PApplet#mouseMoved()
     */
    @Override
    public void mouseMoved() {
        if (markers == null) {
            return;
        }

        /* Clear selection */
        for (Marker m : markers) {
            ((BirraMarker) m).setHover(false);
        }

        Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);
        if (m != null) {
            ((BirraMarker) m).setHover(true);
        }
    }

/**

* @see processing.core.PApplet#mouseMoved()

@Override

public void mouseMoved() {

if (markers == null) {

return;

}

/* Clear selection */

for (Marker m : markers) {

((BirraMarker) m).setHover(false);

}

Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);

if (m != null) {

((BirraMarker) m).setHover(true);

}

El procedimiento es practicamente el mismo que en el caso anterior. Tan solo en lugar de establecer el marcador como seleccionado, se usa setHover(true).

Tan solo nos falta añadir al método draw() del marcador el código que permitirá dibujar los pop-ups en caso de que éste sea seleccionado o sobrevolado por el puntero. El método definitivo quedaría así:

/**
     * @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)
     */
    @Override
    public void draw(PGraphics pg, float x, float y) {
        pg.pushStyle();
        pg.pushMatrix();

        pg.imageMode(PConstants.CORNER);
        // The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.
        pg.image(img, x - (img.width / 2), y - (img.width / 2));

        /* Selected */
        if (selected) {
            /* Rounded rectangle */
            pg.translate(x, (int) (y - (this.numBirras * 12.5)));
            pg.stroke(0);
            pg.fill(255);
            pg.strokeWeight(1);
            pg.rectMode(PConstants.CENTER);
            pg.rect(0, 0, elipseDim.width, elipseDim.height, 7, 7);

            /* Triangle */
            pg.beginShape();
            pg.vertex(-5, (int) (this.numBirras * 8.75));
            pg.vertex(5, (int) (this.numBirras * 8.75));
            pg.vertex(0, (int) (this.numBirras * 12.5));
            pg.endShape(PConstants.CLOSE);

            /* Text */
            pg.fill(0);
            pg.text(this.text, -((elipseDim.width / 2) - 5), -((elipseDim.height / 2) - 12));
        }
        /* Hover */
        else if (hover) {
            pg.translate(x, y);
            pg.stroke(0);
            pg.fill(255);
            pg.strokeWeight(1);
            pg.rectMode(PConstants.CENTER);
            pg.rect(40, 0, 80, 20, 7, 7);

            pg.fill(0);
            pg.textAlign(PConstants.CENTER);
            pg.text(this.name, 40, 5);
        }

        pg.popMatrix();
        pg.popStyle();
    }

/**

* @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)

@Override

public void draw(PGraphics pg, float x, float y) {

pg.pushStyle();

pg.pushMatrix();

pg.imageMode(PConstants.CORNER);

// The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.

pg.image(img, x - (img.width / 2), y - (img.width / 2));

/* Selected */

if (selected) {

/* Rounded rectangle */

pg.translate(x, (int) (y - (this.numBirras * 12.5)));

pg.stroke(0);

pg.fill(255);

pg.strokeWeight(1);

pg.rectMode(PConstants.CENTER);

pg.rect(0, 0, elipseDim.width, elipseDim.height, 7, 7);

/* Triangle */

pg.beginShape();

pg.vertex(-5, (int) (this.numBirras * 8.75));

pg.vertex(5, (int) (this.numBirras * 8.75));

pg.vertex(0, (int) (this.numBirras * 12.5));

pg.endShape(PConstants.CLOSE);

/* Text */

pg.fill(0);

pg.text(this.text, -((elipseDim.width / 2) - 5), -((elipseDim.height / 2) - 12));

}

/* Hover */

else if (hover) {

pg.translate(x, y);

pg.stroke(0);

pg.fill(255);

pg.strokeWeight(1);

pg.rectMode(PConstants.CENTER);

pg.rect(40, 0, 80, 20, 7, 7);

pg.fill(0);

pg.textAlign(PConstants.CENTER);

pg.text(this.name, 40, 5);

}

pg.popMatrix();

pg.popStyle();

}

Como se ve en el método, se usan los atributos selected y hover que se marcan en los métodos anteriores de eventos para determinar el estado del marcador. Hay que recordar que el método draw() se está invocando de forma contínua tal y como se usa en Processing.

Este sería el resultado final:

Podeis descargar el proyecto completo desde aquí. !Ahora a darle a los mapas!

Manipulación de imágenes con Processing

Dentro de un nuevo post sobre visualización gráfica y tenologías relacionadas, vamos a hacer una pequeña reseña en relación a una potente herramienta de manipulacion de imágenes y diseño gráfico.

No es ni más ni menos que el entorno y lenguaje de programación llamado PROCESSING. Este lenguaje está basado en Java y nos permite, de una manera muy sencilla y potente, relaizar diferentes manipulaciones sobre imágenes, desarrollar elementos gráficos, visualizaciones, interacciones y demás temas relacionados con el diseño gráfico y la visualización de datos.

Esta es la URL oficial de PROCESSING, donde se pueden encontrar tutoriales, ejemplos, distribuibles, etc.

Es una herramienta muy potente usada ampliamente en diferentes sectores como el arte, la visualización de datos, el desarrollo de software o incluso es la base de otros lenguajes de programación y entornos de desarrollo como Arduino.

Los dos ejemplos que se muestran a continuación son sencillas pruebas de lo que se puede hacer con Processing a la hora de manipular y analizar imágenes. Pero con Processing se pueden hacer muchas más cosas, como crear formas, textos, imágenes en 2D y 3D, etc. Se recomienda encarecidamente consultar la web oficial y repasar los tutoriales y ejemplos que alli se encuentran.

1. API de Processing

Como hemos dicho antes, Processing está basado en Java, asi que funciona de forma similar. Proporciona una API y una serie de classes que nos permiten trabajar con imágenes de forma sencilla desde cualquier programa o entorno de desarrollo.

Estos son algunos de los elemento de Processing que veremos en los siguientes ejemplos:

PApplet – es un applet Java del que extiende nuestra clase principal y que creará una ventana alrededor de nuestro contenido para una mejor visualización.
PImage – representa una imagen.
setUp() – inicializa la aplcicación.
draw() – es invocado de forma recurrente para refrescar el contenido de la aplicación.
loadImage() – carga una imagen en memoria.
image() – dibuja una imagen en las coordenadas que le indiquemos.

2. Estructuras básicas

Los elementos básicos de los que debe constar una aplicación implementada con Processing serían los siguientes:

El applet de Processing

/**
* Main class.
*
* @author lagarcia
*/
public class JProcessing extends PApplet {
...
}

/**

* Main class.

* @author lagarcia

public class JProcessing extends PApplet {

...

}

Una alternativa a extender el applet e invocar nuestra aplicación como tal es usar esto dentro del metodo main:

/**
* Main method.
*
* @param args
*/
public static void main(String[] args) {
   PApplet.main(new String[] {"--present", "net.luisalbertogh.processing.JProcessing" });
}

/**

* Main method.

* @param args

public static void main(String[] args) {

PApplet.main(new String[] {"--present", "net.luisalbertogh.processing.JProcessing" });

}

El método setpUp() donde se inicializa nuestra aplicación

/**
* @see processing.core.PApplet#setup()
*/
@Override
public void setup() {
/* Load images */
source = new PImage[1];
source[0] = loadImage("images/sunflower.jpg");

/* Destination */
destination = new PImage[2];
destination[0] = createImage(source[0].width, source[0].height, RGB);
destination[1] = createImage(source[0].width, source[0].height, RGB);

/* Set canvas size */
size(800, 400);
}

/**

* @see processing.core.PApplet#setup()

@Override

public void setup() {

/* Load images */

source = new PImage[1];

source[0] = loadImage("images/sunflower.jpg");

/* Destination */

destination = new PImage[2];

destination[0] = createImage(source[0].width, source[0].height, RGB);

destination[1] = createImage(source[0].width, source[0].height, RGB);

/* Set canvas size */

size(800, 400);

}

El método draw() que se invoca de forma repetida mientras la aplicación esté activa

/**
* @see processing.core.PApplet#draw()
*/
@Override
public void draw() {
/* Background color is black */
// background(0);

/* Draw the image to the screen at coordinate (x,y) */
image(source[0], 0, 0);

/* Transform original image into B&W */
toBlackAndWhite(source[0], destination[0], 200.0f);
toPointill(source[0], 10);

// Display the destination
image(destination[0], source[0].width + 10, 0);
}

/**

* @see processing.core.PApplet#draw()

@Override

public void draw() {

/* Background color is black */

// background(0);

/* Draw the image to the screen at coordinate (x,y) */

image(source[0], 0, 0);

/* Transform original image into B&W */

toBlackAndWhite(source[0], destination[0], 200.0f);

toPointill(source[0], 10);

// Display the destination

image(destination[0], source[0].width + 10, 0);

}

Otros métodos de captura de eventos, como por ejemplo el siguiente

/**
* @see processing.core.PApplet#mousePressed()
*/
@Override
public void mousePressed() {
...
}

/**

* @see processing.core.PApplet#mousePressed()

@Override

public void mousePressed() {

...

}

3. Manipulación de imágenes

Una vez tenemos las imagenes cargadas en memoria, podemos acceder a sus píxeles, a las propiedades de estos y usar la API de Processing para manipularlos.

Los píxeles se representan como un array unidimensional. Para acceder a un píxel basta con calcular el índice que le correspondería en ese array. Antes debemos cargar los píxeles de la imagen en cuestión usando la función loadPixels():

// Pixel location and color
source.loadPixels();
int loc = x + y * source.width;
int pix = source.pixels[loc];

// Pixel location and color

source.loadPixels();

int loc = x + y * source.width;

int pix = source.pixels[loc];

El resultado es un valor numérico que representa al píxel (en función de su RGB, brillo, etc.).

Para modificarlo, podemos escribir un nuevo valor en el array. Despùés llamamos a la función updatePixels() para que vuelque los valores a la imagen de nuevo:

destination.pixels[loc] = c;
// We changed the pixels in destination
destination.updatePixels();

destination.pixels[loc] = c;

// We changed the pixels in destination

destination.updatePixels();

Existen una serie de métodos que podemos usar para determinar las diferentes propiedades de cada píxel, como son el rgb, el brillo, etc:

float bright = brightness(pix);
float r = red(pix);
float g = green(pix);
float b = blue(pix);

float bright = brightness(pix);

float r = red(pix);

float g = green(pix);

float b = blue(pix);

4. Dibujo

Aunque no forma parte de esta explicación, como se ha mencionado antes, Processing es una potente herramienta a la hora de realizar cualquier tipo de dibujo, diseño gráfico, etc. Por supuesto tiene un conjunto de funciones que nos permiten dibujar formas de manera sencilla:

/* Draw a ellipse */
fill(r, g, b, 100);
ellipse(x + 20 + source.width * 2, y, pointillSize, pointillSize);

/* Draw a ellipse */

fill(r, g, b, 100);

ellipse(x + 20 + source.width * 2, y, pointillSize, pointillSize);

Finalmente, con lo visto hasta aquí podríamos crear un par de funciones que modifiquen los píxeles de una imagen original para que, en un caso, los cambio a blanco o negro en función de su brillo, y en otro caso, los cambie por elipses de un tamaño determinado y del color del píxel. En este caso, en lugar de cambiar la imagen original, dibujamos dos nuevas imágenes. Puedes descargar el proyecto completo desde aqui.

El resultado sería algo como lo siguiente:

A la izquierda, la imagen original, en el centro en blanco y negro, y a la derecha, con elipses de colores.

¡¡Ahora a jugar con Processing!!

El Recetario

Recetas Java y más

Category Archives: Visualización

Visualización de datos geolocalizados con CartoDB (I)

Mapas interactivos y geovisualización con Unfolding

Manipulación de imágenes con Processing