从小数学就不及格的我,竟然用极坐标系表白了我的女神!(附代码)

67次阅读

共计 1105 个字符,预计需要花费 3 分钟才能阅读完成。

欢迎大家前往腾讯云 + 社区,获取更多腾讯海量技术实践干货哦~
本文由郭诗雅发表于云 + 社区专栏

在数学中,极坐标系(英语:Polar coordinate system)是一个二维坐标系统。该坐标系统中任意位置可由一个夹角和一段相对原点—极点的距离来表示。在两点间的关系用夹角和距离很容易表示时,极坐标系便显得尤为有用;而在平面直角坐标系中,这样的关系就只能使用三角函数来表示。对于很多类型的曲线,极坐标方程是最简单的表达形式,甚至对于某些曲线来说,只有极坐标方程能够表示。(来自维基百科)
​ 通过转换,极坐标的 (φ, r) 可以变换为直角坐标系中的 (x,y) 坐标,转化公式如下

这样,许多用极坐标函数表示的曲线,都可以在 js 里面转成直角坐标系并画出来了。下面介绍一下以下几种曲线并用 canvas 绘制了曲线动画:
1. 心形线
函数:

参数意义:a 表示从 x 轴上从原点到最远点的一半。

js 动画:在 js 中实现时,只需将极坐标角度从 0 到 360 代入方程,求出 (x,y) 坐标

2. 伯努利双纽线
函数:

参数意义:a 表示从中心点到两端最远处的距离。

js 动画:绘制时,代入角度的区间是 [-45,45],需要绘制(-x,-y) 和(x,y)两部分的坐标。

3. 星形线
函数:

参数意义:a 表示从中心点到最远处的距离。

js 动画:在 js 中实现时,只需将角度从 0 到 360 代入方程,求解过程中不需要转换极坐标,直接代入 x,y,求出 (x,y) 坐标

4. 玫瑰线
函数:

参数意义:k 代表有“几朵花瓣”,如果 k 是奇数,则得到的花瓣数就是 k,如果 k 为偶数,则得到的花瓣数为 2k。a 同上表示从中心点到最远处的距离。
js 动画:当 k 为奇数时,角度区间在 [0,180] 即可闭合;当 k 为偶数时,区间在[0,360].

5. 阿基米德螺线
函数:

参数意义:相邻“臂”之间的距离为 2180a
js 动画:角度一般要设置大于 360,才有螺线效果,例子中角度为弧度,所以相邻“臂”之间的距离为 2PIa。

除此之外,还有这样以几何级数增大的螺线和从外往内描绘的螺线:
6. 对数螺线
函数:

js 动画:

7. 双曲螺线
函数:

js 动画:

以上七种曲线的 demo:展示地址
总结
​ 在简单的图形和动画轨迹上,我们可以换一种实现思维,例如通过函数来实现。最后,使用 k = 6 的玫瑰线定义了 (x,y) 坐标,并设置 z 坐标为 (x,y)到 z 轴距离的 3 次方根,通过 threejs,设置图片的顶点数,用曲线连接画了一个小 demo。
demo 地址:代码地址展示地址

问答游戏体系结构相关阅读玩转 flex 布局动感光波发射!Unity AR 开发之 3d 物体识别小记 Three.js 粒子系统学习小记:礼花效果实现【每日课程推荐】机器学习实战!快速入门在线广告业务及 CTR 相应知识

正文完
 0