let myFont;

let movies; //for the cvs

let selectedMovie; //for the text

let boxOfficeSize; //for the fireball

let hulk; // calling hulk

let circleX, circleY, circleSize; // fireball's coordinates and size

let isFiring = false; // boolean to check if fireball is in motion

​

function preload() {

  // load the CSV file

  movies = loadTable("mcu1.csv", "csv", "header");

  // load font

  myFont = loadFont("av.ttf");

}

​

function setup() {

  createCanvas(400, 400);

  // create Hulk at the specified position

  hulk = new Hulk(70, 250);

  // pick an initial random movie 

  pickRandomMovie();

}

​

function draw() {

  background(300);

  // display Hulk

  hulk.show();

  // Display the selected movie title

  fill(0);

  strokeWeight(0);

  textFont(myFont);

  textSize(25);

  textAlign(RIGHT);

  text(selectedMovie, width - 10, 40);

  // if firing = true, trigger fireball animation

  if (isFiring) {

    fireballAnimation();

  }

}

​

function pickRandomMovie() {

  // get how many columns and turn the number to an integer. use random to pick a random index

  let randomIndex = floor(random(movies.getRowCount()));

  //pick a random value from each row

  selectedMovie = movies.getString(randomIndex, "movie");

  boxOfficeSize = movies.getNum(randomIndex, "gross_us");

}

​

function mousePressed() {

  // when the user clicks, pick a new random movie and start the fireball animation

  pickRandomMovie();

  // reset fireball position at (200, 400)

  circleX = 230;

  circleY = 270;

  print(mouseX + "," + mouseY); // to know my coordinate

  // Set `isFiring` to true to start the fireball animation

  isFiring = true;

}

​

function fireballAnimation() {

  // map the box office size to a reasonable circle size

  let boxOffice = movies.getColumn("gross_us");

  let max_box = max(float(boxOffice));

  let min_box = min(float(boxOffice));

  circleSize = map(boxOfficeSize, min_box, max_box, 1, 50);

  print(boxOfficeSize, selectedMovie); // just testing if they are corresponding

  // Draw the fireball

  fill(255, 100, 0); // Fireball color

  strokeWeight(2);

  ellipse(circleX, circleY, circleSize);

  // Move the fireball upwards

  circleX += 5;

  // Reset fireball once it exits the canvas

  if (circleY < circleSize) {

    isFiring = false; // stop the fireball animation

  }

}

​