Category: Housekeeping

p5.gibber

I found this library interesting because before the semester ends I want to create some kind of sound visualization. Looking at the examples of this library, I think it can not only be used in sound visualization sketch but also create simple synthesizer with p5.js. It seems like there is a separate function for controlling frequency as well, allowing me to create an interactive sketch that changes the sound. There is a whole online manual dedicated to this library so I have to spend some time figuring out how things work.

While on the p5js website, I found the dimensions library extremely interesting because it allows you to expand beyond the three dimensions typically found in p5js. The library expands the vector functions of p5js to make the dimensions work. On the p5js website and under the dimensions library, there is a picture of the square that seems to have multiple dimensions and that’s what peaked my interest initially. I think it would be challenging, but fun to work with multiple dimensions beyond the three we typically work with. In processing, working in 3D was confusing, but I think a lot of cool sketches could be made just by fooling around and changing the variables and the number of dimensions. I would potentially want to make a sketch that somewhat mirrors the galaxy because when I think of dimensions, I think of space; I would want to experiment with the effects and functions of the library to see if I could make a similar effect.

https://github.com/Smilebags/p5.dimensions.js

One P5.js library I am interested in using is p5.dom. p5.dom lets you interact  with HTML5 objects beyond the canvas, including video, audio, webcam, input, and text. One of the reasons that I initially came to NYU as a Computer Science Major was because I was drawn by the reach of CS; that something I could do from one computer could potentially reach millions of people over time. It’s always been about reach for me, and really maximizing my efforts. This is partly why I’m more inclined to use p5.js which allows you to display and interact with your work online, much easier than Processing because its written in JavaScript instead of Java. Based on what drew me into CS in the first place, the concept of libraries is really interesting because it introduces the potential to get even more from the code that I’m writing. I see myself continuing to code beyond this class, and even beyond college into my adult life, and the way I envision it is not through heavy backend that doesn’t really see the light of day, but through creating art and being able to share it with people. I’m taking Intro to Web next semester and I’m very excited by the potential of being able to use what I’ve learned in p5.js, as well as the library p5.dom to compliment the work that I’m doing in that class.

This project allowed me to think about how I could incorporate my own interests into the code. However, I had trouble working with p5.js on my computer. I understand how the code needs to be written, but was unsure if my API was working or not. I tried multiple API’s yet there was no change. When I settled on the Bitcoin API, I tried multiple approaches but still couldn’t figure out how to get the code to print.  I still felt like this project was interesting and hope I can figure out what was wrong after today’s class.

This assignment gave me a lot of trouble, and caused me a lot of confusion. Searching for different APIs that I wanted to use was fun, but trying to get the API keys were a pain. I kept having to throw out ideas simply because I couldn’t get an API key. I’ve signed up for countless websites, but for some reason I haven’t been getting any data.

I found a really cool API that has data of random facts for every number. My idea was that the user could type in a number and a random fact about that number would pop up. I would have it refresh whenever the user presses a button. I still can’t seem to get the API to work, which is frustrating. I’ve watched all of the videos on using API’s, but this is still confusing to me.

My sketch is based on Studio Ghibli API, which is one of the public APIs from the github page. I also looked into few other APIs under the topic of games (Rick and Morty and Amiibos), but I had difficulty loading the JSON from these APIs. At first I thought this was because different APIs need different call functions(?). The descriptions of the APIs talked about GET HTTP or REST calls and etc. that I couldn’t quite understand. All of the APIs that I was interested in did not load at first, so I found httpGet() from p5.js reference page and used this example to successfully load the Ghibli API (other datas did not work with this), although I don’t understand the syntax.

My sketch isn’t anything cool with animated shapes, but it pulls title, description and rt_score from the data and allows the user to look through different Ghibli films with a mouse click (it would have been nice if the data included image urls as well).

Ghibli Sketch

Today, after Alex’s slack message, I tried using console.log() instead of prinln() and Rick and Morty data started to work. However, now I am faced with another problem of not being able to load the image from this data. If I preload a specific image url from the data it works, but I cannot figure out how to load the image after loading the data.

Rick and Morty sketch attempt

This was definitely one of the tougher assignments me for me especially because I couldn’t make it to class on Friday. So I watched the video series the professor posted and read some documentation and got to work looking for an API that had  a lot of data and was based on something that was practical to display visually. I got access to an API that contained basic data from all the worlds countries like, name, population, rank, and percent global contribution.  Below is the link to my sketch.

https://www.openprocessing.org/sketch/529279

This week’s assignment was more difficult than most for me because not only did I have to come up with an idea for the visualization but finding which API information I wanted to use. Finding an API was difficult; a lot of them required you to disclose why you were going to use it and you had to apply and then get approved. I ended up using Spotify, but I had difficulty because only some of my API requests originally worked; sometimes they would say that I didn’t have access. Accessing the data within wasn’t very difficult; I just followed the path through the array to find what I wanted. I decided to take artists that have died and then show how many followers they have and how popular they are in the United States. I think it’s interesting that despite their death, their music continues to be increasingly popular. I also added pictures of them at their peak to add more to the visual aspect.

First, it took me some time to find an appropriate API that has well organized data so I could utilize it easily.  Many APIs from the list that professor gave were not working or I am not sure if I was making any mistakes. However I found an interesting API called Cryptonator API that spreads Cryptocurrency data. In this project I decided to display conversion of past 24 bitcoin trade volume to USD so people could notice how big the market is at current moment.