​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // addFormElement();

  textAlign(CENTER, CENTER);

  textSize(width / 20);

  // Create input field for the user to enter the desired query

  input = createInput();

  input.size = 200;

  input.position(0, 0);

​

  // Create submit button

  // The button will call the getImage function once it is pressed

  button = createButton('Submit');

  button.position(150, 0);

  button.mousePressed(getImage);

}

​

function draw() {

  background(220);

​

  // if there is an image to display, display it

  if (img) {

    image(img, 0, 0, width, height);

  }

}

​

async function getImage() {

  let query = input.value();

  let url = "https://images-api.nasa.gov/search?q=" + query;

  // The fetch function is part of JavaScript and in this case it takes a url to get the desired information

  let response = await fetch(url);

    let data = await response.json();

​

    let images = data.collection.items;

​

    let randy = Math.round(Math.random() * images.length);

    img = loadImage(images[randy].links[0].href);

}

​

​

​