let animalImg;

​

function preload() {

  let url = 'https://zoo-animal-api.herokuapp.com/animals/rand';

  animalData = loadJSON(url);

}

​

function setup() {

  createCanvas(500,600)

  noLoop();

  animalImg = createImg(animalData.image_link)

}

​

function draw() {

  background('lightblue')

  textSize(20)

  text("Name: "+animalData.name,15,50)

  text("Habitat: "+animalData.habitat,15,80)

  text("Active Time: "+animalData.active_time,15,110)

  text("Lifespan: "+animalData.lifespan + " years",15,140)

  text("Diet: "+animalData.diet,15,170)

  text("Geo Range: "+animalData.geo_range,15,200)

  animalImg.position(width/2-150,height*3/4-200).size(300,250)

}

​

/*

        "name": "Siamang",

        "latin_name": "Hylobates syndactylus",

        "animal_type": "Mammal",

        "active_time": "Diurnal",

        "length_min": "1.90",

        "length_max": "2.00",

        "weight_min": "20",

        "weight_max": "23",

        "lifespan": "23",

        "habitat": "Tropical rainforest",

        "diet": "Primarily fruit and leaves, some invertebrates",

        "geo_range": "Malaysia and Sumatra",

        "image_link": "https://upload.wikimedia.org/wikipedia/commons/a/a4/DPPP_5348.jpg",

        "id": 162

*/