// 

// By Professor Jon E. Froehlich

// https://makeabilitylab.cs.uw.edu/

//

const values = [80, 550, 600, 350, 50, 40]

​

function setup() {

  createCanvas(400, 400);

  // Print values to console to verify

  for(let i = 0; i < values.length; i++){

    print(values[i]);

  }

}

​

function draw() {

  background(220);

  // Set some visual design constants

  const rectWidth = 20; // in pixels

  const graphHeight = 350; // height of our graph

  const maxVal = max(values);

  const xMargin = 50;

  const yMargin = 20;

  for(let i=0; i < values.length; i++){

    // Translate value from value range to pixel range

    const barHeight = map(values[i], 0, maxVal, 0, graphHeight);

    const yBar = graphHeight - barHeight; // y loc of bar

    const xBar = xMargin + i * (rectWidth + 5); // x loc of bar

    // rect(x, y, w, h) draws a rectangle at x,y with a width w and 

    // height h. See: https://p5js.org/reference/#/p5/rect

    rect(xBar, yBar + yMargin, rectWidth, barHeight); 

  }

}