Category Archives: Data

API Data – Weather

I never got to figure out why my code wasn’t working in class! So I figured to finish it up at my dorm. I continued using the weather API again so I can see how it worked with my API key given to me by the website.

Here’s the website for a refresher:

https://openweathermap.org/api

With my code, I wanted to be ambitious and make icons for the different types of weather just like how Ruojin did for one of our assignments. But it was going to take a LOOONG while for me to figure that out. I was hoping to create different sizes for the icon to show how cold or hot or rainy it was as well as animations. Maybe next time. But for now, I just have a shape that changes its size depending on the weather in London. I tried to make this thing look pretty by the code printing out a flower made with long ellipses. This would’ve been so cool if I had this on an international scale.

Here’s my code:

let domain = ‘https://api.openweathermap.org/data/2.5/find?q=’;
let city = ‘London’;
let units = ‘&units=imperial’;

//use your own API key

let APIkey = “&appid=1032cc0d00462328907f269d50906fb9”;

let url;
let userInput;
let button;

let weatherData;

function setup() {
userinput = createInput();
button = createButton(‘submit’);
button.mousePressed(makeRequest);
createCanvas(400, 400);
}
function makeRequest(){
city = userInput.value();
url = domain+city+units+APIkey;
loadJSON(url, getData);
}
function getData(data){
weatherData = data
console.log(weatherData);
}

function draw() {
background(0);

if (weatherData){

sz = weatherData.list[0].main.temp;

text(‘the weather in ‘+ weatherData.list[0].name +’ is:’,10, 50);
translate(580, 200);
noStroke();
ellipse(width/2, height/2, sz, sz);
rotate(PI/5);
}

}

Data

For this assignment I worked to fit my temperature API call code , I never was able to get it to work after it was demonstrated in class however after taking another look at it and watching some youtube videos for help I was able to fix my weather code. From here I plan on displaying the data in more interesting ways; For example instead of showing the data using circles of different size I could use images of the sun or snowflakes to indicate how hot or cold it is in the city that the user decides to search

xcvbn

https://editor.p5js.org/cdh362@nyu.edu/sketches/BJeQHHnFTm

here is the video that helped me to fix my code ;

Data: MTA API

For this project, I practiced using MTA’s Transit API, containing train timetables, stops, real-time incident reporting, and more. Accessing the API was fairly easy, as the account required didn’t necessitate stating a reason for access and automatically approves all accounts created within a minute. What was more difficult was actually working with the API, as it uses a relatively complicated but powerful GTFS model developed by Google to standardize tracking between transit systems for Google Maps. Luckily, after quite a bit of messing around myself, I found an existing library that was able to be implemented in a Node server that interfaced with the object structure. Here was a small test app I made that output a northbound timetable for station id 635.

var MTA = require('mta-gtfs');

var mta = new MTA({

     key:'8f70b45180beaf6c972c2c098da6f426', // only needed for mta.schedule() method

     feed_id:1// optional, default = 1

});

mta.schedule(635, 1).then(function (result) {

console.log(result['schedule']['635']['N']);

});

This output a series of objects:

[ { routeId: '5',
delay: null,
arrivalTime: 1545056100,
departureTime: 1545056100 },
{ routeId: '6',
delay: null,
arrivalTime: 1545056370,
departureTime: 1545056370 },...]

Temperature: Low to High

Using the API that we used in class, I created a temperature visualization for the max and min temperatures. Max and min temperature are “deviation from current temp that is possible for large cities and megalopolises geographically expanded.” (OpenWeatherMap) So, because the temperature is not exactly known, I included the lowest, highest, and average temperature at a given point.

To make it make more sense to the human mind, I created a background that went from hot colors at the top to cool colors at the bottom so how humans react to this temperature can be visualized.

Here is my code:

let apiKey = “&appid=b57a680f34f3460d401be2d2f10fefd7”;
let domain = “https://api.openweathermap.org/data/2.5/find?q=”;
let city = “London”;
let units = “&units=metric”;
let url;

let weatherData;
let button;
let userInput;
let size;
let sunrise;
let temp;
let maxTemp;
let minTemp;
function setup()
{
userInput = createInput();
button = createButton(“SUBMIT”);
button.mousePressed(makeRequest);

createCanvas(400, 400);

//console.log(url);
}

function draw()
{
background(255);
noStroke();
fill(0, 31, 188)
rect(0, height/6 * 5, width, height/6);
fill(144, 229, 255);
rect(0, height/6 * 4, width, height/6);
fill(115, 255, 73);
rect(0, height/6 * 3, width, height/6);
fill(255, 255, 40);
rect(0, height/6 * 2, width, height/6);
fill(255, 111, 0);
rect(0, height/6 * 1, width, height/6);
fill(255, 0, 0);
rect(0, height/6 * 0, width, height/6);
if(weatherData)
{
temp = weatherData.list[0].main.temp;
maxTemp = weatherData.list[0].main.temp_max;
minTemp = weatherData.list[0].main.temp_min;
stroke(110);
fill(110);

ellipse(50,(300 – (minTemp * 7.5)), 5, 5);
ellipse(175,(300 – (temp * 7.5)), 5, 5);
ellipse(300, (300 – (temp * 7.5)), 5,5 );

text(“lowest” + ” (” + minTemp + ” C” + “)”, 50 + 5,(300 – (minTemp * 7.5)));
text(“average” + ” (” + temp + ” C” + “)”, 175 + 5,(300 – (temp * 7.5)));
text(“highest” + ” (” + maxTemp + ” C” + “)”, 300 + 5,(300 – (maxTemp * 7.5)));

}
}
function makeRequest()
{
city = userInput.value();
url = domain+city+units+apiKey;
loadJSON(url, getData);
//console.log(url);
}
function getData(data)
{
weatherData = data;
//console.log(weatherData);
}

 

And here is a link to my project!:

https://editor.p5js.org/aramakrishnan/full/rkWd7nFTX 

 

 

Search Giphy Get Images

For my project this week, I decided to use the giphy API. It was a bit complicated and I didn’t come out with what I thought I would. I wanted to use the search API to allow my user to search for anything in the giphy arsenal and have 3 gifs come up in my p5.ja sketch. But I across a few problems. One problem I came across is the JSON viewer on Chrome didn’t read the API and come out with images it gave out specific URLs, much to my chagrin.

1

Because of this, I had trouble trying to extract the actual gif from the URL that was given to me. Using the loadImage function didn’t allow me to load the actual links of the gifs and only the first still image of that gif, because the loadImage function requires the link or image to be in ‘quotes’ and that changed the link.

2

So I got the images to load, but they all loaded on top of each other, because I had to call them somewhere and 0, 0 was my best option. I think a nested loop would help remove the canvas to put the images one after the other, but I’m not sure how to do that specifically.

I also found that the first image of the cat on the laptop does not change with the multiple searches no matter how many times I search for something different.

3 4

If you can see the wood picture is the same throughout all the images I embedded in.

Here is the code!

var pics = [];
var img = [];
var link = [];

function setup() {
createCanvas(400, 900);
input = select('#keyword');
var button = select('#submit');
button.mousePressed(ask);
}


//https://api.giphy.com/v1/gifs/search?api_key=OJy4WfGXwJS5T4PCn3HB0MwyzxJko9I0&q=&limit=25&offset=0&rating=G&lang=en


function ask(){
var first = 'https://api.giphy.com/v1/gifs/search?api_key=OJy4WfGXwJS5T4PCn3HB0MwyzxJko9I0&q=';

var rest = '&limit=3&offset=0&rating=G&lang=en'

var url = first + input.value() + rest


loadJSON(url,gotData);
// print (url);
}


function gotData(info){
var pig = info;
for (var i=0; i<3; i++){

pics[i] = info.data[i].id;
// pics[i] = 'link';
link[i] = ' https://media.giphy.com/media/' + pics[i]+'/giphy.gif';

print(link[i]);

loadImage(link[i],zhanxian);
}

}

function zhanxian(pic){
// pic.size(width,height);
image(pic,0,0);
// rect(100,100,100,100);
}


function draw() {
background(220);
if (pig){
for (var i = 0; i<3; i++){

image(img[i],0,0);
}
}
}



This is a video of this working!

Here is the link!

https://editor.p5js.org/samasrinivas/full/H1ScdK10m

Attributions:

@Cass for MAJORLY helping with my code!

@Helen for helping me debug my code!

 

Motivation/ Decision Maker

Initially, I wanted to use the Giphy API, but that really wasn’t working out and I spent a lot of time with it. I decided to go back to the example used in class in order to keep it simple.

So my concept revolved around those days where the weather comes to be the determining factor in what your plans will look like for that day. I made an interactive responsive decision maker that helps people determine how they should spend there day: either go outside or stay in. This decision is made based off of the weather data in their city. If it’s too cold the output will tell the user to stay in. If it’s nice out then the output will motivate the user to go outside and enjoy their day.  To add more personality to the output, the responses are more laid back and humorous.

fullscreen:

https://editor.p5js.org/yunglizard/full/S1zP8dkAQ

code:

https://editor.p5js.org/jeremycricchus@gmail.com/sketches/BkYoK2ta7

Data Assignment: Not Working

Code

So I tried to create a weather visualizer following this tutorial – which was very similar to the example in class. I’ve created the query string so that the url that is created and thus where the information is drawn from is in the form:

url = api + input.value() + apiKey + units;

This, however, does not seem to want to work and I cannot figure it out. No errors pop up, nothing just happens. I do, in fact, see the application of this – quite literally. All the weather apps that exist follow this same structure or principle in drawing information from a website, processing it via JSON or whatever proprietary method they choose, and then presenting it in a user friendly and aesthetically pleasing manner to the audience.

That final portion of the process would, from what I’m assuming, be set up only to have variables to show the temperature. In the case of a graph, each instance on the x coordinate would have a variable y that would be dictated by the api url. code

Sticker Generator

This homework assignment was only completed because of the help of Ellen– thank you!

I learned that I could easily utilize Giphy’s API. Since I am perhaps the biggest fan of the implementation of gifs in p5, I knew I had to use it.

I was able to use another student’s API project that use Giphy’s API as a reference (https://itp.nyu.edu/classes/cc-f18-tth/author/yc3355/). I also had a lot of assistance and guidance from Ellen during office hours, who walked me through API and helped me formulate my code.

At the end of office hours, I had a general code in which it took a user input and produced a transparent gif that was placed over the webcam output to look like a “sticker”.

I wanted to create a code in which a user could type in their name and a gif associated with their name could pop up onto their webcam screen. Thus, I set out to add upon the code that I had created.

However, I discovered that the API search is limited to only words that Giphy recognizes. For instance, while on Giphy.com I can search Andri and receive a gif that the algorithm believes to be close enough to search term. However, when inputing “Andri” into the API url, Giphy breaks and does not provide a gif.

Thus, I had to pivot my idea to something simpler. I thought then I could ask simpler questions that would have typically result in an answer that is a common noun. For example, I could ask “What is your favorite color” and if the user said blue, they could see a blue gif onto their webcam. However, when I tested it out and discovered that at times the sticker seemed completely random. For instance, when I input “blue”, Giphy output stickers relating to sadness rather than color.

While I was frustrated, I realized that I had to simplify my idea to simply ass for “things” because “things” would have most likely not have double meanings or break the code.

Thus, now I have simply have a sticker generator. The user can input their favorite thing and then see a sticker related to that “favorite thing” pop up onto their webcam feed. For some reason, it is really slow system and the sticker takes forever to load, which is even more frustrating! However, this experience was not bad. I loved getting to learn a bit more about Giphy since it is a platform I use every day!

 

fullscreen:

https://editor.p5js.org/andrikumar/full/HynsKK26X

 

edit:

https://editor.p5js.org/andrikumar/sketches/HynsKK26X

 

 

API

With data of global temperature, I make a recommendation of clothing for different temperature range.

 

Full Screen:

https://editor.p5js.org/jeremycricchus@gmail.com/full/BkYoK2ta7

Code:

https://editor.p5js.org/jeremycricchus@gmail.com/sketches/BkYoK2ta7

End My Suffering

I tried being cool by finding other API keys to code with, but they didn’t really work out.

The first one I tried was with eBay, which I could get a JSON response from, but for some reason couldn’t get the data to load into the code. Scrapped.

The second one was from Flickr, which I wanted to use for making some kind of color palette out of a set of search results. I got the data to load from the search call this time, but not for individual images, even though I was following the documentation? So I was stumped, again. The partially successful code below:

let domain = "https://api.flickr.com/services/rest/?method=flickr.photos.search";
let apikey = "&api_key=df3ad9406618a769c6577eaa7b778fa1";
let tag;
let query = "&per_page=500&tags="
let format = "&is_commons=true&format=json&nojsoncallback=1";

let url;
let imgurl;
let img;

let userinput;
let button;

function setup() {
  userinput = createInput();
  
  button = createButton('submit');
  button.mousePressed(makeRequest);
  
  createCanvas(400, 400);
  
}

function makeRequest() {
  tag = userinput.value();
  url = domain+apikey+query+tag+format;
  
  loadJSON(url,getData);

  //console.log(url);
}

function getData(data) {
  
  console.log(data);
  
let farmid = photos.photo[0].farm;
let serverid = photos.photo[0].server;
let id = photos.photo[0].id;
let secret = photos.photo[0].secret;
 
imgurl = "https://farm" + farmid + ".staticflickr.com/" + serverid + "/" + id + "_" + secret + "_s.jpg";
console.log(imgurl);
img = loadImage(imgurl);
  
}

function draw() {
  background(0);
}

function mousePressed() {
  if (img) {
  image(img, mouseX, mouseY);
  }
  
}

And then I gave up and went back to the openweather APIs. I took the UV data and made a sun that gets bigger or smaller depending on the UV index. It’s in beta, though, so the location inputs are based on latitude and longitude instead of city names.

sdfdsfd

God this is the dumbest thing I’ve ever made and I hate it but I’ve spent too much time with this API-induced migraine. I never want to touch them again, bye.

the thing:

https://editor.p5js.org/sspeng/full/HySntc26X

the code:

let domain= "https://api.openweathermap.org/data/2.5/uvi?";
let apikey = "&appid=4069f66b6c19b053d48d1a1d88750183";
let lat  = "&lat=";
let lon = "&lon=";

let latslider;
let lonslider;

let latval, lonval;

let url;

let button;

let uvdata;

function setup() {
  latslider = createSlider(-90,90);
  createDiv("Latitude")
  lonslider = createSlider(-180,180);
  createDiv("Longitude")
  

  button = createButton('submit');

  button.mousePressed(makeRequest);
    
  createCanvas(400, 400);

}

function makeRequest() {
  url = domain+apikey+lat+latslider.value()+lon+lonslider.value();
  
  loadJSON(url, getData);

  console.log(url);
  
}

function getData(data) {
  
  uvdata=data;
  
  console.log(data);

}

function draw() {
  background(0, 204, 255);
  
  if (uvdata) {
    let sz = map(uvdata.value,0,10,50,200);
    noStroke();
    fill(255, 255, 0);
    ellipse(width/2, height/2, sz, sz);
  }
}

 

Exaggerated Weather

For this assignment I decided to be a little humorous, using our API from class and a few if statements, I created a system that gives exaggerated comments on the weather outside.

For the  three different outputs I would suggest using the cities of Boston, London, then Orlando.

Full Screen: https://editor.p5js.org/totallyhypnosquid/full/H1ZmHS2ta7

Editor: https://editor.p5js.org/totallyhypnosquid/sketches/H1ZmHS2ta7

I will not be using this for my final, but it was fun to work with.