[understanding networks week 2] Traceroute Commute

screenshot-2016-09-18-23-20-17

(See the project here.)

For me, the most fascinating part of learning the traceroute command this week was the idea that each IP address the packets move through is tied to a physical place in the world. It was interesting to see the common network providers in the sites I regularly visit, but I became mostly curious about the locations they were associated with.

I decided to trace three websites of places that I have regularly commuted to in real life, including ITP (Greenwich Village), and my two most recent jobs at The New York Times (Times Square) and Kickstarter (Greenpoint). All three of these places are located in New York City, but running a traceroute shows that the packets bounced around to more far-reaching places in order to get to their respective websites.

I started by running the traceroute command in my command line:

screenshot-2016-09-18-23-24-11

I then used Maxmind to find the associated coordinates and other info based on IP addresses:

screenshot-2016-09-18-23-34-56

I then put all that data in a CSV file, which I changed into JSONs to make the data easy to work with.

From there, I used the Google Maps API to build a little page that would find a streetview location for every IP address passed through during the traceroute for itp.nyu.edu, kickstarter.com and nytimes.com.

The result is a sort of internet “commute” for the places that I have physically commuted to.

screenshot-2016-09-18-23-46-57

Of course these places aren’t exactly “accurate,” but it’s interesting, for example, that the last stops for both nytimes.com and kickstarter.com are in Seattle, probably because Amazon is there.

One note: I think it’s kind of funny how much more time my real world commute takes than this cyber commute, in spite of ostensibly shorter distances.

Anyway, this was a fun exercise in making the internet feel a little more physical.

The project is here, and the code is below.

https://gist.github.com/nicolehe/7e4fad768525690f1bf641d39d428424.js

[rwet week 8] petfinder + nytimes biographies

Screenshot 2016-04-01 14.25.48

Last year, I learned that Petfinder has an API, which was a pretty amazing discovery. For this project, I used its Get Random Pet function, which randomly picks an adoptable pet from its database.

From there, I extracted the pet’s name and description from the JSON file.

I then took that pet’s name, and used the New York Times article search API to find articles with that name as a keyword. I then took the “lead paragraph” from the first article chosen.

I used the NLTK library to split sentences into lines, and then made a little biography poem with alternating lines from each.

I’m pretty happy with the results, though if I had more time I would clean up the code so that it works more consistently. (For example, it currently only really works if the pet name is just one word.)

Screenshot 2016-04-01 14.28.10

Screenshot 2016-04-01 14.36.31

Screenshot 2016-04-01 14.41.21

 

Screenshot 2016-04-01 14.50.44

 

Screenshot 2016-04-01 14.56.59

 

Screenshot 2016-04-01 15.03.52https://gist.github.com/nicolehe/5943a8beb734b5bee5c874eb3a98f6d0.js

[rwet week 7] midterm: please visit the forum

Screenshot 2016-03-24 22.46.48

For my midterm, I made a “new” poetic form I’m calling “Please Visit The Forum.”

There are a lot of forums on the internet, covering pretty much all imaginable subjects for all sorts of niche interests and communities. I wanted to generate new weirdo community forums, each including a URL, moderator name, contact info and some popular topics.

Screenshot 2016-03-24 23.24.45

I downloaded a bunch of JSON files from Corpora, and then picked two of those files each time. I then mashed the words together in different ways for each of the categories.

While I found Corpora delightful and very useful, I could only figure out how to make this work for a limited group of lists that were formatted in the same way (so that I could consistently grab the values from a specific key in each list).

Screenshot 2016-03-24 22.48.33

My goal was to capture the feeling of surprise and intrigue that you get from discovering a niche community on the internet that you didn’t know about before, and some of the results of my program I thought were pretty effective.

Screenshot 2016-03-24 22.47.27

I think this is this could be more effective and interesting with a larger data set, perhaps with more live data or something more generative. Hopefully I can explore that with later projects.

Screenshot 2016-03-24 23.36.20
https://gist.github.com/nicolehe/77996f26a2286fbf8dfd.js

[live web week 6] midterm: swap chat

Screenshot 2016-03-09 10.26.21

Try Swap Chat here.

For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.

One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.

In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.

I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:

function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);
}

From there, I executed the picture-taking code, and added that photo to the text that the original user sent.

There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.

There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.

Screenshot 2016-03-08 21.07.34

I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……

See Swap Chat here.
https://gist.github.com/nicolehe/7e1851098f751d7a1609.js

[arcade week 2] Two Buds

Screenshot 2016-02-11 12.45.15

Click here to try Two Buds (only works in Safari or Firefox).

This week I started learning about Unity in 2D, as well as using scripting. I made a game called Two Buds, where you have to control two characters at the same time. The penguin catches the fish and the monkey catches the bananas, and if any object hits the floor, the game ends. The scoring is just by how long you last in the game.

I had problems upon exporting, mostly with the way I had set up the text because the resolution size changed the positioning once it was exported. Also, it seems to kind of slow down and freeze when I play it? Not sure if that’s just me…

Anyway, glad I made a working game – looking forward to making my own sprites soon.

[live web week 2] chatroom to dispel loneliness

Screenshot 2016-02-09 22.17.38

Well this might be the homework assignment that resulted in the strangest experience for me. I did the assignment to spruce up the chat page and run it on a server in the cloud, and tested it with myself in different browsers when I was done (screenshot above).

Then I did something that was probably not advisable, which was tweeting the URL out to the public.

Suddenly, it got interesting:

Screenshot 2016-02-09 22.49.36

I hadn’t even considered what would happen if there were multiple people on the page chatting at once, but as some indeterminate number of people joined, it became this sort of intimate anonymous chat room.

Then, people started doing things that I didn’t even know was possible:

Screenshot 2016-02-09 23.11.07

(It turns out not disabling HTML/Javascript in the input box allows people do to….a lot of things.)

I’m not sure how many people were on the page or even who they were, but it was fascinating and felt really poignant to me. I didn’t expect to have created this strange little portal on this Tuesday evening.

I decided to shut it down before someone did something to ruin the nice experience:

Screenshot 2016-02-09 23.23.46

URL: http://162.243.91.198:8080/

https://gist.github.com/nicolehe/2f3b63da25b250ad850b.js

[icm week 8] Soulmate Machine (data & APIs)

Screenshot 2015-10-26 00.07.42

(TLDR: Check out the Soulmate Machine here.)

For this week’s assignment to work with data, I’m not sure why, but I knew pretty quickly that I wanted to use Petfinder’s API.

If you are tragically unfamiliar, Petfinder is a website where you can find all sorts of adoptable pets across the country.

I signed up for an API key, read the documentation, and got to work pulling JSON from their site. They had a rather interesting “get random” method that allows you to find a random pet in their database, picking from specific characteristics like breed, size, age, and more.

I thought it’d be fun to make some kind of pet “matchmaking” based on some questions you were asked. (I certainly have a soft spot in my heart for internet quizzes).

I picked 5 questions for 5 characteristics — location, gender, species, age and size. Each answer sets a different result. For example, if you pick “bud light” under question 3, you’ll get a dog.

Screenshot 2015-10-26 00.20.45

The page is not much to look at, and that’s largely because I had a lot of confusion with combining DOM in p5 and also editing CSS and the HTML file simultaneously…Organizing things on the page in a way that didn’t look awful was difficult (and I still haven’t succeeded). I also couldn’t figure out how to do certain things like make a button open a link. I think the combination of using P5 and CSS was confusing in particular.

Sometimes, particular answers don’t actually have any adoptable pets (for example, an extra-large baby pig in New York). One challenge I had was figuring out how to 1) read the JSON file to confirm that this was the case, and 2) write the code in p5 to reflect if there was no match. I’m happy to say I sorted it out by looking in the JSON file and seeing that there was no “pet” name when there was no match, so I simply wrote the line if (data.petfinder.pet == undefined) followed with some text saying that there was no match.

Screenshot 2015-10-26 00.36.43

The concept for this project was a bit silly (which is increasingly looking like a theme in my work…), but the nice thing about using a real API is that it’s actually connected to the real world of pets that need homes. On the match page, you can click the “in love” link to go directly to your soul mate’s Petfinder page, and maybe even adopt!

You can try Soulmate Machine here. My P5 code is below.

Continue reading “[icm week 8] Soulmate Machine (data & APIs)”

[icm week 7] The Beautifying Mirror

Screenshot 2015-10-14 12.53.41

(See The Beautifying Mirror here.)

It was fun to move out of the canvas with DOM this week. All the HTML/CSS stuff really brought me back to my early days on the web, hand-coding Harry Potter fansites in middle school. (Back before we thought this might actually be a useful skill to pursue!)

That’s probably why the page I made this week is sort of early-2000’s nostalgic in style. I wanted to do something with the webcam feature, so I pulled a frame image off the googles and set the camera capture inside. My goal was to play with the idea of “improving” your appearance with the slightly disparaging encouragement of the text on the page. I hope it’s at least a tiny bit unsettling.

IMG_0452
my friend Chris tests the mirror

I made my buttons and text in my sketch and created a separate CSS stylesheet.

In the future, I’d love to take this idea a little further with facial tracking software and the ability to screenshot your final image. (And probably better assets that weren’t just random things I found as quickly as possible.)

Check it out!

My sketch.js code is below, but it doesn’t include my stylesheet or index HTML.

Continue reading “[icm week 7] The Beautifying Mirror”

[icm week 4] Allergic to Love, v2.3

Screenshot 2015-10-01 00.33.44

[TLDR: Here’s the second iteration of my game, Allergic to Love.]

Our assignment this week was to clean up the code of a previous assignment, which was quite welcome because my code from last week was a total mess. I’m not completely sure that it’s now sparkling clean, but it’s definitely much better than it was before.

Before I made any changes to the game, I went in and reorganized the code. Having not yet learned arrays or objects in class, I was wandering about in the array wilderness a little bit last week and ended up doing something really weird with them. I think I fixed them up now after looking up how to do an array of objects. I found the jitterbug example  to be particularly helpful. Now my falling hearts are arranged like this:

function Falling() {
  this.x = random(width);
  this.y = random(-650, 0);
  this.broken = 0;
  this.hitByLaser = false;
  this.hitTheGround = false;
  this.speed = random(1, 4);
  this.clr = color(255, random(0, 255), random(0, 255));

  this.move = function() {
    this.y += this.speed;
  };

  this.display = function() {
    strokeWeight(7);
    stroke(this.clr);
    fill(this.clr);
    bezier(this.x, this.y, this.x - 12, this.y - 12, this.x - 11, this.y + 8, this.x, this.y + 14); //left 
    bezier(this.x, this.y, this.x + 12, this.y - 12, this.x + 13, this.y + 8, this.x, this.y + 14); //right 
  };

 

I went in and created a lot of my own functions as well.

Finally, I started adding on to the game itself.

Screenshot 2015-09-30 23.21.22

Adding sounds made a big difference. I found music from the Free Music Archive and sounds from Free Sound. I’m not really sure where the proper place to attribute would be…I put it in comments in my code for the time being.

Screenshot 2015-09-30 23.23.11

Besides sounds, I made a few other changes — the girl now bounces up and down, the landscape is a bit different, and she smiles if you win the game. (But it’s still pretty hard to do so!)

Play the game here.

My full code is below.

Continue reading “[icm week 4] Allergic to Love, v2.3”

[pcomp week 4] The Lonely But Tender Ghost v.2, now with sound! (analog outputs)

IMG_0272

It was fun playing with speakers and servo motors this week. After doing the labs, I focused mostly on doing things with sound, but in the future I’d like to spend more time experimenting with servos…

In the tone lab, I had some fun with the pitch library, and found it pretty easy to change the song played to something else:

I wanted to continue building on my lonely ghost project from last week. When I last left it, I had hand-sewn an FSR that caused an RGB LED to change colors depending on how hard you squeezed it. It was supposed to express “feeling” with the colors — green was good, red was bad. At that point, using colors were the only output.

I added a speaker to my breadboard and worked on adding sound in addition to color as feedback for the toy’s feelings.

IMG_0270

The first thing I did was add the tone() function to the code so that when the variable “force” was 3 — that is, pushed the hardest, the speaker would make a noise in addition to having the LED turn red.

I thought the ghost could be made to be a bit needier. What if it got lonely if you didn’t pay attention to it for a period of time?

I used the millis() function to count the number of milliseconds that have passed whenever the ghost was squeezed. I then set a variable called lonelyTime, which was the amount of time it that could pass before the ghost got lonely. When the last time squeezed subtracted from the current millisecond count exceeded lonelyTime, I had the speakers make a tone. It would stop when you squeezed it again.

(I used the same method to make the LED blink when you weren’t squeezing the FSR, which I thought was a more natural neutral state than having the light just be white.)

This was nice, but all of the tones sounded pretty boring and static. That’s when I realized I could use the pitches library, like in the tone lab, to compose custom sounds for each state. I ended up making three:

in pain
in pain
happy
happy
Screenshot 2015-09-29 13.17.28
lonely

I was a bit surprised by how much more effective the custom sounds were at expressing feeling compared to the basic speaker tones.

Now, the ghost feels much more like a pet or a needy toy. When he’s lonely, the light will turn yellow and he’ll make the lonely sound until you squeeze him. If you squeeze him gently, the light turns green and he makes the happy sound. If you squeeze him too hard, he’ll make a distressing sound and the light will turn red. The blink effect makes it feel more alive as well.

Check out the video (with sound) here:

My Arduino code is below.

Continue reading “[pcomp week 4] The Lonely But Tender Ghost v.2, now with sound! (analog outputs)”