没有深度学习基础? 没关系，这是一个面向艺术家的 RNN 教程，教你用神经网络来生成作品没有深度学习基础? 没关系，这

作者介绍：hardmaru ，一位钟情于 RNN 的深度学习研究者，相关地址

Twitter 地址：twitter.com/hardmaru

Github 地址：github.com/hardmaru

博客地址：blog.otoro.net/

3255170d60d5b67bb7e3295be9c001211f84e115

这篇文章适用于没有任何机器学习背景的读者，目标是向艺术家和设计师展示如何使用一个预训练的神经网络并使用简单的Javascript 和 p5.js 库生成交互式的数字作品。

72bd0bc283ba5588d4d29901befe2a420fbaf314

介绍

近年来，机器学习已经成为创意社区的流行工具。比如风格转变、 T-SNE、自动编码器、生成对抗性的网络以及无数其他的方法，艺术家们采用这些技术生成文本、音乐以及声音。

这篇文章使用了与distill.pub 项目相同的手写模型

手写大脑建模

当写信时，大脑中有许多事情发生。比如写什么、选择词汇、动笔写等过程。而创建一个JavaScript 模型来模拟整个人类大脑写信是困难的，因此只专注于手写过程中的最后一部分 —— 笔的位置，以及笔与纸张是否接触。

对模型做两个假设。第一个假设是模型接下来要写的内容只取决于它过去写的内容。内容的记忆可以通过构建回归神经网络（RNN ）完成。

通过RNN ，可以将模糊知识直接存储到 RNN 的神经元，并将此对象作为 RNN 的隐藏状态。这个隐藏状态记录每个神经元的活跃程度，隐藏状态对象会随着写入内容而不断更新。

第二个假设是该模型不完全确定它接下来应该写什么。这两个假设可以总结为下图，描述了使用具有隐藏状态的循环神经网络模型来生成随机序列的过程。

2c787d9544dd3654e46fe2af76be7c1ac785fd5d

用于手写体的RNN

用已预训练好的RNN 模型完成上一节描述的书写任务。本节将描述如何在 JavaScript 中使用该模型，下面是整个p5.j s 的框架

首先需要定义几个变量表示笔的轨迹（x,y ），此外还需要较小的坐标偏移（dx,dy），并用（x,y ）累积（ dx,dy ）判断笔的走向，。

var x, y; // absolute coordinates of where the pen is
var dx, dy; // offsets of the pen strokes, in pixels

另外，笔不会总与纸张接触。定义变量pen ，若 pen 为零，则当前时刻笔与纸张相互接触。另外需要跟踪以前时刻的pen ，记为 prev_pen 。

// keep track of whether pen is touching paper. 0 or 1.
var pen;
var prev_pen; // pen at the previous timestep

若有了模型每一时刻生成的(dx, dy, pen)变量列表，那么使用这些数据可以绘制出模型在屏幕上生成的内容。开始时将这些变量（dx, dy, x, y, pen,prev_pen ）初始化为零。定义一些将由 RNN 模型使用的变量对象：

var rnn_state; // store the hidden states the rnn

// store all the parameters of a mixture-density distribution
var pdf;

// controls the amount of uncertainty of the model
// the higher the temperature, the more uncertainty.
var temperature = 0.65; // a non-negative number.

rnn_state 变量代表 RNN 的隐藏状态，使用代码update 更新 rnn_state 。

rnn_state = Model.update([dx, dy, prev_pen], rnn_state);

rnn_state 将用于产生模型将要写的内容的概率分布。该概率分布将表示作为主体，称作pdf 。使用 get_pdf 就能从rnn_state 获得 pdf ：

pdf = Model.get_pdf(rnn_state);

额外变量temperature 使我们能够控制该模型是否为想要的模型。结合pdf，可以使用 sample 函数去采样下一组(dx, dy, pen)，在稍后使用以下函数：

[dx, dy, pen] = Model.sample(pdf, temperature);

现在唯一需要的其他变量是控制手写体的颜色，并且跟踪浏览器的屏幕尺寸：

// stores the browser's dimensions
var screen_width = window.innerWidth;
var screen_height = window.innerHeight;

// colour for the handwriting
var line_color;

现在准备初始化所有这些声明的变量，创建函数restart 初始化这些变量，通过重复调用以初始化很多次。

function restart() {
  // set x to be 50 pixels from the left of the canvas
  x = 50;
  // set y somewhere in middle of the canvas
  y = screen_height/2;

  // initialize pen's states to zero.
  dx = 0;
  dy = 0;
  prev_pen = 0;
  // note: we draw lines based off previous pen's state

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

  // randomise colour of line by choosing RGB values
  line_color = color(random(255), random(255), random(255))
}

创建restar函数后，定义p 5.js setup 函数初始化框架。

function setup() {
  restart(); // initialize variables for this demo
  createCanvas(screen_width, screen_height);
  frameRate(60); // 60 frames per second
  // clear the background to be blank white colour
  background(255);
  fill(255);
}

p5.j s 框架中的 draw 函数能够产生一代手写字迹，该函数每秒调用60 次，每次调用此函数时，RNN 将在屏幕上绘制一些东西。

function draw() {

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

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

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

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

  // 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 screen, restart our demo
  if (x > screen_width - 50) {
    restart();
    // reset screen
    background(255);
    fill(255);
  }

}

在每一帧，draw函数将更新基于它先前在屏幕上绘制的模型隐藏的状态。从这个隐藏状态，模型将生成接下来的概率分布。基于此概率分布，沿着temperature 参数，将随机抽样下一组(dx, dy, pen) 变量的新形式。基于这一新的变量集合，产生新的手写体。

ba2ebaab03e8a46d921f9173e6bbe79d2d0c748c