极坐标系下的曲线

栏目: JavaScript · 发布时间: 6年前

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

在数学中,极坐标系(英语: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. 阿基米德螺线

函数:

参数意义:相邻“臂”之间的距离为2*180*a

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

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

6. 对数螺线

函数:

js动画:

7. 双曲螺线

函数:

js动画:

以上七种曲线的demo: 展示地址

总结

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

demo地址: 代码地址 展示地址


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

测试驱动开发

测试驱动开发

Kent Beck / 孙平平、张小龙 / 中国电力出版社 / 2004-4-1 / 28.00元

《测试驱动开发》(中文版)设想把编程看成是转动曲柄从井里提一桶水上来的过程。如果水桶比较小,那么仅需一个能自由转动的曲柄就可以了。如果水桶比较大而且装满水,那么还没等水桶全部被提上来你就会很累了。你需要一个防倒转的装置,以保证每转一次可以休息一会儿。水桶越重,防倒转的棘齿相距越近。测试驱动开发中的测试程序就是防倒转装置上的棘齿。一旦我们的某个测试程序能工作了,你就知道,它从现在开始并且以后永远都可......一起来看看 《测试驱动开发》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具