let img;

let catImage;

let button;

function preload(){

  loadJSON('https://cat-fact.herokuapp.com/facts/random', gotdata);

  loadJSON(`https://api.thecatapi.com/v1/images/search`,gotdata1);  

}

​

​

function gotdata (data){

/// here you update the catData

  catData = data.text;

}

  function gotdata1 (data){

    catImage = data[0].url

​

}

​

function setup() {

  createCanvas(600, 600);

  button = createButton('Generate');

  button.style('border','none');

  button.mousePressed(restart);

  img = createImg(catImage);

  img.hide();

​

}

​

function restart(){

  preload();

  //This will remove the extra image object we created, so that your browser is not overwhelming over time.

  img.remove();

  img = createImg(catImage);

  img.hide();

}

​

function draw() {

  background(255);

  //The push and pop is to ensure the scale doesn't affect the text pos.

  push();

  //This make sure the size of the image would not exceed the canvas

  if(img.width > 600 && img.width < 3000){

    scale(0.5);

    console.log('biggggg');

  }else if(img.width > 3000){

    scale(0.1);

    console.log('toooo bigggg');

  }

  image(img,0,0);

  pop();

  console.log(catData);

  text(catData,0,height);

  // console.log(imageArray);

}