let model;

// Start by drawing

let previous_pen = 'down';

// Current location of drawing

let x, y;

// The current "stroke" of the drawing

let strokePath;

​

let step = 10.0;

let noiseStrokeWeight;

​

let drawing;

​

let randWidth;

let randHeight;

​

let randRed;

let randGreen;

let randBlue;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(194, 255, 248);

​

  // Load the model

  // See a list of all supported models: https://github.com/ml5js/ml5-library/blob/master/src/SketchRNN/models.js

  model = ml5.SketchRNN('face', modelReady);

  //model = ml5.SketchRNN('everything', modelReady);

}

​

// Reset the drawing

function startDrawing() {

  x = 0;

  y = 0;

  //x = width / 2;

  //y = height / 2;

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

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

  randRed = random(0, 255);

  randGreen = random(0, 255);

  randBlue = random(0, 255);

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

  model.reset();

  // Generate the first stroke path

  model.generate(gotStroke);

}

​

function draw() {

  background(194, 255, 248, 3);

​

  strokeWeight(noiseStrokeWeight);

  stroke(randRed, randGreen, randBlue);

  // If something new to draw

  if (strokePath) {

    push();

    translate(randWidth, randHeight);

​

    scale(0.5, 0.5);

    // If the pen is down, draw a line

    if (previous_pen == 'down') {

      line(x, y, x + strokePath.dx, y + strokePath.dy);

    }

    // Move the pen

    x += strokePath.dx;

    y += strokePath.dy;

    // The pen state actually refers to the next stroke

    previous_pen = strokePath.pen;

    // If the drawing is complete

    if (strokePath.pen !== 'end') {

      model.generate(gotStroke);

    }

    if (strokePath.pen == 'end') {

      startDrawing();

    }

    pop();

  } 

​

  step += 0.5;

}

​

// A new stroke path

function gotStroke(err, s) {

  strokePath = s;

}

​

// The model is ready

function modelReady() {

  //select('#status').html('model ready');

  startDrawing();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}