Interactive News Map

Intro to Computational Media

Interactive News Map



This project was originally a data visualization of all the ITP students. Each circle represented how many people from ITP are from that specific Country. We took this idea and developed it further and decided that because of all the political madness that was going on in the USA during the elections period, no one paid much attention to all the news going on around the world.  Therefore, the idea is that it is important to always know what is going on outside your own little bubble. This map is used as a platform that allows you to watch the news (and other videos) by clicking on a specific Country. In the future we would like to make it 3D, and a worldwide platform where people can instantaneously upload their video and directly see it on the map.

For this project, we focused mainly on the content of the map, and made sure to make it as simple as possible in order for people to know what is happening when looking at it. However, we would like to expand further with this concept, and add in a zoom effect, where by clicking the Country you are instantly zoomed into cities, and towns, of which will have other videos as well. We would like to make it like this because some Countries are either too big to identify one piece of news to it, or because some Countries such as Cyprus are divided. For example, the news in Ohio might be different from the news in New York. We would also like for people to be able to upload their own videos, thus becoming a platform available to the entire world.


The data was collected from ITP students in a form that we sent out. We sent out this form to ensure that we were not missing any people, and we also wanted to make sure that everyone sent us a link of related news from their country. That was our way of making it person to ITP.

Submission form:


This project made me understand a lot more about web developing in general, and the ability to code for any website is an incredible skill to have. I would say that this project opened up other “doors” for me, and by continuing this project I hope that Alexia and I have a worldwide platform where everyone is able to contribute and be a part of.


Intro to Computational Media

This week we were doing sound and video in p5.js, and I chose to play around with video. I took this video of these pigeons bickering outside the window of the 4th floor in the Tisch building, and for my presentation I loaded this video into the code 3 times to get the tinted background birds. I then added what would be a timeline, so you can move the ball across to pick different scenes, and to pause the video. However when you pause the video, one will always continue to play.

For our final, my teammate and I were thinking of doing video with sensors – we want to create an installation were the video on a projector is controlled by some form of sensor. So this was something that I was trying to play around with when doing this homework.


var vid, vid2, vid3;
var slider, redSlider;
var inputColorVal = 1;
var playing = false;
var completion;
function setup() {
createCanvas(800, 800);

vid = createVideo(‘birds.mp4’);

vid2 = createVideo(‘birds.mp4’);

vid3 = createVideo(‘birds.mp4’);


function draw() {
completion = vid.time() / vid.duration();
ellipse(completion*width, 50, 20, 20);

tint(255, 127);
tint(255, 127);

function mousePressed() {
if (!playing) {;
vid.time((mouseX/width) * vid.duration());
playing = true;
else {
playing = false;

API + Giphy

Intro to Computational Media

So this week, we were playing around with data and API’s. The idea of being able to gather information from other big organizations and implement them into our projects is a very exaggerated image in my head, because the possibilities are endless – it’s like hacking, in a spy movie. Anyway, apart from my bad humor, because the possibilities are so many, it was a struggle to come up with an idea for this project. However, after watching the videos, I decided to go with a giphy search engine. I wanted to do something with videos and API’s, for example, how many times do people share a certain video on Youtube? and then visualize that. Or how many times does Trump say china in his speeches? Using video of course to visualize it. Since we are working on video next week, I could maybe incorporate the API and Data with whatever we learn with video and sound.

My project this week as mentioned, was a giphy search engine, where you basically search whatever gif you want to see. I basically used the giphy search that Dan Shiffman talks about in his video, and then edited it in order to create a search engine and a much more direct way of searching for that gif.

My main question for this week, is how do you import p5 code from the offline editor, to the online web? Thanks.


Week 7 – DOM library

Intro to Computational Media

This week, I put in a video of my cat into the P5 sketch, and made it open up in a local host on the webpage. It is a video of Nacho (my cat), licking his toes, which I think is really really cute.

Ideally, I would really like to make something cool with my videos in P5.js, as videography and photography is what I like to do. However, I was not able to upload a video in the actual p5 web browser, just the application and I would know how to do that. Also, the link of the video cannot be sent to anyone else – why?


Here, you can see that I added the java script into my HTML script, which allowed my to upload the file of Nacho.


I also tried transforming the video into a webm video, however that could not upload into the p5 web editor, so I used the code above instead.

Synthesis / week5

Intro to Computational Media

For our synthesis week, my partner and I translated this image of a dog using the potentiometer and a digital analog code on Arduino. I really enjoyed doing this because it gave me a lot more understanding of how the Arduino works, and it was also really fun working with someone to create this.


I also created a sketch, which would show the lyrics of “Live for the funk” by Biggie Smalls, every time you click the button.

Construction function:

So if you can control the bubble, how would you be able to make a sketch that would make the image pop up instead of a bubble?



Intro to Computational Media

Function Parameter and Arguments

Just like the lollipop example in the video, I decided to make a simple shape in order to understand how functions work, so I decided to draw a cat eye.

screen-shot-2016-10-05-at-7-02-13-pm screen-shot-2016-10-05-at-7-03-11-pm screen-shot-2016-10-05-at-7-08-26-pm screen-shot-2016-10-05-at-7-13-06-pm

However, I find that this way does not continue to keep my shape the way I have designed it to begin with. It is indeed a good way to organize our functions, but how do we really control these functions.

Functions and Return

I converted CM to Inches for my function and return, and it worked quite well!


Functions inside an Object

By using the youtube video, I tried copying the code in order to understand what was going on, but the code did not match what was happening in the video. Why?


For my Visual Language class, we had to make a design of color. For my class, I tried to implement p5.js into this design, in order to make something a bit more outgoing. I started playing a lot with my photographs this week, and with putting in photographs and music into p5.js. I also looked at the examples, and tried to change them a little to make them more my own. Here are some examples:


Week 3

Intro to Computational Media

This week, we worked in partners to create a code which contained a slider, and a constant movement. First, I want to say that I loved working with someone, because if I did not know how to do something, or if Tong did not know either, then we worked together to figure it out. We both had some ideas that we wanted to create, and together we were able to create these ideas together at the same time. We first looked at all the example codes, and then were able to decide on what we wanted to do. The idea was to create a bouncing ball, in which the slider would then turn into a square – the first initial idea did not work out, and we ended up coming up with this code instead – which is a bouncing ball that becomes smaller or larger depending on where you put your slider.



If you notice, in the video below, you can see that I can even add shapes and change the colors.

Also, Tong and I have the same code, but we are able to have different coloring effects and shapes on each code. So we have the same one, but both designed it the way we want it to be designed.


Week 2

Intro to Computational Media

Create a sketch that includes (all of these):

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

I did a bunch of sketches just to get the hang of doing what our homework told us to do, and the first reminds me a little bit of paint ball, where all balls have different colors, and by touching the screen you are able to move the colors. The big ball changes every time you restart.

The second sketch is representable of how I felt about my week, as it was, and still is, a long and tiring week.

I am still struggling to DRAW using p5.js, there are so many things that I would like to design, that honestly are really difficult for me to apply in p5.js and then code on top of that. It would be easier to have to ability to just animate an image designed in illustrator, or a normal picture instead of actually drawing.

Sketch 1:

screen-shot-2016-09-21-at-6-14-45-pm screen-shot-2016-09-21-at-6-14-52-pm screen-shot-2016-09-21-at-6-15-07-pm screen-shot-2016-09-21-at-6-15-13-pm

Sketch 2:

screen-shot-2016-09-21-at-6-38-40-pm screen-shot-2016-09-21-at-6-39-06-pm



Week One

Intro to Computational Media

Little House

This week, we had to draw using p5js, which sounded very easy and did not seem that hard. However, when going through all the videos, and trying to actually draw the ‘house’ that I drew, I realized that it was a lot more difficult. I was struggling to get the coordinates correct, and to be honest, the drawing of the house definitely did not come out the way I wanted it to come out. I couldn’t figure out how to draw grass for example, or how to draw lines across the windows. The triangle took me a while to adjust, as it took me a while to realize the coordinates of each angle. However, after a few hours, I finally drew the house that you see here. It is not the best, and definitely not the prettiest, but after doing this I at least got the hang of the corners and coordinates.


After a while, I wanted to restart and make it more three dimensional, and so I ended up adding a quadrilateral (which was fun), and another rectangle. In general, as I have mentioned before, the house did not come out as well as I hoped it would, but at least I got the gist out of shapes and colors.


End result:

My main hobby is photography and videography. By dabbling into this genre of art, I realized that by being a good photographer, you not only have to have an eye for it, but you have to know how to use your camera well and know how to edit a photo. What I am seeing a lot by some artists, is that they take their photos, and make some kind of design out of them to make them much more visual. What I mean by this is that I would like to apply computation and generally some graphics and coding to my photographs in order to make them either more alive and real time, or to create some type of animation or painting through that. To be honest I am really not sure what exactly it is that I am picturing in my head, but the idea is to use technology such as computation to improve my photography skills, and to make my photographs a lot more inspirational and virtual.