I'm a web developer in the Boston area. I enjoy outdoor adventures including rock climbing, sailing, skiing, and scuba diving. When I'm not doing those things, I keep busy with various web projects. Check them out below!

Emergence

My friend, Nick, was awarded funding from Firefly arts collective to create a project which he named Emergence. The inspiration behind the project came from actual fireflies in certain parts of the world that somehow all blink in sync with each other, despite the fact that each firefly can only see when it's immediate neighbor blinks.

The funding was used to buy 120 mini arduinos that would power each independent "firefly". Nick designed and fabricated a hockey puck like housing that held the electronics and battery, etc. He also designed a custom electronics board to facilitate communication between the ardunio and the other components (an LED, a light sensor, and wires to transmit and receive electo-magnetic pulses).

I was immediately intrigued when he explained what he wanted to build, and I decided to help him out by creating a simulation of these fireflies so we could be able to tweak and tune the timing of the firefly blinks. I did some research and found some academic papers on the subject.

The algorithm we programmed in each firefly is as follows: Every 2 seconds, the firefly blinks an LED and emits an electro-magnetic pulse. During the 2 seconds before the next blink, the firefly can detect the pulses of other nearby fireflies. If it detects a pulse, it will alter it's period to blink a little before the scheduled 2 seconds. With this programming in each firefly, a group of these would start off blinking out of sync, but would eventually synchronize, just like the real fireflies.

To make this project more interactive, there is a light sensor on each firefly. When a flashlight is shown on the firefly, it will immediately turn off and not blink until the the light is removed. If all the fireflies are blinking in sync, you can use a flash light to scramble them up again.

I created a simulation of all of this using React and Redux. I decided to implement the algorithm as a function of time (rather than using timeouts) which afforded me the benefits of being able to pause time, and to run the algorithm faster than real time. ie. 10 seconds of the calculations could take only one real second as you're watching it.

The most valuable part of this simulation is the ability to tweak the independent variables of the algorithm so we could get the timing just right. This was invaluable, because it took about 20 seconds to reprogram a single firefly, so we didn't have the luxury of tweaking the timing with the real bugs. The final product behaved pretty much the same as my simulation: https://youtu.be/mhtLOctSluE

Technologies used:Javascript (React, Redux, D3), HTML, CSS, Gulp

React

I gave a presentation on React and spoke about the benefits of the library. I also wanted to briefly go over some examples to demonstrate some of the concepts and show how simple it is. To do this, I created this "React Playground" web application.

The application consists of the code panels and the output panel. React uses JSX which needs to be compiled down to plain javascript. To demonstrate that JSX just an HTML-like syntax that compiles to javascript, I added a 2nd code panel that displays the compiled code. This is updated on the fly as the user types by running the code through Babel.

There are some examples that can be loaded into the application. Each example focuses on an idea in React and demonstrates it by creating a small React component which is shown in the output panel.

The panels are toggle-able and resizable. To build this, I used a Functional Reactive library called Kefir. I originally started exploring FRP after watching this excellent presentation by Philip Roberts. Modeling your data as asynchronous streams and declaratively transforming that data in a functional manor is a pretty powerful concept. (The standard body for ECMAScript has a proposal for making observables (streams) part of an upcoming version of javascript, which is pretty exciting.)

Spy Prayer

My co-workers introduced me to a game called The Resistance: Avalon. It's a hidden identity game in which player's characters are not known to certain other players. At the beginning of the game, everyone closes their eyes and a script is read to reveal some characters. I like to call this the "spy prayer".

The script is different depending on how many players and what characters are being used. This presented a good opportunity to automate the reading of the script. I created some logic to construct the script and used the speech synthesis API to read the script to the user.

Another interesting aspect of this program is that certain characters require other characters to be in the game. For example, if you play with Percival, you must also play with Merlin. I wrote some recursive algorithms to automatically select or deselect the required characters depending on what the user selects. For example, if the user selects Percival, then Merlin will be selected automatically. Similarly, if the user de-selects Merlin, then Percival will be de-selected.

Boggle

Boggle is a fun game and I thought it would be fun to build the game as a web application.

I wrote a recursive algorithm to search the board for the word that the user types in. The algorithm finds each instance of the word on the board if there is more than one.

I used D3 to draw the SVG lines to show the paths of the selected word. The lines are partially transparent so if there are multiple instances of the word on the board, the lines will be darker when they overlap.

The user can either type the words in the query box, or use the mouse or touch to click on the dice to complete the word. A list of the found words is kept and the score is shown for each word and tallied for the total.

Technologies used:Javascript (React, D3, Backbone), HTML, CSS, Gulp

Set

Set is a fun pattern matching card game that I like to play. The goal of the game is to find 3 cards that complete a "set" (see the rules here). I thought it would be fun to build this game as a web application that I can use when I don't have the cards with me.

I implemented an N choose K algorithm to find each combination of 3 cards so I could efficiently find all the sets. I used this information to add a "hint" button below the cards that tells the user how many sets are present (I programmed it to ensure there will always be at least 1!).

I used SVGs for the shapes so I didn't need to have different images for each shape/color/shade combo. This also allowed me to easily tweak the colors and size of the shapes.

In the future, I would like to learn about image processing so the user would be able to take a picture of the real set cards on the table and feed it to the application. It could then populate the grid in the application with the same cards. When you play Set for real, sometimes there isn't a set. Having this feature would allow the user to verify that fact before re-dealing.

Grocery list

I needed a simple grocery list application that I could use on my phone while at the grocery store. It was a perfect opportunity for me to investigate some new technologies.

In this project, I used backbone as the front end framework. When I finished the basic functionality, the interaction was dull, so I used CSS3 transisions to spruce up the experience by animating the adding/hiding/deleting of the grocery items.

I wanted two people to be able to use this app at the same time while in the grocery store so I powered the backend with socket.io to make the app respond in real time without the need to refresh the page. If I check off an item on my phone, it automatically reflects that status to anyone else looking at the grocery list.

I also used a build tool called gulp. It runs on Node.js and allows you to automate many tedious tasks related to building a javascript application, including compiling stylus, minifiying javascript, optimizing images, and creating a live reload server that automatically reloads when an asset (css, js, html) file changes. Very handy!

MIT Climbing Gym

I am an active climber and spend a lot of time at the MIT climbing gym. The gym's old website needed an overhaul, so I decided to rebuild the website from scratch as a side project.

The primary purpose of the site is to display the gym's upcoming and past hours of operation. A staff member logs in and is able to post hours of when they will be at the wall. The hours are shown in a timeline view that clearly shows when the wall is open and for how long. The view is especially clear when there are multiple overlapping hours.

MIT Climbing Gym - Mobile site

In order to simplify the view on a mobile device but still maintain continuity for the user, the upcoming hours are presented the same as the past hours on the regular site. The view combines overlapping hours into one block for readability, which is subtle but visually intuitive.

Web Scraper

As a gift from my cousin, I received a USB stick that was preloaded with the first 2 seasons of Radiolab. I started to enjoy the show and soon needed the rest of the 12 seasons. I noticed you could download the shows for free on Radiolab's website, but quickly got frustrated because I had to download them one at a time and the download links were on separate pages.
I thought, I could probably write a scaper that would download all of these for me. So I did! I used jsoup as the HTML parser and wrote a script that downloaded all 12 season, named appropriately and organized.