专栏首页郭诗雅的专栏极坐标系下的曲线
原创

极坐标系下的曲线

在数学中,极坐标系(英语: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 条评论
登录 后参与评论

相关文章

  • 玩转flex布局

    H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

    郭诗雅
  • Three.js camera初探——转场动画实现

    three.js是用javascript写的基于webGL的第三方3D库,通过它可以在网页中进行3D建模,结合上TweenMax.js动画库,在网页中实现3D动...

    郭诗雅
  • 动感光波发射!Unity AR开发之 3d 物体识别小记

    在 vuforia 官网中,不仅可以识别图片,还可以识别几何体,特别是从 vuforia4.x 开始支持识别更不规则的3d物体。本文将详细介绍如何在 Unity...

    郭诗雅
  • 袖珍分布式系统(四)

    本文是Distributed systems for fun and profit的第四部分,本文是阅读该文后的一些记录。

    zhuanxu
  • node工具模块

    因为计算机读取的时候是从低电位进行读取,计算的时候也是从低位进行计算(人类也是这样)这样的效率一般会比较高。

    mySoul
  • [每日一题]IP判断

    今天介绍的这题难度不大,和前面的弟弟的作业有异曲同工之妙 题目描述 在基于Internet的程序中,我们常常需要判断一个IP字符串的合法性。 合法的IP...

    编程范 源代码公司
  • 如何通过路由器来控制上网

    这种共享上网的方法一般如下:(光纤)电话线--语音分离器--(光纤猫)ADSL猫--宽带路由器-交换机-集线器-电脑

    用户1757614
  • 【面试必备】小伙伴栽在了JVM的内存分配策略。。。

    周末有小伙伴留言说上周面试时被问到内存分配策略的问题,但回答的不够理想,小伙伴说之前公号里看过这一块的文章的,当时看时很清楚,也知道各个策略是干嘛的,但面试时脑...

    黄泽杰
  • JVM - 参数配置影响线程数

    通常, -Xms 和 -Xmx 设置成一样的,避免每次垃圾回收完成后JVM重新分配内存。因为当Heap不够用时,发生内存抖动,影响程序运行稳定性。

    用户2987604
  • Python标准库 - logging

    编写代码时, 常要跟踪下其运行过程, 记录日志是常用的方式. 较简单的就是print命令打印到终端, 或通过open函数写入文件. 但随着代码量的增加, 该方式...

    py3study

扫码关注云+社区

领取腾讯云代金券