cat bounce pool

I created cat bounce pool after seeing http://cat-bounce.com/ . In cat-bounce you can click a button to make it rain cats and I thought it’d be cool to increase the number of cats after it rains.  When I checked the source it was Flash, so I couldn’t see the code.  Time to make it in javascript.

I remembered a piece by mr. doob with bouncing balls, so I took that code and replaced the ball SVG with an SVG of a cat.  So cat bounce + ball pool = cat bounce pool. It’s a really simple hack, but I love how easy it can be to make these mash-ups when the code is open.

You can check out the code for cat bounce pool on Github, and here you can play with cat bounce pool. Click around to add cats.  Shake the browser to send them bouncing around off the sides.

cool comply prototype

an inexpensive, networked fridge to hold TB medication

I developed the Arduino code and the electronics for a prototype of Cool Comply- an inexpensive, networked fridge to hold TB medication. The system logs the temperature of the fridge, and when patients take medication. A text message is sent out each day with the data. We have sent the first prototype to Addis Ababa, Ethiopia, where it is currently being used by patients, and are working on iterations with engineers at the local university.

This is a project with the MIT H-Lab.

Light Card

Laser cutting generative design and typography

I designed a card to be in the Museum of Pocket art ALL BUSINESS ALL THE TIME show. I used Processing to design the card, and then I laser cut the pattern in acrylic.

To produce the design I first I set the text centered within a rectangle. I drew points around the perimeter of the letters and additional points were placed within the rectangle randomly, with a higher probability of a point placed closer to the letter points. The added points repelled each other briefly, and then all of the points were triangulated. The text emerged from the density of triangles.

code

update (october 28th, 2012):

This is a project from 2010, but was recently blogged on NOTCOT so I thought I’d include a few more details.  You can see several iteration of the piece in the first blog post of this site.  You can see among the variations that I began with the Delaunay triangulation, and placed text over it.  Here is an example:

I was working on this after TAing a class taught by Jesse of Nervous System.  He suggested I think of a way to integrate the letters with the underlying pattern.  Hence I began to look into extracting points from the text, and using those points in the triangulation.  If you take a look at the code, you’ll notice I use the geomerative library to do the font analysis.  Here is a later iteration:

You can see the letters emerging from the intersecting lines, but still quite hard to read- especially the web address.  I soon removed the address.  It kind of highlights the question of whether or not it is still a business card, but I liked the idea of removing references to myself in it and focusing on the connection, the us.

I created a ton of variations of this design using the Processing code I wrote above, changing parameters to affect the number of points and spacing of points, until I found a design I liked. Finally, I created a PDF based on this image (I believe it is the one below), and used that with the laser cutter.

 

Globe Growth

A 3D inflating convex hull of random points with repulsion

I created a 3D object that grows in simulation. Points are placed randomly in a 3D space and repel one another. All of the points repel the center of the simulation. The convex hull is taken of the points at each time step, resulting in a 3D object that is inflating. An offset is applied to each triangle face, and the offset internal triangle is curved using subdivision.
This shape will be fabricated using a 3D printer. For the colorful image, only the curved internal triangles are colored.

code

Inspiration Overload

Pulling tons of visual information into a single stream

INSPIRATION OVERLOAD is a tool to automatically pull images from select inspiring websites and display them in a stream. When one reaches the bottom of the page, more images are loaded.
I made this because sometimes my creative process calls for tons of visual stimulation. After finding several blogs with a lot of great visual art, I made this to simplify the UI to be just what I needed.

The image links are pulled using cron jobs and a Python script, and displayed using a Javascript web app with data fed from a Python back-end.

See the code on github here.

The web app is here.

Authenticating on Instagram

I wanted authentication just to play around with the API, not to actually have other people use an app I made. For the most part you can just use the client id in place, but for some uses, like getting recent media of users, you need to be authenticated. Here is how I got up and running. You can find the details in the documentation here.

First sign up for Instagram. Then go the instagram developers site and sign in. Create a new app, it should give you a client id and secret. Set the website url to http://localhost:8000 and the redirect to http://localhost:8000/oauth_callback

On the command line start a server.

>python -m SimpleHTTPServer

This will start a server listening on 8000
Paste the following in your browser, replacing YOUR-CLIENT-ID with the value you found when registering the application.

https://api.instagram.com/oauth/authorize/client_id=YOUR-CLIENT-ID&redirect_uri=http://localhost:8000/oauth_callback&response_type=code

You’ll see the address change to http://localhost:8000/oauth_callback?code=YOUR_CODE. The code is where YOUR_CODE is. Take this and stick it in the following, under code. Fill out the other stuff too. I stuck these few lines in a shell script called access.sh, and ran it off the command line. This will return a json with an access token.

curl \-F ‘client_id=FILL-THIS-OUT’ \
-F ‘client_secret=AND-THIS’ \
-F ‘grant_type=authorization_code’ \
-F ‘redirect_uri=http://localhost:8000/oauth_callback’ \
-F ‘code=PUT-CODE-HERE’ \https://api.instagram.com/oauth/access_token

yay twilio, getting started with the API

Yesterday I hopped into the Twilio API for the first time.  I’m impressed with the design of the site, even moreso because the site is targeting developers. Visual design isn’t always a priority for developer facing products. Visually, the site is great. But even beyond that, the documentation and the dashboards are pretty clear and easy to work with.  It was a breeze to get started.

I implemented my Twilio app with Flask, deploying on Heroku.  Near the end of the tutorial, they offer a few options to deploy, which I thought was pretty cool. So in less than an hour, you have an example up and running on the web, and you can see it respond to your phone.

Here is a snippet from an app I wrote. It had to have a page for when visitors open up the url in the browser. This would give information of the app, and the number to SMS. And it had to respond to texts. This could be done with a single route, differentiating SMS and the browser request by a GET and POST request. The incoming SMS could be assigned to POST to a domain in the Twilio dashboard.

dancey dots

I started playing with the Web Audio API a couple days ago and was kind of amazed at how it has a built in square  and sawtooth wave.  Its kind of awesome the thought that went into creating this API- it feels like it was built for sound design/ electronic instrument enthusiasts.

Fresh with some nodejs socketio experience after geostreaming olympics I decided to combine the two and make a collective browser synth.  This has been kind of a dream of mine for a while. I decided to go with something minimal, that would emphasize interpersonal interactions through the app.  Immediately I thought of drone synths moving in and out of phase.

You can play with dancey-dots here. Share the URL with a friend to bring them into the session as well.  It will update in real time based on what they are doing.  Yes- a collective browser synth :)

You can check out the code on github here.   I did some tests today and the app did not scale as much as I’d like.  There may be optimizations I can make on the synth side, or the socketio messaging side, but if you have insights on either I’m excited to hear them- or see them! fork the code.

It is amazing to see what is possible now with node and socketio in terms of real time web interactivity. I love interactive art between multiple people, so the most joyful thing for me has been to see how people use this, how languages form, and we can form little games together from gestures.

It is also pretty wild playing with someone else here anonymously. You’ll find a lot of personality can be embedded in a dot that makes sounds.

nodejitsu is awesome

I deployed a nodejs app on heroku over the weekend and thought the process was pretty quick.  This was comparing the app deployment process on heroku with the process I went through with a web app on Dreamhost (it was a python app, with some time spent on the server side configuring things).  It was truly much faster.  Make it work locally, then deploy.  Today I deployed on nodejitsu and it was even smoother.

Basically you just install jitsu, and then cd to your app directory and write `jitsu deploy`.  Thats it.  jitsu writes your package.json file for you, automatically increments the version, and lets you immediately customize the name.  Pretty cool.

On the other hand when I deployed on heroku I wrote out the package.json file by hand and ended up having to change it because heroku didn’t have the version of node or some package I was using (I can’t remember if it was the node, npm, or express version I had to change), but I spent some time going through previous versions until I found one where socket.io, express, and played well together.  Basically trial and error since on my local machine things were working fine.  (The package.json file includes the details of what module dependencies the app has, and what versions are required of each module.)

I went with nodejitsu because I wanted to play with real time interactivity with socketio.  You have to configure socketio on heroku to disable websockets and force longpolling, and I didn’t want to use longpolling.

Anyway, it’s exciting to see companies making the deployment process easier.  For python apps I can use heroku, for node apps I can use nodejitsu.

geostreaming olympics

What are people thinking about the olympics right now, and throughout the world? It is truly an event that brings people all around the world together.

Last weekend I decided to refactor an older project I did- real time geolocated tweets – to something relevant to right now: the olympics.   A few weeks after I posted the twitter mapping project, I found a similar twitter mapping app with a beautiful implementation using the nodejs twitter framework Tuiter and socketio.

I rewrote the backend using Tuiter, and hooked it into the frontend, which used Leafletjs.  You can check out the app here: http://geostreaming-olympics.herokuapp.com/.  The app queries the Twitter API for geolocated tweets and displays the ones that contain “olympics”.  After a few seconds you should see tweets populating the map as they come in.

While working on the app I was trying to figure out the best way to display time.  It was a bit confusing since the tweets were all GMT and sometimes the js Date() could not properly parse it, producing an “Invalid Date” output, so in the end I scrapped that UI element .  During that process I came across this:

which I thought was pretty funny. Below are more pics:

 

I like this application design, which I pulled from the Tuiter example.  In the background the Twitter stream is always running.  Opening the website opens up a websocket to receive the streaming tweets- so no need for unique calls triggered on the client side.  This simplifies any issues related to rate limiting.  The app is deployed on Heroku, which was surprisingly fast to get up and running.