Coding Challenge #24: Perlin Noise Flow Field
-
0:01 - 0:03欢迎来到本次Coding Challenge
-
0:03 - 0:07今天我会展示如何编写出这样的图案
-
Not Synced我准备在浏览器里用p5.js实现它
-
Not Synced这里展示的是我事先用processing写完的成果
-
Not Synced它的运行效率会更高，视频最后我们会简单地看看代码
-
Not Synced我不会从头开始讲
-
Not Synced所以如果你对二维Perlin Noise不太了解的话
-
Not Synced可以先去视频简介内找到并观看我的Perlin Noise系列视频
-
Not Synced欢迎回来！我将从这一段代码开始
-
Not Synced它能够输出这样的图像
-
Not Synced这张图使用了二维Perlin Noise
-
Not Synced将noise的值与每一个像素点的灰度值（Grayscale）对应
-
Not Synced不过我现在要做些不一样的事
-
Not Synced在一个像素组成的网格中
-
Not Synced这是一个分辨率很低的网格
-
Not Synced与之前对每个像素设定灰度值不同
-
Not Synced我想要的是在每个像素内有一个向量（Vector）
-
Not Synced每个向量的方向由Perlin Noise决定
-
Not Synced因为最终我想做的是把许多粒子放入这个被称作Flow Field的区域内
-
Not Synced使粒子跟随向量的方向运动
-
Not Synced我的第一个任务是将像素替换成向量
-
Not Synced我们来看看这如何实现
-
Not Synced我先用一个低分辨率的canvas来开始
|
Ryan Yuan edited Chinese, Simplified subtitles for Coding Challenge #24: Perlin Noise Flow Field |