var apikey = 'api_key=5af8755335913a0c78936de6d5c36f92';

var query = '&query=';

​

var input;

var movie;

​

let font1;

let font2;

​

var rectX = 100;

var rectY = 560;

var score = -280;

​

function preload(){

  font1 = loadFont('base.otf');

  font2 = loadFont('base2.otf');

}

​

function setup() {

  createCanvas(600, 600);

  var button = select('#go');

  button.mousePressed(getMovie);

  input = select('#movie');

}

​

function getMovie(){

  var url = api + apikey + query + input.value();

  loadJSON(url, movieData);

}

​

function movieData(data){

  console.log(data);

  movie = data;

}

​

function draw() {

  background('#ffcfbf');

  fill('#2f323b');

  noStroke();

  textAlign(CENTER, CENTER);

  textSize(20);

  textStyle(BOLD);

  textFont(font2);

  text('Movie Ratings From The Movie Data Base(TMDB)', width/2, 40);

  textSize(12);

  text('By: Grace Guo', width/2, 60);

  //headings

  textSize(18);

  text('Movie Name:', width/2, 100);

  text('Release Date:', width/2, 160);

  text('Average Vote Score:', 150, 240);

  text('Vote Count:', 450, 240);

  fill('#666c78');

  textFont(font1);

  // text(input.value(), width/2, 100);

  if(movie){

    text(movie.results[0].original_title, width/2, 120);

    text(movie.results[0].release_date, width/2, 180);

    fill('#eb8d7a');

    rect(rectX, rectY, 100, score * movie.results[0].vote_average * 0.1, 30);

    fill('#666c78');

    textSize(24);

    text(str(movie.results[0].vote_average), 150, 530);

    for(let i = 0; i < movie.results[0].vote_count; i++){

      fill('#eb8d7a');

      ellipse(random(320, 580), random(260, 580), 5, 5);

    }

    fill('#666c78');

    text(str(movie.results[0].vote_count), 450, 400);

  }

  //average vote

  noFill();

  stroke('#666c78');

  strokeWeight(10);

  rect(rectX, rectY, 100, score, 30);

}