Tag Archives: midterm

[sims 2014] Ribbons


ok, finally released a stable version of this drawing tool for anyone to test it!

download here


[sims 2014] Ribbon drawing prototype

Screen Shot 2014-12-01 at 11.20.36 PMI’m trying to finish this “ribbon drawing” tool. It is now stable, allowing users to add, reset and erase the shapes. I also added some new physics simulations (attraction, wind) and fixed others — springs are stable and oscillation can interact with other simulations.

Finally, I added the option to “playback” the drawing and record everything as a png sequence — so people can use it to make videos.

Github repo here.

[sims 2014] Ribbon drawing prototype (midterm)

Screen Shot 2014-10-06 at 11.18.33 PM

Screen Shot 2014-10-06 at 11.20.42 PM

I’m trying to make this drawing tool that generates ribbons. The final goal is to allow people to draw some interesting things — I can only think of calligraphic shapes, but anyway. And, hopefully, they can apply some physics effects and export everything as a video.
This tool has ONE user in mind: Laura. She needs it to make some letterings.

Everything on the class github.

Moneytime – Data Visualization Project Proposal

1. The topic you are interested in for your final.
Personal finances. I am still pursuing a way to approach the topic in a different way from the existing apps.
I want to make a Chrome extension that will convert any money value from any web page to time value. For example, while navigating through the Amazon website, users would see values such as “5 hours”, “3 months,” “15 minutes” etc.

2. How you will research (find data, check its source, further investigation).
We* are still discussing how exactly this conversion will work. Our first idea was to make a simple (total income)/(total hours of work) calculation. Though simple and straightforward, this equation might not make sense for everyone. People we have been talking to have mentioned a different value for working time and leisure time, for instance.
Anyway, the extension will certainly ask users for some information before making any conversion. It also needs to connect to an online service to check exchange rates — to convert values between different currencies.

3. What is the story you are trying to tell? THIS MUST BE ONE SENTENCE ONLY.
How people can see the money they spend through a non-monetary perspective.

4. What kind of visualization you want to make (bar, pie, tree, etc.)
The final result doesn’t fit in any of these visual categories. Instead, the intention is to display the converted value as html text, using the same styling as the original monetary value. That is important to keep the visual consistency of the page.
Also, I think that “visualization” should refer to any device that helps people understand better a set of information. That can be achieved by means other than “visuals.”
In the case of this project, translating money to time is a way of making people “see” their spendings in a more insightful manner. This translation doesn’t have the intention of making people spend less, save more money, plan for the future etc — the usual goals of regular finance apps. Instead, it proposes a critical view on the topic that might be interpreted differently according to each individual’s relationship with his/her own money and time.

Dynamic Interfaces Midterm – Final

In collaboration with Apon Palanuwech.

Screen Shot 2014-04-14 at 1.12.26 PM

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.

To play the game, go to www.apon.io/live/pelada on your computer. Then, access the same address in your phone.

Dynamic Interfaces Midterm – Prototype

In collaboration with Apon Palanuwech.

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.

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.
Screen Shot 2014-04-07 at 8.43.57 PM
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: