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
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.
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.
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 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.
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.
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.
MIT Climbing Gymhttp://scripts.mit.edu/~mitoc/wall/
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 sitehttp://scripts.mit.edu/~mitoc/wall/ (on mobile device)
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.
There is a mobile friendly page for most of the full website, including the about page with links to walking directions and a full searchable staff list that lets mobile users easily find the phone numbers of staff.
Staff can also add hours with a unique time picker widget, that I designed, that is easy to use on a mobile device.
Web Scrapercode on github
Update 2016: I just reused this to get season 13 and 14!
Java (jsoup), HTML, CSS
- Develop rich web applications with a focus on data visualization using D3 and React.
- Develop public facing e-commerce websites using Magento (an MVC PHP framework) and front-end web technologies.
- Work as team lead in an agile development environment with frequent releases and deadlines.
- Write tech specs, interact with clients, and organize tasks.
- Developed a tool to export a "ladder diagram" (a graphic diagram that shows packet traffic) from a java product to an interactive, e-mailable .html file.
- Designed and developed a "network map" web application using HTML5 canvas and wrote a custom physics engine to automatically layout the network nodes.
- Facilitated the technical merger of an acquired VoIP product.
- Java Development: layout/UI, DB data retrieval/writing, custom components.
- Bachelor of Science in Computer Sciences and Multimedia (Dual-Major)
- Relevant Courses: Capstone, Hypermedia, Human-Computer Interaction
- Worked two 6-month interships for MIT and Harvard
- GPA 3.265