Starting point for your Easter project.

Look at the face example below. If the real-time temperature in Martorell is lower than 15ºC I will be sad, otherwise I will be happy

Project contents:

• All the items below are not compulsory, but your grade will be proportional to the results obtained
• Add pollution data with an animation drawing from a JSON real time file using a free API, e.g. http://aqicn.org/api/ with a car and/or factory showing more smoke, you can learn a little bit of JQuery at w3schools.com to use some APIs
• Add any other data available at openweathermap API or similar APIs related to weather and pollution and convert data into drawings and animations
• Add a moving effect corresponding to wind direction and intensity like tecnologies.net/wind
• You can convert your pollution data from Martorell and another city from CSV (previous project) to JSON online and upload the file. Then the user can choose a day from 2017 and see the results in numbers or animations
• Face colour is now proportional to temperature, from colder blue colors to hotter red colors. Do a similar thing for humidity
• Add an animation for humidity (raindrops)
• Face sweating at high temperatures (drops) and sun glasses, face shaking at very low temperature and a hat (example at http://tecnologies.net/2emoticons)
• Change the code above in order to add the following cities: Martorell, Falun, Cagliari, Lisbon and Berlin in a table and create a map funcion to change the smile arc and the eye shape
• Allow user input (text area and a submit button) in order to find data from other cities (see video below)
• SHOWING YOUR CREATIVITY(the most valuable item)

var weather;
var url1 = "http://api.openweathermap.org/data/2.5/weather?q="
var city = "Martorell"
var url2 = "&APPID=5461bacb468ffb47cb3f97bb095ee4e8&units=metric"
function setup() {
  createCanvas(600,400);
  loadJSON(url1 + city + url2, gotData); 
}
function gotData(data){
  //println(data);
  weather = data; 
}
function draw() {
  background(0,0,100);
  colorMode(HSB);
  if (weather) {
    var h = map(weather.main.temp,-15,35,0,360);
    fill(0,100,0);
    textSize(22);
    text("Humidity: " +weather.main.humidity+"%",300,30);
    fill(0,100,0);
    textSize(22);
    text("Temperature: " +weather.main.temp+"ºC",40,30);
    if (weather.main.temp<15) {
    fill(h,100,100);
    ellipse(200,150,200,200);
    fill(h,100,100);
    arc(160,115,50,50,0,PI);
    fill(h,100,100);
    arc(240,115,50,50,0,PI);
    fill(h,100,100);
    arc(200,200,75,75,PI,0);
  } else {
    fill(h,100,100);
    ellipse(200,150,200,200);
    ellipseMode(RADIUS);
    fill(0,0,100);
    ellipse(160,125,25,25);
    ellipseMode(CENTER);
    fill(0,100,0);
    ellipse(160,125,25,25);
    ellipseMode(RADIUS);
    fill(0,0,100);
    ellipse(240,125,25,25);
    ellipseMode(CENTER);
    fill(0,100,0);
    ellipse(240,125,25,25);
    fill(325,45,100);
    arc(200,175,100,100,0,PI, CHORD); 
  } 
  }
}