謎模様ジェネレータ

https://gyazo.com/72cc76a762af4326e40ff9cde9e5f6cb

もともとはノイズの結果を3段階くらいに分けたらドット絵のマップチップ書く補助になるんじゃないかと思った。

線形補間の式

こうでしょって何も見ずに書いたら間違えた

code:js

function lerp(a, b, t) {

return (1-t)*a + t*b;

}

フェード関数

code:js

function fade(t) {

return t*t*t*(t*(t*6-15)+10);

}

先人の知恵やな・・・

code:js

const u = x / w;

const v = y / h;

let n =

Simplex.noise3D(x, y, z) * u * v

+ Simplex.noise3D(x, y + h, z) * u * (1.0 - v)

+ Simplex.noise3D(x + w, y, z) * (1.0 - u) * v

+ Simplex.noise3D(x + w, y + h, z) * (1.0 - u) * (1.0 - v);

対角線対称

code:js

const u = x / w;

const v = y / h;

let nx = Simplex.noise3D(

Math.cos(u * 2 * Math.PI) * InData.fx * Const.LOGICAL_SIZE,

Math.sin(u * 2 * Math.PI) * InData.fy * Const.LOGICAL_SIZE,

z);

let ny = Simplex.noise3D(

Math.cos(v * 2 * Math.PI) * InData.fx * Const.LOGICAL_SIZE,

Math.sin(v * 2 * Math.PI) * InData.fy * Const.LOGICAL_SIZE,

z);

nx = Math.floor(nx * InData.step) / InData.step;

ny = Math.floor(ny * InData.step) / InData.step;

const n = Math.min((nx + ny), 1);

ノイズに渡す値について

ノイズの荒さ、細かさ

1次元のパーリンノイズ を考えた時、ノイズの荒さ、細かさは、波の周波数のようなものと感じられる。

周波数の大小は、前回入力値と今回入力値との差で表現できる。

2次元のパーリンノイズ の絵をみた時、これは拡大率にも見える

ノイズに渡す変数に、係数を掛ける事で荒さ、細かさを制御できる。

ノイズの平行移動

等高線のような表現にする

コントラストを上げる

シームレスパーリンノイズの平行移動計算に失敗しているようで、幅を意識する必要がある場合はUVみたいにノイズに渡す値域を０～１にした方が分かりやすいかも

計算式が分かればシェーダにも転用出来るってのは良いね

シェーダのAPIに、ノイズ関数が無いので、どうにかして自作する必要があるみたい。