View demo here.

[Technical details follow] This is an animated visualization of my reading habits (my summer reading pile is shown). I prototyped it in the desktop Processing IDE and then ported to processingJS. In the IDE I used the Gotham Rounded font. Unfortunately processingJS doesn’t really render font files to the CANVAS element (at least in Firefox, the browser selects from a set of fonts).

There were some speed issues of the animation, notably in FireFox 5, but I think my computer was just showing its age. >_<

As I wrote previously, here and here, last summer I worked as Tahir Hemphill’s intern at Eyebeam. I helped him plug-in the data from the hip hop database he compiled, into the Protovis Data Visualization framework and created a few visualizations (which you can also see on my portfolio).

Tahir’s project is actually much more sophisticated than a database though. He is developing it into a tool for research and the visualizations are just a part of that. So, what I think is actually being exhibited is the idea of the project rather than the info viz stuff.

Now two of those visualizations are part of the Talk to Me exhibit at the Museum of Modern Art in New York City! The project is listed in the online catalog, so I’m just going to assume they will be there in the actual museum. I’ll have to go check it out in person when I go to Arcade next week.

Do you think I can cross out “be exhibited at the MoMA” off my to-do list?

View the demo here.

A week or so ago, in celebration of the Fourth of July I decided to create fireworks using the the paper.js framework I played around with previously.

At first I used symbols¹ but I couldn’t access the alpha (transparency) property of a symbol. So, instead I drew a bunch of circles². Then I created a bunch of arrays to keep track of each circle’s (particle) gravity along the X-axis, the y-axis, and alpha value. It was important that I had access to each individual particle’s alpha because I wanted to fade out the particle as time went on. Once a particle’s alpha reaches 0, the code would stop rendering that particle. It’s important that old particles get removed from the canvas or else there would be speed issues.

1. paper.js allows you to create symbols of an object (such as a Path), which is simply an instance of that object. If you’ve Adobe Illustrator before, the paper.js symbol works the same as Illustrator’s symbols
2. in paper.js, circles are not pre-defined shapes but rather pre-define paths (i.e. lines

View demo here. It only works in the latest versions of Chrome and Safari. For whatever reason, it’s not working in Firefox 4.

Paper.js is a new open source vectors graphics scripting framework that draws onto the HTML5 CANVAS element. It’s still kind of young (version .1) but it is based off a more mature project². The documentation and tutorials on the site are pretty excellent for a framework that is only version .1. Also the code markup just feels nice.

I’ve been keen to do more stuff with HTML5 and the canvas element, so I decided to use paper.js to create a subtle animated background for my portfolio site, amycheng.info³

I worked off this tutorial on the paper.js site. It took me a while to wrap my head around using symbols and layers⁴ and properly accessing them in the script but I figured it out.

The animation of the falling dots is pretty smooth at first. What’s great is that the canvas and thus the animation automatically scales to fit the browser window. Also, each time the animation is loaded, it is slightly different, since each falling dot is randomly generated. The animation also works on iProducts. However, there are a few hiccups:

• the animation chocks if there’s a background computer process going on
• it’s not working in Firefox 4, I haven’t tested it in Firefox 3
• the animation crawled on my 2nd gen iPod touch (iOS2?). It’s perfectly smoother in iOS4 until the user zooms into the page
• the CANVAS element keeps rendering on top of the page content. I tried changing the z-index and position elements via the CSS, but it’s still rendering on top.

I’m not sure if these bugs are my fault or something that the developer needs to work on. There are definitely speed issues. Also, some of interactive elements, like mouse events (such as click and drag) haven’t been implemented yet. It’s still an impressive vector graphics framework and I’ll definitely be keeping an eye on it. But for now, I think I’m going to abandon using it to generate backgrounds for amycheng.info.

1. Processing.js would be its foster sibling and Flash/ActionScript its spiritual ancestor.
2. Scriptographer. An add-on to Adobe Illustrator that allows you script drawing. It seems pretty neat and I’ve been wanting to play around with it for awhile
3. I was at a job interview and the potential employer loaded my site onto their laptop. It was so tiny! I didn’t realize how much larger, other people’s resolutions could be. So I figure an interesting, dynamic background might fill in the empty space, as well as demonstrate my skills.
4. I’ve been using Illustrator far longer than I’ve been coding, so you’d think I would get the concept right away.

I was interested in splitting up video into separate color layers (a la additive color mixing in screens or subtractive color mixing in print media). I am fascinated by how a few basic colors combine to create a rich palette that human eyes seems to take for granted. I kinda explored this idea in a silkscreen photo booklet I made a few years ago. In this new project I’m doing it with live video.

So far I’ve implemented different color modes.

In another iteration I implemented shifting:

I plan to integrate these two things, add more options to create multiple instances of color layers, and maybe some crude music beat detection.

The design of the installation goes from flat screen to three dimensional sculpture. I guess I was pretty narrow minded in the beginning. All I thought about doing was a projection onto a large surface (I think I was fixating on the mirror aspect of the project). Then I thought how it would be more profound for the visualization to be in 3D. I tried to fake 3D¹ by projecting onto a screen that was divided among several planes. While this was cool looking, the visualization still seemed flat.

I don’t remember how I came across electroluminscent wire. I think SparkFun had it as a featured project on the home page or maybe I saw it incorporated in a project at the NYU ITP Winter Show. Anyway, I figured using EL Wire to create a sculpture that “visualized” EM would be the best way to go². So I’ve been messing around with it and working on (hopefully) the last study model. The video below shows:

1. I don’t really have the resources for a 3D film system and having people share 3D glasses isn’t really democratic
2. I’ve been calling EMF Mirror a “tangible visualization” instead of sculpture. I may have coined that term. You heard it here first!

The power detector can sense incoming and outgoing signals to cellphones (the sensing is weaker for smart phones though probably because the signal is different, I’ll have to experiment with different antennas. Right now Im just using a straight wire.)

I’m thinking EMF Mirror will use several of these power detectors and a few copper wires acting as antennas to sense electromagentism. Data from different kinds of sensors, sensing different kinds of EM should create an interesting visualization…

EMF Mirror visualizes electromagnetism but before it can do that, it has to be able to detect EM. I’m currently building a few sensors in an effort to create a system that can sense the devices that I want to detect (phones, handheld game consoles, anything a person walking around might carry). The first detector I built is a simple antenna that is plugged into the analog input pin of an Arduino.

This detector can sense table lamps and computer monitors but not phones unfortunately.

The next detector is a dissembled EMF Detection Meter that I bought off Amazon.com. I soldered a wire to one of the pins that went to the analog meter, then I plugged this wire into the Arduino.

With this array, I was able to sense incoming phone calls and monitors that were plugged into the outlet.

The next sensor I’m going to build centers around an RF Power Detector. The description is promising:

The LT5534 is a 50MHz to 3GHz monolithic RF power detector capable of measuring RF signals over a 60dB dynamic range. The RF signal in a decibel scale is precisely converted into DC voltage on a linear scale. The 60dB input dynamic range is achieved using cascaded RF detectors and RF limiters. Their outputs are summed to generate an accurate log-linear DC voltage proportional to the input RF signal in dB. The output is buffered with a low output impedance driver. The LT5534 delivers superior temperature stability (typical output variation within ±1dB over the full temperature range). The output responds in less than 40ns to a large RF input signal.

I only half-understand the description, still, I’m hopeful that I can detect a wider ranger of devices than I have been with the previous two sensors I hacked together. However, the power detector is an 1/8 of an inch in area, so I am stumped how to integrate it into an Arduino circuit.

You can download the applet here.

You will need the Arduino and ControlP5 libraries for Processing in order to use this applet.

References

This applet uses smoothing code created by David A. Mellis.

1. I’m having issues making a sensor that is sensitive enough to detect the things I want. I’m working on it >_<

I continued to attach the screen ribbons to the radiation pattern. I ran out of ribbons, so only half of the diagram was filled in but I figured it was enough. I was eager to hang the prototype up, to see how the ribbons fell.

I tried to hang up the installation by myself, but couldn’t figure out a way to get the thing to stay on the ceiling. I was stumped so, I decided to just hang it up next time, when Claudia¹ was around to help.

Claudia, I, and her friend helped me hang the prototype. Then I did projection tests.

A few observations and considerations:

• You can’t tell from the photos, but the ribbons were too short. I would like them to be nearly touching the floor.
• some areas of the installation is denser than others. This is fine; I want to illustrate that the closer you get to the source of EM² radiation, the stronger the radiation is. Radiation strength would be illustrated by the density of the ribbons; I think I need to make this correlation stronger, but how?
• The projection looks faux 3D, I wonder if I can make it even more three dimensional through optical tricks in the animation? (e.g. messing around with the perception of depth)

I have a lot of thinking to do and design-related decisions to make…

1. a member of my thesis committee, and whose studio I was using
2. electromagnetic