原作: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 》)。不得不承认这不太可能。我只是想写了。

计划

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

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

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

目录

计划是这样的。也许会有一丢丢不同。我会将博文连接放在此处,这里就作为总目录了。

  1. 梦开始的地方(对就是你正在读的)
  2. 三角函数曲线
  3. 弧线、圆、椭圆
  4. 利萨茹曲线 Lissajous
  5. 谐波图 Harmonographs
  6. 平托图 Pintographs
  7. 抛物线 Parabolas
  8. 贝赛尔曲线 Bezier curves
  9. 转盘曲线 Roulette curves
  10. 螺旋 Spirals
  11. 玫瑰 Roses
  12. 玑镂(扭索)纹 Guilloche Patterns
  13. 超级椭圆和超级方程 Superellipses and Superformulas
  14. 其它曲线 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/

曲线艺术编程第一章 coding curves的更多相关文章

  1. Windows核心编程第一章.错误处理

    Windows核心编程第一章,错误处理. 一丶错误处理 1.核心编程学习总结 不管是做逆向,开始做开发.在Windows下.你都需要看一下核心编程这本书.这本书确实写得很好.所以自己在学习这本书的同时 ...

  2. Java 面向对象编程——第一章 初识Java

      第一章    初识Java 1.  什么是Java? Java是一种简单的.面向对象的.分布式的.解释的.安全的.可移植的.性能优异的多线程语言.它以其强安全性.平台无关性.硬件结构无关性.语言简 ...

  3. UNIX环境高级编程--第一章 UNIX基础知识

    第一章 UNIX基础知识 1.2 UNIX体系结构   从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...

  4. 读高性能JavaScript编程 第一章

    草草的看完第一章,虽然看的是译文也是感觉涨姿势了, 我来总结一下: 由于 大多数浏览器都是 single process 处理 ui updatas and js execute 于是产生问题: js ...

  5. Go Web 编程 第一章 Web相关概念

    第一章 Go与Web应用 Go学习群:415660935 1.1 Web应用 在计算机的世界里,应用(application)是一个与用户进行交互,并完成用户特定任务的软件程序.而Web应用则是部署在 ...

  6. windows核心编程-第一章 对程序错误的处理

    第一章-对程序错误的处理 在开始介绍Microsoft Windows 的特性之前,必须首先了解 Wi n d o w s的各个函数是如何进行错误处理的. 当调用一个Wi n d o w s函数时,它 ...

  7. 【程序员翻身计划】Java高性能编程第一章-Java多线程概述

    目标 重点: 线程安全的概念 线程通信的方式与应用 reactor线程模型 线程数量的优化 jdk常用命令 Netty框架的作用 难点 java运行的原理 同步关键字的原理 AQS的抽象 JUC的源码 ...

  8. windows核心编程---第一章 谈谈windows中的错误处理机制

        我们写的函数会用返回值表示程序执行的正确与否,使用void,就意味着程序一定不会出错.Bool类型标识true时为真,false时为假.其他类型根据需要可以定义成不同意义.       Win ...

  9. 开启Golang编程第一章

    Go is an open source programming language that makes it easy to build simple,reliable, and effcient ...

  10. java并发编程--第一章并发编程的挑战

    一.java并发编程的挑战 并发编程需要注意的问题: 并发编程的目的是让程序运行的更快,然而并不是启动更多的线程就能让程序最大限度的并发执行.若希望通过多线程并发让程序执行的更快,会受到如下问题的挑战 ...

随机推荐

  1. Java浅谈BufferedReader

    既然Scanner简单好用,为什么要用BufferedReader呢? 主要原因是面对大量的读入显得较慢且不安全,这里体现在三个方面,一方面是解析的问题,好用意味着封装的更复杂,一拖n的接口解析起来会 ...

  2. uni-uadmin后台管理系统|uniapp+uView跨端后台框架实例

    基于uniapp+uview+uni-ui跨平台手机端后台管理系统UniappUAdmin. uniapp-uadmin 基于uni-app+uView+uniUI研发的跨端手机后台管理系统项目.全新 ...

  3. 小知识:在Exadata平台上使用ExaWatcher收集信息

    在非Exadata平台上,我们通常会使用DBA已经很熟悉的OSW,如果有不熟悉的朋友可以参考我之前的随笔初步了解OSW: OSW 快速安装部署 OSW Analyzer分析oswbb日志发生异常 而在 ...

  4. 火山引擎ByteHouse:如何为OLAP设计高性能向量检索能力?

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 随着LLM技术应用及落地,数据库需要提高向量分析以及AI支持能力,向量数据库及向量检索等能力"异军 ...

  5. 解决npm 下载速度慢的问题

    更换源,这个是最直接方便 有保障的方法了,不要去安装cnpm,因为你无法确定 他是否做了后门.!! 1. 如果不想安装cnpm 又想使用淘宝服务器来下载扩展插件:(这种方法 每次都得带 废弃) npm ...

  6. CentOS7.5上卸载Oracle19c

    最近遇到一个麻烦的事情,由于公司开发的数据库备份容灾系统,对于备份容灾的数据库必须使用LVM(pv.vg.lv),所以之前安装的Oracle19C 必须卸载掉,然后使用空白磁盘通过parted.fdi ...

  7. clickhouse导入和导出

    一.连接clickhouse--客户端连接default库clickhouse-client -h localhost --port 9001 -u default --password 123456 ...

  8. Windows终端的一些配置

    前言 记录早前拿到新的笔记本(win10)后配置命令行的过程,以下是环境: 命令行 : CMD,PowerShell7 Shell :Windows Terminal 设置编码格式(当前代码页)为UT ...

  9. JS 判断对象属性是否存在,判断是否包含某个属性,是否为自身属性

    壹 ❀ 引 看过博主JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链这篇文章的同学应该知道,文中有专门介绍这个问题.那么为什么我要另起一篇再说一次呢?原因有两个,一是介绍原型与原型链的 ...

  10. NC22544 车站

    题目链接 题目 题目描述 一个国家有n个城市,有n-1条道路连接,保证联通.还有m条铁路,从1~m编号,第i条铁路是从ui到vi的简单路径,多次询问一段区间的铁路的车站. 一个点可以作为区间[L,R] ...