I really like my job and it’s exactly what I want to do for a livelihood, which is to make stuff that people will see and experience. I’m currently working on two projects: this site for a non-profit and a collaborative digital art piece.

I’ve also been busy with other life stuff like taking up yoga again and taking on sewing projects. Since I’m commuting on the subway again, I’m reading more. I’m also looking for an apartment. I’ve been a pretty busy bee.

1. They’re hiring more developers, let me know if you’re interested
2. huzzah for Javascript

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?

I think it’s good to take a break from coding and what not so I decided to take up this small sewing/embroidery project. I’m making a satchel for drawing supplies. I finished embroidering a wreath and my name on the front side. I just need to iron the fabric a bit, sew the lining, and thread a ribbon across the top (closing the satchel). I’m using an unbleached muslin-type fabric.

By the way, I learned how to do the different types of stitches from Jenny Hart’s Embroidered Effects. Embroidering isn’t very hard and easy to pick up, so I recommend it if you want to do something with your fingers besides typing.

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.

A few weeks ago, I was in California for a job interview. I was only there for two days but I managed to find some time to hang out with Tiff. She drove us to Santa Cruz¹. It was kinda empty because it wasn’t the summer season. The weather in the Bay Area felt like 40 degrees cooler than it was in Atlanta (it was averaging in the 90s in the South), so I found that refreshing. We visited the arcade². We saw a MTV Drumming arcade machine and watched a guy play it. The strange thing was that there nothing on the game screen except for text. No graphics to follow along to. It was like the dude was drumming for real.

After walking around a bit, we went to an In N Out Burger. I really wanted to go to there because I wanted to compare and contrast their burgers with Shake Shack’s burgers. I had a single and found the beef patty wanting but all the other ingredients were good. I daresay the lettuce and tomato were more crispier than those on a Shack Burger.

It was a great, albeit short trip. Hopefully I’ll be back soon.

1. I had forgotten how mountainous Northern California was. I got a little carsick during the drive there because of all the curvy roads.
2. There was a serious lack of Dance Dance Revolution games.

I was also taking a course called Simulation of Biological Systems. It was a Computer Science course, so it was a bit over my head² because of all the math involved. But I was able to complete the projects.

I skipped commencement. For some reason Georgia Tech merged the undergraduates with the Master students and Georgia Tech has a huge population of undergrads. The commencement e-mail implied that leaving right after you get your fake diploma would be considered rude and you had to wait for the other 5000+ students to get their diplomas. So, I thought a better use of my time would be spent moving out graduate housing.

Since then I’ve been spending most of my time applying to jobs in San Francisco and New York City³. When I’m not doing that, I’m catching up on sleep and leisure hobbies like reading.

Now that I have some free time, I plan to blog more regularly. So stay tuned.

1. both activities surprisingly more time consuming than I thought
2. my major was Digital Media
3. are you hiring a UX Designer or creative technologist?

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!