let currentStroke;

let x, y;

let nextPen = 'down';

let seedPath = [];

let seedPoints = [];

let personDrawing = false;

​

let colorBack      = "#fff";

let colorDigital   = "#0000ff";

let colorCuriosity = "#ffff00";

​

let waiting = 0;

let until = 180; // 3 sec

​

let noiseSeed = 0.0;

​

function preload() {

  // https://github.com/ml5js/ml5-library/blob/master/src/SketchRNN/models.js

  sketchRNN = ml5.sketchRNN('face');

}

​

​

function sketchRNNStart() {

  seedPoints = [];

  background(colorBack);

  stroke(colorDigital);

  strokeWeight(1);

  noFill();

  // Seed Face

  let rad = 130;

  //beginShape();

  for(let i = PI/3; i < 2*PI; i += PI/15) {

    let angle = i - PI - PI/6;

    let p = { 

      x: width/2 + rad*sin(angle), 

      y: height/2 + rad*cos(angle)

    };

    //vertex(p.x, p.y);

    seedPoints.push(createVector(p.x, p.y));

  }

  //endShape();

  strokeWeight(20);

  rect(100, 100, 200, 200);

  fill(colorBack);

  noStroke();

  //rect(200, 85, 115, 30);

  // Perform RDP Line Simplication

  const rdpPoints = [];

  const total = seedPoints.length;

  const start = seedPoints[0];

  const end = seedPoints[total - 1];

  rdpPoints.push(start);

  rdp(0, total - 1, seedPoints, rdpPoints);

  rdpPoints.push(end);

  x = rdpPoints[rdpPoints.length-1].x;

  y = rdpPoints[rdpPoints.length-1].y;

  seedPath = [];

  // Converting to SketchRNN states

  for (let i = 1; i < rdpPoints.length; i++) {

    let strokePath = {

      dx: rdpPoints[i].x - rdpPoints[i-1].x,

      dy: rdpPoints[i].y - rdpPoints[i-1].y,

      pen: 'down'

    }

    seedPath.push(strokePath);

  }

  sketchRNN.generate(seedPath, gotStrokePath);

}

​

function setup() {

  let canvas = createCanvas(400, 400);

  //canvas.mousePressed(startDrawing);

  //canvas.mouseReleased(sketchRNNStart);

  sketchRNNStart();

  console.log('model loaded');

}

​

​

function gotStrokePath(error, strokePath) {

  currentStroke = strokePath;

}

​

function draw() {

  waiting++;

  noiseSeed += 0.05;

  let lineFatness = noise(noiseSeed) * 30;

  strokeWeight(lineFatness);

  //stroke(colorCuriosity);

  let colorPerlin = noise(noiseSeed) * 255;

  stroke(255, colorPerlin, 0);

  if (currentStroke) {

​

    if (nextPen == 'end') {

      waiting = 0;

      currentStroke = null;

      // sketchRNN.reset();

      // sketchRNNStart();

      // nextPen = 'down';

      return;

    }

​

    if (nextPen == 'down') {

      line(x, y, 

           x + currentStroke.dx, y + currentStroke.dy);

    }

    x += currentStroke.dx;

    y += currentStroke.dy;

    nextPen = currentStroke.pen;

    currentStroke = null;

    sketchRNN.generate(gotStrokePath);  

​

  } else if (waiting > until) {

​

    sketchRNN.reset();

    sketchRNNStart();

    nextPen = 'down';

    return;    

  }

​

​

}