The ITP Brain – ICM Final Project

Captura de Tela 2015-12-01 às 21.07.08

Hey Fellas!

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.

And for my final project, as I said in my last post, I decided to make a javascript visualization (using .p5) of the inQuery Project. The InQuery project is an assignment from ITP’s Applications Class, in which every 1st year student must talk about, in our class blog, one topic or thought that is very important and personal for us. This is an opportunity in which we are invited to write about anything that we feel passionated, indignant, curious or just something that we would like to discuss with other people.


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.

Networking Cartoon

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:

Captura de Tela 2015-12-01 às 21.06.56

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.

Captura de Tela 2015-12-01 às 21.06.23

Besides navigating randomly through the nodes in the brain, users can also search by term or name.Captura de Tela 2015-12-01 às 21.05.33

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.

Captura de Tela 2015-12-01 às 21.07.35

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:

Captura de Tela 2015-12-01 às 21.05.39

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);

In sum, I think this project was an amazing way to put everything I have learned about javascript together and I am very happy with the results. You can check the sketch out here and play with it:

I also want to say that I have learned A LOT this semester in ICM class, not only by doing this project but by doing all the weekly assignments. Not so long ago, whenever I heard the word html or javascript I would just panic and leave the room, letting other people do the job. Now, even though I know I am not the best coder in the world, I can do pretty cool stuff I never thought I could even think about! Coding to me has proven to be kind of a rollercoaster. You see it from far and say “Heeey, that is so scary!”. Then, surprisingly your friends convince you that it is actually pretty cool and that you are gonna have fun. So once you realize, you are already sitting in the 1st cart cursing everyone that got you into this (when actually, it was yourself). But once you are there, there is no way back. The ride starts and, before you have time to think about it, you are going up and down. It is fast. You are screaming, having panic attacks, occasionally laughing and by the time it is over you have no air. Also you are so glad you did it. And you want to do it again.

So I guess I will be back next semester with more rollercoaster adventures, moments of desperation X happiness and tragedy X comedy. See ya!

Leave a Reply

Your email address will not be published. Required fields are marked *