let sketchRNN;

let currentStroke;

let x, y;

let nextPen = 'down';

let seedPath = [];

let seedPoints = [];

let originalPoints = [];

let personDrawing = false;

let numberOfDrawings = 0;

​

// List of possible concepts:

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

​

let concept = "brain";

let setFrameRate = 20;

let colors = {

  "back": "#671a7a",

  "lineRobot": "#e09d00",

  "lineHuman": "#ffffff"

};

let drawingStroke = {

  "min": 2, 

  "max": 10

};

​

function preload() {

  sketchRNN = ml5.sketchRNN(concept);

}

​

function startDrawing() {

  personDrawing = true;

  x = mouseX;

  y = mouseY;

}

​

function sketchRNNStart() {

  personDrawing = false;

​

  // 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);

  // Drawing original path

  background(colors.back);

  stroke(colors.lineHuman);

  for (let p of originalPoints) {

    strokeWeight(p.sw);

    line(p.x, p.y, p.px, p.py);

  }

  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);

  background(colors.back);

  console.log('model loaded');

  frameRate(setFrameRate);

}

​

​

function gotStrokePath(error, strokePath) {

  currentStroke = strokePath;

}

​

let seed = 0;

​

function draw() {

  if (numberOfDrawings > 10) {

    noLoop();

  }

  stroke(255);

  seed += 0.05;

  let sw = map(noise(seed), 0, 1, drawingStroke.min, drawingStroke.max);

  strokeWeight(sw);

​

​

  if (personDrawing) {

    line(mouseX, mouseY, pmouseX, pmouseY);

    seedPoints.push(createVector(mouseX, mouseY));

    originalPoints.push({

      "x": mouseX,

      "y": mouseY,

      "px": pmouseX,

      "py": pmouseY,

      "sw": sw

    });

  }

​

  if (currentStroke) {

​

    if (nextPen == 'end') {

      saveCanvas("alibi_save" + frameCount, 'png');

      numberOfDrawings++;

      sketchRNN.reset();

      sketchRNNStart();

      currentStroke = null;

      nextPen = 'down';

      return;

    }

​

    if (nextPen == 'down') {

      stroke(colors.lineRobot);

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

    }

    x += currentStroke.dx;

    y += currentStroke.dy;

    nextPen = currentStroke.pen;

    currentStroke = null;

    sketchRNN.generate(gotStrokePath);

  }

​

}

​

function keyPressed() {

  if (key == ' ') {

    saveCanvas("crtez_klik" + frameCount, 'png');

  }

}