极坐标系下的曲线

在数学中,极坐标系(英语: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地址:代码地址展示地址

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏瓜大三哥

Matlab基本语法5

二维数据可视化 1.基本绘图函数 plot(y):如果是复数向量,则以实部为横坐标,以虚部为纵坐标 plot(x,y) plot(x,y,s):s表示字符串标记...

24150
来自专栏前端新视界

使用 JavaScript 和 canvas 做精确的像素碰撞检测

原文:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开...

52590
来自专栏图像识别与深度学习

2018-04-21CNN经典模型

220100
来自专栏iOS122-移动混合开发研究院

Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 最新示例: 点击下载 项目简议: 如果再...

27850
来自专栏书山有路勤为径

形态学操作—膨胀与腐蚀(Dilation and Erosion)

膨胀和腐蚀被称为形态学操作。它们通常在二进制图像上执行,类似于轮廓检测。通过将像素添加到该图像中的对象的感知边界,扩张放大图像中的明亮白色区域。侵蚀恰恰相反:它...

10810
来自专栏Python中文社区

Python用Pillow(PIL)进行简单的图像操作

專 欄 ❈ sunhaiyu,Python中文社区专栏作者 专栏地址: http://www.jianshu.com/u/4943cb2c6ea4 ❈ Pyt...

410100
来自专栏生信小驿站

机器学习实战⑴之线性回归预测房价机器学习实战

一般来说,一个学习问题通常会考虑一系列 n 个 样本 数据,然后尝试预测未知数据的属性。 如果每个样本是 多个属性的数据,比如说是一个多维记录),就说它有许多“...

13720
来自专栏Python小屋

Python简易验证码生成程序

from PIL import Image, ImageDraw, ImageFont import random import string #所有可能的字符...

36170
来自专栏我爱编程

Matplotlib入门

qiangbo.space/2018-04-06/matplotlib_l1/ 入门代码示例 import matplotlib.pyplot as plt ...

39190
来自专栏梦里茶室

TensorFlow 深度学习笔记 卷积神经网络

Convolutional Networks deep dive into images and convolutional models Convnet Ba...

22480

扫码关注云+社区

领取腾讯云代金券