let images = [];

​

function preload() {

  // Get the most recent earthquake in the database

  let url = "data.json";

  myData = loadJSON(url);

​

 images.push(loadImage("bear.gif"));

​

  images.push(loadImage("img1.png"));

  images.push(loadImage("img1.png"));

  images.push(loadImage("img1.png"));

}

​

// runs once when the app i starting.

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  noScrolling();

  background(255, 255, 255);

  strokeWeight(3);

​

  //change lises age to 7

  myData.users[1].age = 7;

  //sorts the users by age

   myData.users.sort(function(a, b){

    return b.age - a.age;

  });

}

​

// runs for each frame

function draw() {

  background(1, 31, 38);

  let counter = 0;

​

  for (const key in myData.users) {

    fill(242, 166, 121);

    textSize(40);

    noStroke();

    text(myData.users[key].name, 70, 250+ counter*40);

    text(myData.users[key].age, 270, 250+ counter*40);

   image(images[myData.users[key].img], 30, 230+ counter*40, 20,20);

    stroke(242, 110, 80);

    noFill();

    line(70, 250+ counter*40,370, 250+ counter*40);

​

    counter = counter + 1;

  }

​

}

​

function keyReleased() {

  if (key == "f") {

    fullScreenToggle();

  }

}

​