const url_end = '/?isAnimated=false&format=json&key='

​

let strokeIndex = 0;

let index = 0;

let prevx, prevy;

​

let step = 10.0;

let noiseStrokeWeight;

​

let drawing;

​

let randWidth;

let randHeight;

​

let randRed;

let randGreen;

let randBlue;

​

let category;

let button;

​

let buttonPressed = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(194, 255, 248);

  sel = createSelect();

  sel.position(10, 10);

  sel.option("flower");

  sel.option("pizza");

  sel.option("cat");

  sel.option("airplane");

  sel.option("flying saucer");

  sel.option("cloud");

  sel.option("butterfly");

  sel.option("campfire");

  sel.option("face");

  sel.selected("face");

  sel.changed(selectEvent);

​

  category = "face";

  newDrawing(category);

}

​

function selectEvent() {

  category = sel.value();

}

​

function newDrawing(currentCategory) {

  let apiKey = 'AIzaSyCLxdiMV5-46xuFWFbdDhVoJi7DMwe-H9Q';

  //loadJSON(url_start + random(categories) + url_end + apiKey, gotDrawing);

  loadJSON(url_start + currentCategory + url_end + apiKey, gotDrawing);

}

​

​

function gotDrawing(data) {  

  randWidth = random(windowWidth-(255/2));

  randHeight = random(windowHeight-(255/2));

  randRed = random(0, 255);

  randGreen = random(0, 255);

  randBlue = random(0, 255);

  noiseStrokeWeight = map(noise(step), 0, 1, 1, 10);

  drawing = data.drawing;

}

​

function draw() {  

  background(194, 255, 248, 3);

  strokeWeight(noiseStrokeWeight);

  stroke(randRed, randGreen, randBlue);

​

  if (drawing && buttonPressed == false) {

    translate(randWidth, randHeight);

    scale(0.5, 0.5);

    let x = drawing[strokeIndex][0][index];

    let y = drawing[strokeIndex][1][index];

​

    if (prevx !== undefined) {

      line(prevx, prevy, x, y);

    }

    index++;

    if (index === drawing[strokeIndex][0].length) {

      strokeIndex++;

      prevx = undefined;

      prevy = undefined;

      index = 0;

      if (strokeIndex === drawing.length) {

        drawing = undefined;

        strokeIndex = 0;

        setTimeout(newDrawing(category), 300);

      }

    } else {

      prevx = x;

      prevy = y;

    }

  }

  step += 0.5;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​