ICM Blog Post 7

Our goal for week 7 was to create a data-rich sketch that uses an external data source. I started off by having options that my user would be able to use that was introduced in Dan Shiffman’s video, 10.6: API Query with User Input. For some reason, I was having a lot of difficulty with the index.html file and the mousePressed() function. I had to copy and paste his exact index.html file into my existing sketch to correct this error or maybe I had some other error that I couldn’t see myself. I put options for the user to change the location and units of the visualization.

I tried to think of a weather appropriate sketch to create, but immediately failed because I could only think of complicated sketches involving maps. I tried to think of a visual representation of weather data that might actually make sense, but I failed once again. So I decided to just make a simple grid that would vary based on multiple weather factors. I started off by creating a grid of circles that are related to the temperature, the size corresponds to the minimum (x radius) and maximum (y radius) temperatures. I then randomly generated between 0 and the humidity and mapped the value to a value between 0 and 255. I use the humidity to fill the circles and the opacity is randomly generated by the humidity as well. Since the colors kept changing too fast, I decided that the frameRate() of the sketch would be determined by the windspeed. Finally, I decided to use the number of clouds to randomly determine if a square or a circle should be drawn. I tried adding text to clearly define what values I am using, but I thought it looked bad so I got rid of the text (picture below). This a data rich, visual representation of the weather that would not be useful for any real information. Below are some pictures and code, which can also be viewed here. Please note, for some reason my sketch doesn't work with safari (works with chrome though).

Entering different cities and units (imperial or metric & left blank = kelvins)

Entering different cities and units (imperial or metric & left blank = kelvins)

Sketch with text, though it didn't look nice

Sketch with text, though it didn't look nice

City: Tokyo, Units: Imperial (GIF above was too long to include imperial units)

City: Tokyo, Units: Imperial (GIF above was too long to include imperial units)

sketch.js code

let api = 'http://api.openweathermap.org/data/2.5/weather?q=',
  apiKey = '&APPID=60a2134d9e2827ec90778e0cd2b4463f',
  units = '&units=',
  inputWeather, weather, inputUnits;

function setup() {
  createCanvas(windowWidth, windowHeight);
  let button1 = select('#submitCity');
  button1.mousePressed(weatherInput);
  let button2 = select('#submitUnit');
  button2.mousePressed(weatherInput);
  inputWeather = select('#city');
  inputUnit = select('#units');
  noStroke();
  rectMode(CENTER);
}

function weatherInput() {
  var url = api + inputWeather.value() + apiKey + units + inputUnit.value();
  loadJSON(url, gotData);
}

function gotData(data) {
  weather = data;
  console.log(data);
}

function draw() {
  background(0);
  if (weather) {
    winds = weather.wind.speed
    frameRate(winds); //related to wind speed
    var temp = weather.main.temp;
    var min = weather.main.temp_min;
    var max = weather.main.temp_max;
    var humidity = weather.main.humidity;
    var clouds = weather.clouds.all;
    console.log(temp);
    console.log(min);
    console.log(max);
    for (let x = 0; x <= width + temp; x += temp) { 
      for (let y = 0; y <= height + temp; y += temp) { 
        fill(random(map(humidity, 0, humidity, 0, 255)), 0, random(map(humidity, 0, humidity, 0, 255)), random(humidity));
        if (random(clouds) < clouds / 2) {
          ellipse(x, y, min, max); //xrad is min temp, yrad is max temp
        } else {
          rect(x, y, min, max); //xrad is min temp, yrad is max temp
        }
      }
    }
  }
}

index.html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
  <script type="text/javascript" src="sketch.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    canvas {
      vertical-align: top;
    }
  </style>
</head>
<body>
<tr valign="center">
  <table border-collapse="collapse" style="width:100%" bgcolor="white">
    <td>
      City: <input id="city" value="London" />
      <button id="submitCity">submit</button>
    </td>
      <td>
        Units: <input id="units" value="Metric or Imperial" />
        <button id="submitUnit">submit</button>
    </td>
    </table>
  </tr>
</body>
</html>
ICMOlivia KungICM