Concept

My goal is to practice data visualization in a playful way. I had a clear idea knowing that I want a Marvel character to fire a ball from its hand; the ball’s size is determine by the box office of the movie. 

I access Marvel’s box office data dataset from Kaggle. I deleted unnecessary information such as the length of the film, opening weekend gross, release date, etc and only kept the box office gross and the corresponding movie title (24 in total). I chose the Hulk to be my character because he is the easiest to draw.

Unfortunately, a superhero’s screentime is not determined by what cool power they have, but by the ability for them to make audiences pay 20$ to walk into the cinema.

Highlighted code

As user clicks on the screen, a random movie name from the sheet & a fireball whose size is based on the size of the box office will be generated. For example, The Incredible Hulk has a fireball that is way smaller than Captain America.

The font is accessed from here.

Please click on the canva.

At first, i didn’t set the boolean variable isFiring , so the ball always fires before mouse is pressed and it will no reset once it exits the canvas. I call the variable = false at the beginning, call it true when mouse is pressed, and call it false when the ball exits the frame so that it can be reset.

let isFiring = false; // boolean to check if fireball is in motion
  isFiring = true;
  // Reset fireball once it exits the canvas
  if (circleY < circleSize) {
    isFiring = false; // stop the fireball animation
  }

I also used the min_box = max(float())  method to determine the range so that the fireball can be mapped to fit the size of the screen. Thus, the overall fireball animation look like this:

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
  }
}

Improvements

1.Character variety

It would be great if the character can change based on the  movie title on the right. Maybe adding assign if statement to each character might work.

2.Losing stroke

I’m not quite sure why the right arm does not have stroke weight when the canvas is restarted.