[UE5]マテリアルで数式から波形を作る

# 概要
明滅などの反復的なマテリアルを作りたいとき、UE5ではいくつかの方法がある。
一番イメージ通りに作れるのは、適切なノードを打ったCurveデータを用意して、マテリアルのパラメータに流し込む方法だろう。
しかしこの方法ではCurveデータをプログラム（Blueprint）で制御しなければならない場合が多く、アーティスト単体では気軽に用いることができない。

そもそも反復的なグラフの殆どは数式で表せるはず。
ではマテリアルだけで様々な波形をつくろうではないか。

# 開発環境
UE5.0

# 基本グラフ
ここでは一周期（反復させたい範囲）を横軸x=1.0となるように数式を立てている。
※矩形波のみ例外。

## 矩形波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/283ee43f-eaaf-e43c-7aab-0c0a7830f562.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/41db2970-6b3a-f995-914a-e40de2b577d8.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/ea4efb76-f63c-bf8c-4e42-47f1d41c4ef8.png)

![kukeimaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/18a3f125-4de1-c825-8732-674a4dc37f35.gif)

## ノコギリ波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/3183eb50-1b49-5258-339e-dc4f50618e80.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/bee06f8f-19bb-e82b-f891-b5d43ed18fe9.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/568b9ca1-dbcf-10e7-e2ae-aedcef5b7a2a.png)
![nokogirimaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/a765b3ab-b5e0-3147-a43a-552b2fa7a12b.gif)

## 二次曲線ノコギリ波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b1671b63-aefb-f497-4070-4592edea676f.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b2abbffa-5cbe-a91a-ee60-81a24cfc2d55.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/80f99d26-4d77-92e6-fa22-7017a634f5ae.png)
![nijikyokusennokogirimaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2e519657-5c8f-8713-22ab-ae993ee76b8c.gif)

## 絶対値サイン波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/426b0a0c-c934-9f56-222d-8788ad829185.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/0db4a2cf-8ce7-4c29-6e60-6b93ccb8583a.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/1e1b5649-ffdf-f53f-b423-94ad19650b01.png)
![abssinmaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/21d128f6-774c-1100-74cf-4f89bd2ffb2b.gif)

## 絶対値サイン波（反転）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/9fd7dbfb-cf3c-5896-ce83-618a004ed948.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/5499e6c0-7a67-2841-3002-2a4ee4f72d6c.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/25ff36b9-2729-dac9-a646-9b2849a9b052.png)
![oneminusabssinematerial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/8f961a50-4801-6f4a-270b-81167eb9738a.gif)

# 可変グラフ
反復させるとはいえ、ある程度の調整はかけられたほうがいい。
ここでは2種類の可変値を用いた波形を紹介する。

## 可変インターバル矩形波
設定されたIntervalの数のうち、一度のみ矩形波が立ち上がる波形。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b35ae5fb-78b8-9e48-7394-3fac75dcc06a.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/4af78bda-7abc-1ef9-4104-7e9fe20dc1bc.png)
※x = 時間, y = インターバル（1.0<=yの自然数を取る）

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/0e8aed48-125b-567c-9358-2b997b54ef32.png)

![intervalkukeimaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/c07c25d6-4372-2a76-c2fe-0ee8dcb16b06.gif)
※Intervalが1以下にならないように注意

## 可変バイアス矩形波
反復的な波形（ここでは矩形波）に対してバイアスをかけて歪ませる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/120f440c-6e7e-ea3d-c133-83952ef3776e.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/7a0678c6-fbb5-e9ff-ee4b-92e208268377.png)
※x = 任意の波形式, y = バイアス（0.0<y<=1.0の範囲の値を取る）

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/f8bf9a7e-a631-fd8e-f5db-7c4dc69b863c.png)
![biaskukei.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/6076e384-27ce-6864-24ae-22ace0408ffd.gif)
※Biasが0にならないように注意

# 応用グラフ
ベースグラフと可変グラフを組み合わせることで、自由度の高い反復的なグラフを出力できる。

## 可変インターバル矩形波 + 二次曲線ノコギリ波（乗算）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/1e92c00d-fcfa-40a3-604c-2b319cedb79b.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/1b907c52-2c92-49bd-974b-0b157ba0c2a4.png)
![intervalnijimaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/c8c84cad-16e4-419c-033d-8df75134d79c.gif)


## 可変インターバル矩形波 + 絶対値サイン波（乗算）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b80eeecd-23e0-6a3c-e8ae-3ed70fd36bd4.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/84b6567b-e136-cab1-9592-9bc01690d17d.png)
![intervalabssin.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/10474cb4-e8f7-0304-8d79-412c7cd2b1e4.gif)

## 可変バイアス + 絶対値サイン波（波形変更）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/acc5387b-4ccb-ab46-47af-cfcdc7907850.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/bc95ebc3-acc7-81f8-dfe7-2b5832fd5a47.png)
![biasabssine.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/d683d591-f896-eec8-8724-fd24cbbbb2a3.gif)

# まとめ
高校数学程度の知識は必要だが反復的な波形は簡単に作れるため是非やってみていただきたい。

# おまけ
## 減衰波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/d308f3bd-6c10-ab1a-fc99-4d25930feb45.png)

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/e47f9c61-82d7-018d-2b65-1a76bc1e8f9d.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b1eed671-67e9-8e43-94b0-4a02a3f1c8d1.png)
![boundmaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/4dd3b04b-4c6a-3fc0-93f4-5cb4b03f2935.gif)

## バウンシングボール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/c918eb04-ae09-08d6-8a4a-0a1fd681fd7f.png)
ボールが弾むときの軌跡も簡単につくれる。

### 計算式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/866c12a7-cd77-4564-27cc-e1669502d752.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2fd895de-a9ab-a5e0-35c4-22ef5bf468f2.png)
![bounsingboal.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/d0e672e4-0592-5f70-906c-4c61a88723c2.gif)

## なんちゃって反復減衰波
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/812eadd1-8483-ab32-8b1a-2e0c531256f4.png)

### 計算式
複数の式を乗算しているため、一個一個示す。
まずは周波数が2π（つまり一周期がx=0.0~1.0の間）、位相を任意定数gap分（正の値）だけずらしたグラフ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/d8a15953-7689-3946-e2f5-093fc314cc03.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/63f11f23-0ac5-57b4-d72c-0769b8d63829.png)
---
次に絶対値サイン波のグラフ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2dfd145d-0b28-8bb6-b5f4-f99235048365.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/ce82b1df-0f9f-6487-7d2c-fa2b03ab055c.png)
---
上記二つのグラフを乗算したグラフ。
こうすることによってx=0.0~1.0の値を反復する波形を作成できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/fbc33db4-d6a0-1b47-a31e-f5a688ca3b96.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2cb201ad-6fd5-47fa-7964-7c4b4659d52e.png)
---
反復する波形は作成できたが、今のままだとyの値が1.0を越えてしまっているため、少々不都合になる場合がある。
そういった場合は任意の値でスケーリングを行う必要がある。
例えば任意定数gapの範囲を0.0~1.0に制限した場合だと次のような式を乗算することでスケーリングできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b01bb147-62fa-ab13-d539-ae008b564d7f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b4b3fcb0-0d9a-e58c-251c-7e441fbb6e95.png)
※eはネイピア数。ここへ渡すxの値は任意定数gapとする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/751ef35b-3ace-bc75-62d4-c1aaba33fe0d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/ef4d7fe1-ad6e-342f-cd9a-315e6cdf4cbd.png)

### マテリアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/5d0bcadc-606b-3b27-234f-06831ea344d5.png)
![boundgapmaterial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2f705d80-a8e9-e9bc-d354-1e3f1fa0ca13.gif)

#### ちなみに
位相をずらしたサイン波の周波数を変えたり、インターバルを設けたりすると表現の幅は無限大！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/1fc08b35-4c6a-771f-ccc8-6262b88acb9e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/b2069fed-811e-de79-fa96-7d3db5ecfa0e.png)

# 参考
・グラフ描画
https://www.geogebra.org/graphing?lang=ja
・マテリアルノード
https://docs.unrealengine.com/4.27/ja/RenderingAndGraphics/Materials/ExpressionReference/Math/