[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.73,0:00:02.86,Default,,0000,0000,0000,,欢迎来到本次Coding Challenge
Dialogue: 0,0:00:03.24,0:00:06.67,Default,,0000,0000,0000,,今天我会展示如何编写出这样的图案
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我准备在浏览器里用p5.js实现它
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,这里展示的是我事先用processing写完的成果
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,它的运行效率会更高，视频最后我们会简单地看看代码
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我不会从头开始讲
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,所以如果你对二维Perlin Noise不太了解的话
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,可以先去视频简介内找到并观看我的Perlin Noise系列视频
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,欢迎回来！我将从这一段代码开始
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,它能够输出这样的图像
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,这张图使用了二维Perlin Noise
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,将noise的值与每一个像素点的灰度值（Grayscale）对应
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,不过我现在要做些不一样的事
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,在一个像素组成的网格中
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,这是一个分辨率很低的网格
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,与之前对每个像素设定灰度值不同
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我想要的是在每个像素内有一个向量（Vector）
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,每个向量的方向由Perlin Noise决定
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,因为最终我想做的是把许多粒子放入这个被称作Flow Field的区域内
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,使粒子跟随向量的方向运动
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我的第一个任务是将像素替换成向量
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我们来看看这如何实现
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,我先用一个低分辨率的canvas来开始