var filmData;

​

function preload() {

  var url = 'karly.json';

  filmData = loadJSON(url);

​

}

​

function setup() {

  createCanvas(500, 175);

  // print(filmData[0].title);

  for (var i = 0; i < filmData.length; i++) {

    var o = filmData[i];

    films[i] = new Film(o);

  }

  noStroke();

}

​

function draw() {

  background(0);

  for (var i = 0; i < films.length; i++) {

    var x = i * 32 + 32;

    films[i].display(x, 150);

  }

}

​

function Film(f) {

  this.title = f.title;

  this.month = f.month;

  this.year = f.year;

  this.rating = f.rating;

  this.budget = f.budget;

​

  this.display = function(x, y) {

    push();

    var ratingGray = map(this.rating, 2.3, 4.3, 150, 255);

    translate(x, y);

    rotate(-QUARTER_PI);

    fill(ratingGray);

    text(this.title, 0, 0);

    pop();

  };

}