Sine function visualization using Unity3D
Tags: unity3d, math, sine, visualization
Published: 2019-07-12 07:10:05

---
title: Sine function visualization using Unity3D
published: true
description: **"Coding Druid"** series is my **horizontal programming** practice notes, each part around a topic like mathematical, physics, electronic, graphics, sound, etc., implemented in several programming languages.
tags: Unity, Math, Sine, visualization
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r9tfl4379iyt9g23d8kp.jpg
---


**"Coding Druid"** series is my **horizontal programming** practice notes, each part around a topic like mathematical, physics, electronic, graphics, sound, etc., implemented in several programming languages.

----
**Coding Druid**
Part: Math
Chapter: Trigonometric Function
Section: Unity3D

*In other sections, I visualized Trigonometric function (Sine and unit circle) by [MaxMSP](https://www.patreon.com/posts/sine-function-28131990/), [Python](https://www.patreon.com/posts/sine-function-28238879), [JavaScript(React)](https://www.patreon.com/posts/sine-function-28178275):*


![trig-sine-visualization-reactjs](https://thepracticaldev.s3.amazonaws.com/i/op2idw4oo1x2rmrze3jq.gif)


This time I use **Unity3D** to implement it.


In the Python version, the data visualization Library Matplotlib was used. With Unity I just draw it according to the trigonometric function algorithm.


Firstly, Let a point move with the Sine function curve.

Put a Sphere in the scene, and let its `position.x` increase at a constant speed, then `position.y = sin(position.x)`.

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

![sine-unity-sineball](http://floatcc.intplusplus.org/sine-unity-sineball.gif)

<br/>

Next, draw a path of the sphere moving along the unit circle.

Note that here, set the radius of the unit circle to 1, and set the period length of Sine to 2Pi. That is as shown in the previous sections, the unit circle shares a coordinate system with Sine.

Formula to drawing a circle:
>x = cos(t);
y = sin(t);

The param `t` here, in fact is the `position.x` of the Sine in previous step.

Then move the center of the circle to the left, to make the rotating starting point of the unit circle consistent with the starting point of Sine.

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

![sine-unity-circleball](http://floatcc.intplusplus.org/sine-unity-circleball.gif)

<br/>

Combine the Sine and unit circle:

![sine-unity-sinecircleball](http://floatcc.intplusplus.org/sine-unity-sinecircleball.gif)

<br/>

In the previous articles, I drew the path of the curve to make it more clearly, such as Python:

![sine python effect](http://floatcc.intplusplus.org/sine-py-effect-0.gif)

I plan to be lazy with Unity. 
Add the `Trail Renderer` directly to the two spheres, and let them draw path trail effect themselves.

![sine-unity-trail0](http://floatcc.intplusplus.org/sine-unity-trail0.gif)

Well, The default trail is a bit strong...

OK let's change it. After searching `trail` in the Unity Assets Store I find a free [good track effect](https://assetstore.unity.com/packages/vfx/particles/spells/particle-ribbon-42866)：

![unity-trail](https://assetstore-cdn-china-v1.unitychina.cn/key-image/6669ea2e-1c95-42fc-b061-51ceb257d996.jpg)

After installation the asset there are a lot of effects. Then pick a material by liking:

![sine-unity-trail-material](http://floatcc.intplusplus.org/sine-unity-trail-material.png)

Attach the material to the Trail Renderer.

<br/>

**Final Effect**:

![sine-unity-croped](https://thepracticaldev.s3.amazonaws.com/i/1lwa8c2fi4f0p4pvcp3n.gif)

*In the released source code, I added `Trail Renderer` to an empty `GameObject` and moved with the sphere. I didn't add the track directly to the sphere. There is no special reason, just practice of Unity newbie.* 

Reference article: [Building a Graph Visualizing Math](https://catlikecoding.com/unity/tutorials/basics/building-a-graph/)

-----

**Talk is cheap. Show me the code!**

This demo of the "Coding Druid" series is open source here:
https://github.com/avantcontra/coding-druid


You can find more resources in my site [floatbug.com](https://www.floatbug.com).
 Or you may **buy me a coffee** in my [Patreon](https://www.patreon.com/avantcontra). Your encouragement is my driving energy!


Cheers~

Contra


- Website: [floatbug.com](https://www.floatbug.com)
- Github: [avantcontra](https://github.com/avantcontra)
- Facebook: [avantcontra](https://facebook.com/avantcontra)
- Twitter: [avantcontra](https://twitter.com/avantcontra)
- Instagram：[avantcontra](https://www.instagram.com/avantcontra)
- Patreon (**buy me a coffee** XD): [avantcontra](https://www.patreon.com/avantcontra)