I bet the person who came up with the saying time just flies studied at ITP. Can you believe the semester is almost done? That ICM classes are over? Well, it all went just incredibly fast and, for better or for worse, it is coming to an end.
So the main reason I took an interest in this project is the fact that I think that ITP students have very interesting and intriguing thoughts that most people don’t know. I also think these thoughts must be shared beyond our walls because, to be honest, almost no one knows what is going on here. So I wanted everyone to know what intrigues us and to create an opportunity for people with similar interests (inside and outside ITP) to connect and create great things together.
So speaking about the project in terms of interface and usability, it is basically a sketch of a human brain in which nodes are moving around. The user is invited to touch one of the nodes and once he does so an inquiry pops up on the screen:
This inquiry is one among all the ones that have been uploaded by the ITP’s students throughout the 2015 fall semester. The user can view the inquiry, the name of the person who wrote it and also its e-mail. This way, if the user feels interested in discussing the subject with the author of the question, he can get in touch with the ITP student.
Besides navigating randomly through the nodes in the brain, users can also search by term or name.
For example, I can type the word “design” in the input box and all the inquiries that are related to this topic will be highlighted among the other brain nodes.
This way the user can go through topics that he finds relevant in an easy and quick way. Also, if the user is looking for a person’s inquiry in particular, it is possible to type a name and the corresponding node will also be highlighted.
In terms of design and visuals, I wanted to make the sketch colorful, intuitive an inviting for the user. I also wanted to play with the concept of a thinking brain. And for me, with no background in human neurology or anything related, a thinking brain is a bunch of neurons that are constantly making connections between each other. So, based on that concept, I have created lines in the sketch that keep connecting and disconnecting the nodes based on the distance they are from each other at that exact moment:
In terms of the code, I wanted to apply a lot of the concepts I learned in class. Also, my favorite topic in the semester was using external data and creating interesting forms of visualization of it, so I definitively wanted to work with that. A few things about the code that I find interesting to share:
- I wrote my own JSON file instead of pulling the data from the blog;
- The movement of the ellipses around the space was quite tricky. In the end I had to apply some physics to make them bounce around when bumping into each other;
- Because there are many particles in the sketch and each of them has to do a lot of calculations related to the location while moving around the code was running very slowly at some points. It was very important to clean the code in order for it to execute the smallest number of functions as possible for the sketch to run smoothly.
- The brain outline is a PNG file with a transparent fill. This way the nodes are moving behind the image it but it gives the impression that they are inside it.
- It was very important to set a starting value and an updated value for the radius of the ellipses in the constructor function. That made a big difference in the way the nodes.
- Google fonts is a great source of free online fonts. It is also pretty simple to add these fonts to the .html code.
- For loops and if statements are some of my best friends nowadays (even though we have some tuff moments where we just cannot speak the same language);
So I guess I will be back next semester with more rollercoaster adventures, moments of desperation X happiness and tragedy X comedy. See ya!