let alphatauri;

​

const arr = [];

let smoke;

​

function preload() {

  //   Loading F1 Season 2021 Stats Table

​

  f1ranking = loadTable(

    "2021_Formula_One_World_Championship_7.csv",

    "csv",

    "header"

  );

​

  //   Loading F1 Font

​

  myFont = loadFont("Formula1-Regular_web_0.ttf");

​

  //   Loading F1 Logo

  f1logo = loadImage("F1.png");

​

  //   Loading Team Car Images

​

  alphatauri = loadImage("f1teams/alphatauri.png");

​

  mercedes = loadImage("f1teams/mercedes.png");

​

  astonmartin = loadImage("f1teams/aston martin.png");

​

  alfaromeo = loadImage("f1teams/alfaromeo.png");

​

  ferrari = loadImage("f1teams/ferrari.png");

​

  haas = loadImage("f1teams/haas.png");

​

  redbull = loadImage("f1teams/redbull.png");

​

  williams = loadImage("f1teams/williams.png");

​

  mclaren = loadImage("f1teams/mclaren.png");

​

  alpine = loadImage("f1teams/alpine.png");

}

​

function setup() {

  createCanvas(700, 500);

}

​

function draw() {

  textFont(myFont);

  background(37);

​

  //   Initializing and declaring Table values to variables

  let numRows = f1ranking.getRowCount();

  let points = f1ranking.getColumn("Points");

  let driverName = f1ranking.getColumn("Driver");

  let team = f1ranking.getColumn("Team");

​

  //   For loop to create the table

  for (i = 0; i < numRows; i++) {

    //     using x to store the point value for each instance of driver

    let x = float(points[i]);

​

    //     Using if and else if condition inside for the color of the team as well as image of the f1 car associated with the driver

​

    if (team[i] == "Redbull") {

      fill(30, 91, 198);

      image(redbull, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Mercedes") {

      fill(108, 211, 191);

      image(mercedes, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "McLaren") {

      fill(245, 128, 32);

      image(mclaren, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Alpha Tauri") {

      fill(78, 124, 155);

      image(alphatauri, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Aston Martin") {

      fill(45, 130, 109);

      image(astonmartin, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Haas") {

      fill(255, 0, 0);

      image(haas, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Alpine") {

      fill(34, 147, 209);

      image(alpine, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Williams") {

      fill(55, 190, 221);

      image(williams, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Alfaromeo") {

      fill(172, 32, 57);

      image(alfaromeo, x + 190, 22.2 * i, 100, 50);

    } else if (team[i] == "Ferrari") {

      fill(237, 28, 36);

      image(ferrari, x + 190, 22.2 * i, 100, 50);

    }

​

    noStroke();

​

    //     rectangle making the bar chart

    rect(175, 20 + 22 * i, 10 + x, 20);

​

    //     name of the drivers on the left side

    text(driverName[i] + " (" + points[i] + ")", 5, 32 + 22 * i);

  }

//   For the smoked behind the cars

  for (i = 0; i < numRows; i++) {

    let x = float(points[i]);

​

    smoke = new Smoke(x + 190, 30 + 22.2 * i);

​

    arr.push(smoke);

    for (let a = arr.length - 1; a >= 0; a--) {

      arr[a].show();

      arr[a].update();

      if (arr[a].delete()) {

        //Delete smoke from array!

        arr.splice(1, 1);

      }

    }

  }

  //   LOGO AND CAPTION FOR DATA

  image(f1logo, 405, 370, 256, 64);

​

  fill("red");

  text("2021 FORMULA ONE WORLD CHAMPIONSHIP", 370, 460);

  text("POINTS TALLY", 467, 474);

}

​