Fortunately, Playtech was happening this weekend and we had a chance to playtest the game with more people. Things worked out better than we planned: we managed to have 18 people playing at once. The mechanics seems to work nice too!

We changed the game mechanics to act like a sort of soccer. The first prototypes still used the old controls, which were not very responsive. Also, allowing users to drag and rotate the bars in their phones overloaded the websockets communication.

We playtested with some friends and got to a simpler solution: use a simple swipe to move the objects. That way, the data would be sent to the server only when the users released their fingers.

Research
We spent weeks wondering about our proposals for this project and taking a look at different technologies that could help us — timbre.js, d3.js and SVG paths.
Then , we decided to go for the Lemmings idea and build it in one day, in a sort of hackathon.

Development
We split the team in server and client-side. Apon built the whole websockets communication and I started to build the game engine and visuals using a physics engine called matter.js.
It was hard to mix a physics game with Lemmings, though. The bars were terribly hard to control in a gravity-based simulation. We experimented with lots of different game mechanics — get the balls with the bars, hit the balls etc — and ended up removing the gravity from the game. Even so, the controls were not responsive enough:

a) Worm Tunes
A visual music synthesizer, inspired by the amazing Patatap. Users can draw their musical “worms” on their phones. Shapes and curves would be translated into sound and then plugged to the last segment of the collective worm. The final result would be a collective piece of music and drawing.

b) Help the Tribe
A Lemmings-like game. Users control virtual bars from their phones and should help the “tribe” — a bunch of rolling balls or polygons — overcome the obstacles and reach the final goal.

IdeaA visualization of your computer’s files in the style of Windows 98 defrag:

This project was the first assignment for Jamie Kosoy’s Dynamic Interfaces class. He asked us to design something that reminded of 1998. Made in collaboration with Apon Palanuwech.

DevelopmentEach square represents a file. Each color in the visualization represents a unique file type — js, jpeg, png etc. Hover over each square displays the file name and type.
The script is currently to go up three levels from the folder it is located. In my case, it reads all files from my user folder.

Idea
People are always saying that “last year wasn’t as cold as it is now” or “20 years ago you didn’t had that much rainy days in September”… What if they could actually make those comparisons?

1. DataI worked with the data from the Wunderground API. First, it gets three variables from today’s weather: temperature, high and low.
To make a proper comparison, I would have to calculate month or seasons average from previous years. I don’t know exactly what would make more sense. Also, my API account allows for a limited number of searches in the database. So, it would be impossible to search for several days/months/years.
Instead, I chose to make a comparison between today and this same date in a specific year. The user can choose from 1963 to 2012 (yep, 50 years was an arbitrary choice).

Wunderground’s API also provides you what it calls “almanac”. It is a list of historical variables for that date, like normal high, normal low, highest temperature ever and what day it happened.
I though that normal high and low would provide a reasonable parameter for comparisons.

2. VisualizationThis is a very simple line graph. The intention is to show how those 2 days compare.

The “normal historical” temperatures serve as a base for the comparisons. Two things needed improvement:
– make clear that the historical value is a secondary data;
– adjust the scale so that the main data is always readable.

Technical hurdlesI began with the wrong approach: pasting my own code and changing the syntax from openFrameworks to javaScript. It took a long time to work.
I stepped back then and made a simple exercise with arrays and objects. I assigned different colors to an object and assigned it to and array:It’s hard to believe that you can assign anything to an array element in javaScript. The code for that was:

Notes
1. At first, I used setInterval. But it seemed that the mouse response was slower with that. Dragging the mouse would leave separate circles in the surface, instead of a regular flow. I changed it to mouse move, then.
2. Even so, it doesn’t work as fast as in openFrameworks. I tried a lot of different things — changing the square size, decreasing the number of particles etc. That was the best I could get.
3. I was using the same code as in the previous assignment to make the canvas resolution look better in retina displays when in Chrome and Firefox. That probably added extra processing to it and slowed down the particles, since it doubles the pixels and then shrink them again. I removed that. I recommend testing it on Safari.
4. Interaction doesn’t work on Firefox. I have no idea why.