// variables we need for this demo
var dx, dy; // offsets of the pen strokes, in pixels
var pen, prev_pen; // keep track of whether pen is touching paper
var x, y; // absolute coordinates on the screen of where the pen is

var rnn_state; // store the hidden states of rnn's neurons
var pdf; // store all the parameters of a mixture-density distribution
var temperature = 0.65; // controls the amount of uncertainty of the model

var screen_width=960, screen_height=500; // stores the browser's dimensions
var line_color;

var restart = function() {
  // reinitialize variables before calling p5.js setup.

  // start drawing from somewhere in middle of the canvas
  x = 50;
  y = random(100, screen_height-100);

  // initialize the scale factor for the model. Bigger -> large outputs
  Model.set_scale_factor(10.0);

  // initialize pen's states to zero.
  [dx, dy, prev_pen] = Model.zero_input(); // the pen's states

  // randomize the rnn's initial states
  rnn_state = Model.random_state();

  // define color of line
  line_color = color(random(64, 224), random(64, 224), random(64, 224))
};

function setup () {
  restart(); // initialize variables for this demo
  createCanvas(960, 500);
  frameRate(60);
  background(255, 255, 255, 255);
  fill(255, 255, 255, 255);
}

function draw () {
  // using the previous pen states, and hidden state, get next hidden state 
  rnn_state = Model.update([dx, dy, prev_pen], rnn_state);

  // get the parameters of the probability distribution (pdf) from hidden state
  pdf = Model.get_pdf(rnn_state);

  // sample the next pen's states from our probability distribution
  [dx, dy, pen] = Model.sample(pdf, temperature);

  // only draw on the paper if the pen is touching the paper
  if (prev_pen == 0) {
    stroke(line_color);
    strokeWeight(2.0);
    line(x, y, x+dx, y+dy); // draw line connecting prev point to current point.
  }

  // update the absolute coordinates from the offsets
  x += dx;
  y += dy;

  // update the previous pen's state to the current one we just sampled
  prev_pen = pen;

  // if the rnn starts drawing close to the right side of the canvas, reset demo
  if (x > screen_width - 50) {
    restart();
  }

  if (frameCount % 30 == 0) {
    background(255, 255, 255, 16); // fade out a bit.
    fill(255, 255, 255, 32);
  }
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}