曲线艺术编程第一章 coding curves

原作：Keith Peters

原文：https://www.bit-101.com/blog/2022/11/coding-curves/

译者：池中物王二狗(sheldon)

blog: http://cnblogs.com/willian/

源码与中英对照：github: https://github.com/willian12345/coding-curves

译者闲白：

我入前端这行已经 10 几年了，很幸运刚入行就赶上了互联网的爆发期。最开始其实是写 Flash 的，完全是兴趣爱好。当然那时候应该没有前端这个岗位。前端这类工作，因为所见即所得，这种即时反馈我很喜欢。

到现在 2023 年了都，然而技术其实还是挺菜的。说白了这么多年都在努力上班，写各种莫名其妙的业务，接各种奇怪的需求。从 PC 到 Mobile，从 Flash 到 HTML Javascript。其间还写过一点 php 和 Objective-C， 2015 年的时候公司要搞 VR 还写过一段时间的 Unity 所以 C# 也会一点。但是以前学的很多语言特性相关的知识都往事如烟了，唯有基础的知识至今还依然在工作中还有用。

最早知道 Keith Peters 是在 2008 年，他出过两本关于 flash 的书《基础动画》与《高级动画》都有中文版本。很幸运这两本书都拜读过，两本都是讲动画相关的基础知识，写的相当优秀，尤其对前端这个职业非常有帮助。

为什么我想翻译他的这个系列文章？嗯。。因为足够简单，不需要引用任何库，拿个文本编辑器就能写，有个浏览器就能跑。虽然我的英语水平也不好，但基于以前读过他的书还有自身处于前端岗位。所以我觉得没问题。我是在 Markdown 上一段一段翻译的，所以中英对照的 Markdown 也在 github 上了。

https://github.com/willian12345/coding-curves/tree/main/posts

作者用的是伪代码方式讲解，我用 Javascript 实现了一遍。每个例子源码都是单独的 html文件，无任何引用，安心...

现已翻译至 10 章.. 需要校对后再发成文章，如果急的话，可以去看中英对照的 Markdown 文件，但弄的挺乱的...

如果有翻译不到位的地方欢迎指正

以下开始作者原文译文

背景

多年来，我一直希望写一本名为“曲线编程”的书。各种领人着迷的曲线，可以用于趣味编程、更好的理解曲线、生成生动有趣的图形。

我开始写这本书至少三次了，结果冲动又来了，但这回我会现实一点，我不会正襟危坐从头到尾写一本书完整的书并把它编辑成册自己出版（译者注：原作者之前自己出版过《Playing with Chaos 》）。不得不承认这不太可能。我只是想写了。

计划

所以呢，我打算写成系列博客。我不知道发布频率有多高。勤快的话也许一周一篇。如果运气好一切顺利的话可能更的更快些。

但如果我感到无聊、分心或忙于其它事情也可能会更新的很慢。但只要有空，我还是会继续写。

也许，全部完成后真的可以搞成一本书，鬼知道呢。。

梦开始的地方(对就是你正在读的)
三角函数曲线
弧线、圆、椭圆
利萨茹曲线 Lissajous
谐波图 Harmonographs
平托图 Pintographs
抛物线 Parabolas
贝赛尔曲线 Bezier curves
转盘曲线 Roulette curves
螺旋 Spirals
玫瑰 Roses
玑镂（扭索）纹 Guilloche Patterns
超级椭圆和超级方程 Superellipses and Superformulas
其它曲线 Miscellaneous Curve

一般来说我们会限制在讨论二维的曲线。其中一些课题会用多篇博文.隨着内容的更新，目录也会更新。也许有更多的章节，我很 open 的，欢迎提建议。

受众目标

此课程目标用户是那些对探索不同类型的曲线，并在绘制中实践它们。可能适合：艺术家、设计师、游戏开发、UI、休闲数学家。这不是一个数学教程，尽管有大量的数学包含在内。我给的大量的解释也是非常不完整的。希望提供的材料信息足以让你理解将要绘制的绘制曲线并举一反三。但，每个章节仅仅介绍了一下相关的数学主题。希望没有什么直接错误。当然我很乐你们指出我的错误，我会尽最大努力改的。

个人来讲，我喜欢找一些数学公式用于创建一些有趣的图形，并观察参数对形状的影响，最终对这些参数进行动态改变形成动画，最后通过对曲线应用公式不断叠加创造一些前所未有的形状。如果你也是其中的爱好者，相信你也会喜欢的。

内容约定

我之前写的大多数文章会使用特定的编程语言，如： Playing With Chaos 内，使用的是 javascript 和 HTML5 Canvas. 主要是希望能它能通用的转换成的任意语言或平台，但又感觉需要使用实际的编程语言来实现它。

但最近在阅读一些优秀的 “射线追踪” 相关的文章时，看到它们没有使用某种真实的编译语言实现，而是通过伪代码的方式展示例子。所以我改主意了，我也将使用伪代码作为代码示例。

所以，无论你在任何编程语言，任何平台上实现，你需要注意以下几点必要条件：

A. 有能力设置canvas或其它类似可以提供绘制的能力

B. 在此基础上可提供绘制不同颜色、粗细线条的能力

C. 拥有典型的编程语言特征和控制结构，如方法，变量，循环，条件等等。可能还需要一些数组或列表还有对象结构类型，这样就可以创建一个像 Point 这样拥有 x 和 y 属性的类。任何现代编程语言都包含以上提到的大多数特性，尽管可能样子看起来不太一样。

另外，如果能画圆（至少能画圆弧，圆弧能组成圆）和矩形且能为其填充颜色，当然如果能有填充文本的 api 就更好了。

简单的伪代码例子可能看起来像下面这样:

canvas(800, 800)

 

setLineWidth(5)

setColor(1, 0, 0) // red

moveTo(100, 100)

lineTo(700, 700)

stroke()

应该输出像这样的图

我会避免深入面向对象或函数式编程它们在不同平台上看起来太不一样了，但我们又需要一些方法函数，所以我保留了一些最基本的：

canvas(500, 100)

foo(100)

function foo(count) {

  for (i = 0; i < count; i++) {

    moveTo(i * 10, 10)

    lineTo(i * 10, 90)

  }

  stroke()

}

看起来应该是这样

还有一些注意事项

首先，在定义 foo 方法前我先调用了 foo ，在某些编程语言中可能会报错。如果报错，请根据你自己使用的语言调整调用顺序。

其次，绘图 api 调用方式写的好像是直接全局调用。在你的编程语言中可能需要在 canvas 对象下调用，定义成全局或将 api 传进来。我自己能搞定, 我信你。我就不多说了。重点是有这样的概念，但这可不是最佳的编程实践。

当然我也不会在伪代码中强调变量类型，传参类型，结果返回类型，除非某些特例。随着本系列的深入我的伪代码风格可能也会发生变化，如果是的话，我会回来改这里的说明的。安心了…

等风来

期待第一章吧！

本章 Javascript 源码 https://github.com/willian12345/coding-curves/blob/main/examples/ch01/

博客园: http://cnblogs.com/willian/

github: https://github.com/willian12345/