1
00:00:00,731 --> 00:00:02,859
欢迎来到本次Coding Challenge

2
00:00:03,238 --> 00:00:06,668
今天我会展示如何编写出这样的图案

3
99:59:59,999 --> 99:59:59,999
我准备在浏览器里用p5.js实现它

4
99:59:59,999 --> 99:59:59,999
这里展示的是我事先用processing写完的成果

5
99:59:59,999 --> 99:59:59,999
它的运行效率会更高，视频最后我们会简单地看看代码

6
99:59:59,999 --> 99:59:59,999
我不会从头开始讲

7
99:59:59,999 --> 99:59:59,999
所以如果你对二维Perlin Noise不太了解的话

8
99:59:59,999 --> 99:59:59,999
可以先去视频简介内找到并观看我的Perlin Noise系列视频

9
99:59:59,999 --> 99:59:59,999
欢迎回来！我将从这一段代码开始

10
99:59:59,999 --> 99:59:59,999
它能够输出这样的图像

11
99:59:59,999 --> 99:59:59,999
这张图使用了二维Perlin Noise

12
99:59:59,999 --> 99:59:59,999
将noise的值与每一个像素点的灰度值（Grayscale）对应

13
99:59:59,999 --> 99:59:59,999
不过我现在要做些不一样的事

14
99:59:59,999 --> 99:59:59,999
在一个像素组成的网格中

15
99:59:59,999 --> 99:59:59,999
这是一个分辨率很低的网格

16
99:59:59,999 --> 99:59:59,999
与之前对每个像素设定灰度值不同

17
99:59:59,999 --> 99:59:59,999
我想要的是在每个像素内有一个向量（Vector）

18
99:59:59,999 --> 99:59:59,999
每个向量的方向由Perlin Noise决定

19
99:59:59,999 --> 99:59:59,999
因为最终我想做的是把许多粒子放入这个被称作Flow Field的区域内

20
99:59:59,999 --> 99:59:59,999
使粒子跟随向量的方向运动

21
99:59:59,999 --> 99:59:59,999
我的第一个任务是将像素替换成向量

22
99:59:59,999 --> 99:59:59,999
我们来看看这如何实现

23
99:59:59,999 --> 99:59:59,999
我先用一个低分辨率的canvas来开始