十年踪迹

上个月，码上掘金低调上线了一个新功能，这个功能看起来不起眼，但相当有用，它能让你不仅可以用码上掘金写前端代码片段，还可以将它扩展到其他语言。

真正的大自然在无序中孕育着秩序。空气看似无序的扰动，产生了气流，气流汇聚形成季风；水波看似无序，然而产生水流，形成河流、洋流；岩石的生长看似无序，但形成山脉，连绵不断……随机无处不在，秩序也无处不在。

挑战者需要实现一个“击鼓”的效果，界面上一共有九个鼓点，当用户在键盘上按下 ASDFGHJKL 这几个键，或者点击鼠标和触摸屏幕时，显示对应的击鼓视觉效果和播放对应的音效。

大自然中有很多现象几乎是无序的，要模拟这些无序的自然现象，就要用到随机。着色器没有现成的随机函数，只能通过人工来构建随机函数。

我们既然把shader中文翻译成“着色器”，顾名思义，“着色器”本身就是用来在画布上“着色”的，自然和颜色有着密切的关系。

前面的绘图，我们采用的都是直角坐标系，我们可以用坐标变换，将坐标系从直角坐标转换为极坐标，这样一个简单的坐标变换，就能产生非常有趣的图形效果。

String.raw String.raw是JavaScript中模板字符串的一个标签函数，它的作用是将模板字符串不转义的原始字符串内容返回，虽然简单，但很有用。

我们已经知道**距离场构图法**的关键就是要构造距离场，并学习了如何构建圆、直线、线段的距离场，以及如果通过采样来构建连续函数曲线的距离场。接下来，我们来讨论如何构建三角形、正多边形和椭圆的距离场。

在上一篇中，我们了解了基本的距离场构图法，在这一篇，我们来进一步利用距离场构图法来绘制更多有趣的图形。