My Blog: projects, sketches, works in progress, thoughts, and inspiration.

world_stem_cell_map_b1

world_stem_cell_map_b3

world_stem_cell_map_b2

I’ve been working for a while on this project with Stem Cell Resources for the new cell exhibit at the Maryland Science Center. The exhibition, including the Stem Cell Map and some other fun interactive works, opened yesterday and was received very well. If you’re in Baltimore its worth checking out. Developing this project has a been a great opportunity to do some great educational work with some great people. I enjoy being able to maintain a connection with the sciences despite focusing myself on art, and I always love creating data visualizations.

The Map is scripted in Actionscript 3 and takes all the data from an xml file exported from a spreadsheet making it easy to update. The research is broken down into three categories and each location is colored accordingly and scaled based on the number of facilities. It’s displayed on a large touchscreen in the exhibit and will also soon be online.

Read On »

Read On (Post Continues) »

I’ve gotten a few questions recently about how to render Processing scripts for printing. There are a few obstacles, but there are two simple methods which work pretty well. Between the two I’ve been able to get high resolution renderings of different types of scripts without having to do anything terribly complicated. The image will be exported as either a vector (shapes) or a raster (pixels) image. Depending on the sketch one method might be much more useful.

Exporting a Scalable Vector Images

The best way to get a high resolution image from Processing is to export the sketch as a vector image. With respect to graphics and images a Vector is just a fancy word for a shape. Unlike a Raster image which records visual information in an array of pixels, vector images are composed of shapes. For some applications this can much more useful. Typefaces, many logos, and other graphics composed of flat shapes are created with vectors. The shapes in a vector image can the be colored, outlined, and styled in many other ways. Vector images can be much smaller than a rasterized version, and most importantly, they are scalable. Since the image is made of shapes it can be stretched as large as you need it and will lose no quality.

Shapes drawn with processing commands are vector shapes, and Processing includes a library to export this data as a PDF document, which can then be opened and used by any vector editing program.

To capture the vector data import the pdf library, call beginRecord(), draw your shapes, and then endRecord(). A simple code to capture a frame on a mouse press could look like this.

import processing.pdf.*;

boolean capture=false;

void setup() {
}

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
    render();
    endRecord();
    capture=false;
  }
}

void mousePressed() {
  capture=true;
}

The script above would have all the drawing functions within the render() function. To be less obtrusive the beginRecord() and endRecord() functions can be within separate conditionals. The code between them will be run all the time and the data will be recorded only when the mouse is pressed. The new draw() function would look like this:

void draw() {
  background(255);
  if (capture==true){
    beginRecord(PDF,"vector_file.pdf");
  }

  //
  // drawing code
  //

  if (capture==true) {
    endRecord();
    capture=false;
  }
}

Notes about exporting PDFs.

  • The exported PDF will be in the sketches folder and titled with the second parameter of beginRecord().
  • You can open the PDF with a vector program like Adobe Illustrator and edit the shapes.
  • Any shapes drawn, even if they are outside the rendering window will be in the PDF. Remove the Clipping mask to reveal all the shapes.
  • For fills and strokes to work they must be called after beginRecord().
  • The size of the vector file is dependent on the number of vertices in your image.
  • For cumulative rendering place beginRecord() in the setup and endRecord() with a key or mouse press before closing the sketch.

Exporting Large Raster Images

Using a raster image can be a better option if you have a program with a lot of complex shapes. Saving pixel images is also easier, faster, and less processor intensive, but you lose the scalability. To save an image use the saveFrame() function.

void keyPressed() {
  if (key=='s') {
    saveFrame("image-####.png");
  }
}

The #### will be replaced with the frame number. TIFF, TARGA, PNG, and JPEG files can be saved (default is TIFF), and again the image will be in the sketch’s folder. To create very large renderings you can simply increase the window size and scale up the sketches parameters as necessary. I’ve rendered sketches much larger than my screen-size with good results, but can’t promise it will work on all platforms. On a mac you can enter exposee and an extra large window will shrink to fill the screen, although you can’t interact with it.

Post Page »

I had a nice week at home avoiding the internet as much as possible. Unfortunately it’s time to start working again, but at least I’ll get back to blogging. It might be a few days before I get back in the swing of things and have some new work to post, so in the meantime here are some pictures from the Georgia Aquarium. The whale sharks are fascinating, especially in their tank surrounded by so many ‘little fish’.

Whale Shark

Aquarium

Read On »

Read On (Post Continues) »

After playing with binary cellular automata I thought I’d expand the script a little to accommodate more than two states of a pixel. Three loops are nested and each is iterated once for each state. If the index of each loop equals the three values above the current point the function returns the current state of a counter which is incremented in the innermost loop. In a binary system this is a little more complex than just testing each of the eight possible combinations, but is almost necessary when dealing with more states. I’ll post my code at the bottom of this post. But first, some pretty pictures.

processing cellular automata 4

processing cellular automata 3

processing cellular automata 2

Read On »

Read On (Post Continues) »

cellular automata evolutions

This afternoon I played around with 1d cellular automata. The program is creates an array of cells which corresponds to a row of pixels on the screen. Each new generation of the structure is represented by the next row of pixels and the value (black or white) of each pixel is based on the three directly above it. There are eight possibilities for the pattern of the three parent pixels and an array of eight values stores the results to each of these possibilities. Changing the rule-set and the values of the first generation creates vastly different images. The script I was using was very much based off of Dan Shiffman’s code.

cellular_automata-6333

Read On »

Read On (Post Continues) »

In my last post I explained how to control the brightness of multiple light emitting diodes connected to an Arduino with an interface scripted in Processing. The script which I created was great because it just took a series of values sent via USB and lit the LED’s appropriately. This is convenient because it is not specific to any input which might be needed to control the lights. The script to send a value serially along with an indicator character can be added to any Processing script. Naturally one of the first things I had to do with it was create an audio visualizer. With the Arduino programmed as it was all I had to do was use a sound library to break an audio input into frequency bands and send the values down.

arduino led audio visualizer

The circuit is pretty straight forward. Six LED’s are connected through resistors to the six pins which support PWM (3, 6, 5, 9, 10, 11) and to a ground pin. I have everything crammed onto a tiny breadboard on my proto-sheild cause it’s cute and self contained. That’s just my style. PWM stands for Pulse Width Modulation and is the a way to control the brightness of LED’s as well as some other components. It is a digital output and produces the effect by switching on and off very quickly. The result can be visualized as a square wave. When you send a higher value to a PWM pin it will spend more time on than off. This blinking is faster than we can see so the LED appears to be changing brightness according to the amount of time it spends in the on position.

pulse width modulation graph

Read On »

Read On (Post Continues) »

As I started working with my shiny new Arduino board I quickly learned how to build basic circuits and program the micro controller to respond to various stimuli, but what really interested me in the technology was the ability to send information between the board and a computer. I’ve done a fair amount of programming in Processing and was excited to bring some of my work off screen. There is a nice script on the Arduino site on sending data from the board to a computer to control elements within a processing sketch. Unfortunately, the reverse is not as well documented.

I needed a script to send multiple variables from Processing to an Arduino to control a few components. After a bit of research, and more trial and error, I put together a script which controls the brightness of three LED’s through a virtual interface on a monitor. Here are my scripts and the circuit I came up with. It seems simple enough to me but if anyone has suggestions I’d love to hear them.

physical LED pixel on arduio board controlled with processing

Here three color LED’s are connected to pins 9, 10, and 11 which can use Pulse Width Modulation (PWM) to control the brightness of each LED. They are connected to their respective pins through appropriate resistors and also connected to a grounded row in the bread board. In the image I am using the prototyping shield from Adafruit which makes it easy to build small circuits.

Read On »

Read On (Post Continues) »

Ligetisplit Ensemble Poster by Anthony Mattox

I created this set of posters for a performance by the Ligetisplit Ensemble. The images are created with Processing. I had to finagle things a little to get high resolution rendering of my processing sketch. I set the screen dimensions to the pixel dimensions I needed, scaled up my inputs to interact with the whole screen, and had to enter expose or save the image to see what it looked like. It actually worked better than I expected.

Post Page »

stem cell map

Most of the time I have been dedicating to working with Processing has recently been taken up by a larger project. It’s been very exciting for me, but less conducive to blogging both because it’s a larger project, and because I’ve been doing a lot of learning for the project. The piece is an interactive map for an upcoming exhibit for the Maryland Science Center and will be on a large touchscreen. It’s a great project for me as I love data visualization and science.

The application is scripted in Action Script 3. I was originally thinking of using Processing, but I wasn’t happy with how it was handling some things i needed it to do. So far I’m very happy with the choice. Flash is quite a tough beast to work with but I’m impressed with how quickly it parses the sizeable xml file with all the data and also how smoothly it renders all the graphics. I’ve also had to do quite a bit of learning about xml. With a bit of work I have the flash file reading xml directly exported from a spreadsheet editor, making it very easy to be updated.

I’ll write more when the project is finished. I still have to do some work building the interface and making the interaction a little more fluid. The applet will also be available online as well as in the exhibit. For now here are a few images of other visualization methods I’ve been playing with.

stem cell map 3

Read On »

Read On (Post Continues) »