var lastkey
var isPlaying
var pressedKey
var lastKey
let input, button, greeting;

function drawImage(url) {
  console.log("drawing " + url)
  img_src = url.hits[0].previewURL
  console.log(img_src) // .webformatURL for better qual
    img = createImg(img_src);
  // img.hide();
    translate(random(width/2), random(height/2));
  image(img, 0,0, 200,200)

}

function removebg(img_url) {
  api_key = "91qzrM9BMwn75yBVsNDwdpyD"
  ops = {
    formData: {
      image_url: img_url,
      size: 'auto',
    },
    headers: {
      'X-Api-Key': api_key
    },
  }
  fetch('https://api.remove.bg/v1.0/removebg', {
    method: 'post',
    body: JSON.stringify(opts)
  }).then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data)
  });
}

function greet() {

  const words_str = input.value();
  const words = words_str.split(" ")
  input.value('');
  // console.log(words)
  words.forEach( (word) =>{
    console.log(word)
    img_url = "https://pixabay.com/api/?key=15410647-429fc66d6350cf8659ace2110&q="+word+"&image_type=photo"
    img_json = loadJSON(img_url, drawImage)
    fill(random(255), 255, 255);
    translate(random(width), random(height));
    rotate(random(2 * PI));
    text(name, 0, 0);

  } )

  for (let i = 0; i < 200; i++) {
    push();
    fill(random(255), 255, 255);
    translate(random(width), random(height));
    rotate(random(2 * PI));
    text(name, 0, 0);
    pop();
  }
}

function preload() {
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("black")
// fill("black")
  isPlaying = false;
  lastKey = ""
  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);
  button.mousePressed(greet);

  greeting = createElement('h2', 'what is your name?');
  greeting.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}


function draw() {
  pressedKey = key
}