Web APIs Overview
How can Art and Design make relations and links between people and software? How and where does art reside within these modern relations, rather than outside of them?
An API (Application Programming Interface) allows us to make connections between computers, communicating within these networks and exchanging exciting sources of information. In this project we will explore what is interesting about working with data which is live and changing over-time and as a result what creative opportunity does this provides us with.
Using web technologies such as HTML, CSS and P5.js (Javascript) students may create a range of creative, critical responses to this brief within the web browser which are within the context of connecting online content. An approach may be to take an existing sketch which is already animated via a changing variable (such as rotation or mouse input) and adapt it to be driven by live data.
An introduction to P5.js
VERY useful webpages for this project
P5.js website: https://p5js.org
P5.js web editor: https://editor.p5js.org
P5.js reference page: https://p5js.org/reference/
differences between P5.js and processing: https://github.com/processing/p5.js/wiki/Processing-transition
Processing to p5.js converter:http://faculty.purchase.edu/joseph.mckay/p5jsconverter.html
https://p5js.org/reference/#/p5/loadJSON
Javascript – controls all dynamics
CSS – this is where the webpage is styled
HTML – structure of webpage
First try at importing one of my own sketches into the P5.js editor. It worked very well and the mouse aspect works.
https://editor.p5js.org/MadMarta22/full/rk_3JQxRX
-Code for touches (not sure how to work this):
var textInput = touches.length + ‘touches’;
for (var i = 0; i < touch.length; i++) {
ellipse(touches[i].x, touches[i].y, 200, 200);
var textInput = touches.length + ‘touches’;
for (var i = 0; i < touches.length; i++) {
ellipse(touches[i].x, touches[i].y, 200, 200);
Workshop 2-5pm with Andrew and Jen
Web APIs Brief
What is being used behind the scenes?
-Browser, HTML, CSS, P5.js, APIs.
(Ideas for concept[quick notes to be edited and revised in the future]: Javascript was created to make webpages alive, what if the sketch could represent the growth of moss with different shades of green, the idea of a webpage not being too overgrown by keeping simplicity, what could be effective on a small screen such as a phone? or maybe creating a fascinating image that keeps you interacting with the screen just like we are always scrolling through social media)
To load API create a separate function.
Loading in API data. https://randomuser.me/api/?nat=gb&results=10
Loading multiple names at the same time.
After working with the names I wanted to see if I could load in the age.
Adding both age and date of birth and re positioning and resizing to fit on screen.
I then wanted to create a visual controlled by the ages of the random people loaded into the data base.
I attempted to load Crypto compare into P5.js but I couldn’t figure out why it wasn’t working I will put some links below so I can work on this later.
https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=BTC,USD,EUR
https://www.cryptocompare.com/api/#-api-data-coinlist-
Doing some research on what kind of APIs I could use to create and portray a concept :
An article with helpful tips and ideas: https://codeburst.io/6-interesting-apis-to-check-out-in-2018-5d6830063f29
NASA : https://api.nasa.gov/#getting-started
https://genelab-data.ndc.nasa.gov/genelab/data/search?term=mouse%20liver&type=cgene
creating a basic array
https://jsonplaceholder.typicode.com/
Ideas and Research
Growth vs Destruction
Gathering analysis data on tree plantations and forest fires.
https://developers.globalforestwatch.org/developer-tools/
http://api.globalforestwatch.org/forest-change:
This API contains Nasa’s Active fire alerts which will be very useful when representing fires.
Unfortunately this data was not accessible and after spending half an hour looking for live API’s I could use and also asking Andrew for help we couldn’t find anything at the moment so we found a .csv file that I converted into JSON and uploaded into P5.js. Even though I’m not really sure if this information will be anything like what I use at the end for the purpose of visuals I needed some data to work with.
Update: after Andrew initially showing me how to convert files I found a file which might be of much more use to me as it displays longitude and latitude . The spreadsheet below displays information about forest fires which was gathered today: 21/11/2018. Unfortunately, I haven’t figured out how to gather live data as this site sends mail updates about fires.
These are all the files I have access to. With more research and time I want to definitely narrow down the size of the file as right now I have downloaded the world data(update the file was far to large so I used south America instead).
https://firms.modaps.eosdis.nasa.gov/active_fire/#firms-txt
I now have access to the API inside of my sketch which means I can start to work on visuals and how I want to portray this data.
Inspiration
Weather Yesterday is an interesting simple art piece which shows the weather yesterday. It displays historic data which I think I will do with my piece where I have data loaded in from a previous date. It’s important to know the effect of the fires and most of the impact comes after the event which would suggest the tragedy comes minutes, hours or even days after the initial fire. So my code would look to the past fire but the viewer can imagine how this can affect our earth while they view it in real-time.
I can use this site to generate a JSON file based on forest tree plantation: http://data.globalforestwatch.org/datasets/baae47df61ed4a73a6f54f00cb4207e0_5/geoservice?geometry=-96.152%2C-37.445%2C156.973%2C20.627
Article about the importance of tree planting in South Africa: http://news.trust.org//item/?map=tree-planting-schemes-sprout-across-south-america
A http://www.arpnjournals.com/jeas/research_papers/rp_2015/jeas_0915_2562.pdf
Working with creating visuals using the API data. I am using the latitude and longitude of the fire data and placing it on my canvas. I found a little bit of code which swapped the minus latitude and longitude values into positives which would show on my canvas. each rectangle represents an object in the array. Currently I am trying to work on the variable ‘brightness to control the transparency of the rectangles but for some reason as soon as I plug in my value it makes the rectangles black rather than changing the transparency. I have been trying to map the value between 0-255 as the brightness value goes up to 300 which is too high for transparency settings.
26/11/2018
I am using the latitude and longitude of fires recorded by nasa on a data map service which is then represented by red squares on a canvas.
Currently these are two trial outputs I have been working on the data on the left is fires recorded over a 24hr period in south America queried for the first 300 results of the array while the second is data over a 24hr period from the USA & Hawaii queried for only 10 results. I still want to pursue my idea of having data from the previous day or even week be displayed but I am considering having it in real time just a couple of days behind so if the results could show up for maybe an hour and fading to have a constantly changing location. I have noticed one problem, when I finally decide on a location some latitudes are positive and some negative therefore this could be a factor which could interfere in the future.
These are screen shots of the website which displays this active fire data on a map, they also use red squares to output their data.
More Research…
https://www.nbcnews.com/storyline/western-wildfires
This article shows the California fires in photographs. Maybe there’s a way to pick up colours from a photograph which could then influence the colour of the squares in the sketch: https://www.nbclosangeles.com/news/local/Photos-Fire-Southern-California-2018-Smoke-Burning-Stats-List-484514001.html
Many photographs taken, displayed in the article linked directly above, don’t seem to have this bright orange to red colour scheme that I would expect many show the smoke which is an interesting observation because the smoke is just as harmful as the fires so maybe I could incorporate this idea into the final sketch.
Firefighters who also lost homes due to the fires still push on and fight fires.
An explanation by CBS This Morning as to why wildfires happen.
Many people have died and many more are missing due to the fires. I didn’t link sources as I couldn’t find a secure source which had posted within the past 10 days so I can only imagine the numbers are getting higher everyday.
Interesting interview with Jeff Bridges and his opinions on climate change and experiences with Wild fires.
Recently we had a second Plenary where we received 4 talks, one of these talks is really where my inspiration for this project came from. I will insert two screenshots from the slides published by Prof Bruce Peter as I want to read these sources and definitely focus on these bigger issues in another project. I feel like researching the wildfires and their impact is only a start to a larger topic I would love to take on in the future regarding the hopeless feeling of not doing enough for the planet and the realisation that one person can’t fix everything also my inspiration will definitely be based on the artist Lana del Rey and her song ‘Change’. Lyrics: “Lately I’ve been thinking it’s just someone else’s job to care” “Change is a powerful thing, people are powerful beings”
I used a map function to solve my problem of the latitude and longitude values being a mixture between positives and negatives. In the above sketches the results are mapped so that the max and min values are that of latitude and longitude being portrayed accurately. 1st sketch showing 10 results, 2nd : 50 results, 3rd: 500 results, 4th: 1000 results. This portrays how overtime the data creates its own image. My next step will be to play with the night and day data and also the time of each recorded fire update.
This is data I just downloaded from the USA of active fires which happened today. I want to do an experiment and try to get the world results
Spent the last hour trying to write code that will control the ‘daynight’ data and this is the best I could come up with. For some reason the else part of the if function isn’t working.
Okay so it must have been a glitch it works now. Since I have a function that determines what the day and night has control over I can play around with what I want this to do in the final.
28/11/2018
Looking for a news API to display wildfire headlines. I would like to add this as a background element to fade in and out to provide more visuals and also to how how current this issue is.
This is an example of the results which show up in this API showing the date and headlines which are relevant to my research.
I wrote a bit of code which outputs the API title headlines. If i can format this and make it appear and fade over time or maybe be in sync with the other API maybe based on the time or some other information I think it could be very effective.
Useful links:
https://firms.modaps.eosdis.nasa.gov/active_fire/#firms-txt
https://processing.org/reference/blendMode_.html
https://p5js.org/reference/#/p5/textFont
I decided to add article titles from newspapers from search results about fires in California.
Now working with visuals I am liking how its coming along I will make a few variations to what is controlled by the viewer, what is random and how the article titles are displayed.
Final
Snapshots from the final output.
I like how this project could become many different things like an alert system, however in the end I have decided I like it as a abstract computational representation of nature. I am happy I managed to link two APIs to work in one sketch. I’m still unsure of the visuals just because of the restriction I have of the placement of shapes since the latitude and longitude are accurate but I know there are endless possibilities and if I kept playing with the visuals it would give me endless creative outputs.
Marta Zofia Palacz 