跳到主要内容

Unity三角函数可视化

【编程德鲁伊】系列是我的横向编程练习笔记,每期围绕一个主题(数学物理电子图形声音...),用几种程序语言分别实现。战法牧贼同时修,能抗能打能奶能开溜。


编程德鲁伊 - 数学篇 - 三角函数可视化 Unity 实现

sine-unity-croped


前三节用MaxMSP、JavaScript、Python做了三角函数(正弦和单位圆)的可视化,长这样:

trig-max-visualization.gif

【编程德鲁伊 - 数学篇】MaxMSP三角函数可视化


sine-js-croped.gif

【编程德鲁伊 - 数学篇】JavaScript (React) 三角函数可视化


sine python effect

【编程德鲁伊 - 数学篇】Python 三角函数可视化


这次用Unity来实现。


上一篇Python版,用到了数据可视化Library Matplotlib。 Unity就不用这种库了,直接按三角函数算法去画。

先让一个点随着Sine函数曲线运动起来。

场景里放一个Sphere球体,让它的position.x匀速递增,position.y = sin(position.x)即可。

Vector3 posSine = sphere.localPosition; posSine.x += speed; posSine.y = Mathf.Sin(posSine.x); sphere.localPosition = posSine;

sine-unity-sineball

接下来再画一个球体沿着单位圆运动的轨迹。

注意这里,设置单位圆的半径为1,设置Sine的周期长度为2Pi,即如之前几篇所示,单位圆与Sine共用一个坐标系。

画圆的公式:

球体的x = cos(t); 球体的y = sin(t);

这里的t,实际上就是上一步Sine的x。 然后再把圆心往左移,让单位圆转动的起点,与Sine的起点一致。

Vector3 posCircle = posSine; posCircle.x = Mathf.Cos(posSine.x) - 1f; posCircle.y = Mathf.Sin(posSine.x); circleDot.localPosition = posCircle;

sine-unity-circleball

合在一起:

sine-unity-sinecircleball

前几篇,还要手动画上曲线的路径轨迹,这样看着更清晰,如Python的:

sine python effect

到Unity这里,打算偷个懒,直接给两个球体加上Trail Renderer,自带轨迹美滋滋。

sine-unity-trail0

默认轨迹有点美艳的粗壮...

改一下吧,Assets Store里搜trail,找到一个免费的不错的轨迹效果

unity-trail

安装后有不少效果,挑选一个有眼缘的材质:

sine-unity-trail-material

把材质附到Trail上。

最终效果:

sine-unity-croped

注,发布的源代码里,我是将Trail Renderer添加在一个空的GameObject上,跟球体一起运动,没有把轨迹直接添加在球体上,没什么特别的原因,小生(老夫)Unity新手练手而已。

参考文章:Building a Graph Visualizing Math



Talk is cheap. Show me the code!

本例及【编程德鲁伊】系列大部分代码都开源在这里: https://github.com/avantcontra/coding-druid


公众号/B站/小红书/抖音/知乎:实验编程

实验编程社群资源、公开课: https://ghc.h5.xeknow.com/s/hzkMX

实验编程情报中心(会员): https://ghc.h5.xeknow.com/s/2BCFuJ

Cheers🍻

Contra