Temperatures

const url = 'https://api.weather.gov/gridpoints/PHI/46,83/forecast/hourly';

let jsonData;

let w;

​

function preload() {

  jsonData = loadJSON(url);

}

​

function setup() {

  createCanvas(windowWidth, screen.availHeight);

  background(100);

  w = width/jsonData.properties.periods.length;

  noStroke();

  noLoop();

}

​

function draw() {

  for( let currentPeriod = 0; currentPeriod < jsonData.properties.periods.length; currentPeriod++ ) {

    let periodStartColor = colorForTemp( jsonData.properties.periods[currentPeriod].temperature );

    let periodEndColor = currentPeriod < jsonData.properties.periods.length - 1 ? 

                                          colorForTemp( jsonData.properties.periods[currentPeriod+1].temperature ) :

                                          colorForTemp( jsonData.properties.periods[currentPeriod].temperature );

    for( let x = 0; x < w; x++ ) {

      stroke( lerpColor( periodStartColor, 

                    periodEndColor, 

                    map( x, 0, w, 0, 1 )));

      line( currentPeriod * w + x, 0, currentPeriod * w + x, height);

    }

  }

}

​

function colorForTemp( temp ) {

  return lerpColor( 

              color(255,255,0),

              color(255,0,255),

              map( temp, 0, 100, 0, 1 ) );

}

​

function mousePressed(){

  save('pix.jpg');

}