フィルタ―⑳／Affinity3 ソラリゼーション・ハーフトーン・Voronoi（水晶） の続き
プロシージャルテクスチャ
数式を使ってテクスチャを作ることができます。
プロシージャルテクスチャの使い方
ドキュメントのカラーモードがＲＧＢの場合の解説をしていきます。こんな感じのパネルが出てくると思うので、真ん中らへんの左にある「＋」マークをクリックしてください。
すると、数式欄が出てきます。
ここに好きな数式を入れて、テクスチャを作っていきます。
0がその色を「使わない」、1がその色を「使う」 です。
右側にあるRGBAはそれぞれ、赤、緑、青、透明度 を意味します。
（ドキュメントカラーモードがＣＭＹＫの時はＣＭＹＫが表示される）
クリックした項目に、数式を反映させる感じです。
例えばＲＧＢにチェックを入れた状態で、数式に
0を入れる：その色を「使わない」＝RGB全部ない＝真っ暗（黒）になる
1を入れる：その色を「使う」＝RGB全部ある＝その色が最も明るく、白になる
RGBは光を重ね合わせて色を作るので、RGB全部が１になると白色になります。
数式に1と0を入れて、R,G,B,A各ひとつだけクリックしたとき、それぞれ下記のようになります。
数式に1を入れた場合
数式に0を入れた場合
1を入れた場合はその色が反映されるだけなのでわかりやすいですが、0を入れた場合はRGBの引き算が発生するのでちょっとわかりにくいです。
難しいので、頭の片隅にだけ置いておいて、必要となるときまで忘れてＯＫです。
色合いまで変える数式を自分で作ろうとしたときに必要となるので一応ご紹介。
プロシージャルテクスチャを使うと何がいいの？
プロシージャルテクスチャで作成すると、画像ファイルを使わないためデータサイズが小さくできます。また、拡大しても画質が劣化しない、バラメーターを変えるだけで色や模様、大きさを簡単に調整できる、という利点があります。サンプル作成
※真っ白な背景だとうまくできないことがあるので、何色でもいいから色を塗ったレイヤー上で「プロシージャルテクスチャ」を作成してください。グラデーション
数式に「x/w」と入力。RGBにチェック。Wは画像の横幅を、Ｘは横座標を表します。
座標は一番左が0で、1pxずつ右に増えていきます。
W100pxの画像なので、一番右は99です（0から始まっている為、１つ少なくなる）
X＝0（一番左）を横幅で割ると、0÷100＝0。ゆえに、黒。
右に行けば行くほど1÷100＝0.01…、2÷100＝0.02＝…となっていくので、だんだん1（白）に近づいていく、といった感じです。
もちろん、Wの代わりに数値を入力してもＯＫです。
50と入力すれば、左から51pxの位置から、白くなるグラデーションが作れます。
数式は複数指定できるので、ＲＧＢそれぞれ別のグラデーションを作り、重ねることもできます。
半分で色を分ける
数式に「step(0.5, x/w)」と入力。RGBにチェック。Wは画像の横幅を、Hは縦幅を表します。
xは横座標を、yは縦座標を表します。
stepという数式は、ある値が指定したしきい値を超えたかどうかで、0か1のどちらかを返す関数です。
step(a, b) の場合、
b ≥ a なら「1」を返す（ON、白）
b < a なら「0」を返す（OFF、黒）
step(0.5, x/w)は、横幅が0.5を超えたら白くする、という意味です。
0.5の数値を変えれば、好きな位置で白黒分けられます。
せっかくなので、「カスタム入力」で制御できるようにしてみましょう。
0.5 と入力していたところの代わりに「a」を入力します。
step(a, x/w)
そして、「カスタム入力」の下にある「0,1」をクリック。
下にあるボタンは、それぞれのパラメーターを持った変数を作ることができます。
上の画面のようにできたら、バーを左右に動かしてみて下さい。
白黒のラインが左右に移動できると思います。
こんな風にして、数式と変数を使っていろいろなテクスチャを作成することができます。
カスタム入力の種類
下にある0,1などのボタンで作れる変数の種類です。0,1
0から1までの小数値を入力可能。0（最小）～1（最大）で調整するものに使う。-1,1
-1から1までの小数値を入力可能。中心を0として左右（または上下）対称に変化する効果や、周期関数（sin/cos）などに使う。R（実数）
制限のない実数値（整数・小数）を入力できる。Z（整数値）
小数点の無い、整数のみ入力できる。繰り返しの回数とかに使う。角度
角度を入力するときに使う。回転や傾き、方向指定など。仰角回転の入力
英語名は「Elevation-Rotation Input」みたいです。模様や効果の“立体的な向き”を指定できるらしいですが、よくわからん…。
R（赤）：画像のX方向の位置に応じて値が変わる
G（緑）：画像のY方向の位置に応じて値が変わる
B（青）：画像中心からの距離に応じて値が変わる（非線形、cos関数的な変化）
数式にaと入力し、カスタム入力にaを指定してぐりぐり動かすと、どんな感じか確認できると思います。
変数名に.rや.gとつけることで、X方向やY方向などを個別に抜き出して使用することもできます。
変数Aの場合。
A.r ハンドルのX位置。左右（0～1）
A.g ハンドルのY位置。上下（0～1）
A.b ハンドルの中心からの距離（1～0）
正直、使いどころよくわかりません(´・ω・`)
何かわかったらまた追記します。
次で説明する「プリセット」の「シンプルバンナップ照明」とか使うと、雰囲気が掴めるかと思います。
プリセット
作ったテクスチャはプリセットに保存して、使いまわすことができます。既にいくつかプリセットに登録されているので、サンプルとして使ってみて下さい。
プリセットだけでも結構いろんなテクスチャがあって面白いと思います。
……というか、このプリセットを使うときしか、プロシージャルテクスチャ使ってません(=・ω・=)
凝ったら自分でいろいろ作れるんだろうけれど、素材ＤＬしちゃった方が早い……。
そのほかの使える関数や数式などは、Affinityのホームページに記載があります。
https://www.affinity.studio/ja_jp/help/filters-filter-proceduraltexture/
プリセットの管理
右側の三本線をクリックすれば、自分で作ったプリセットを保存したり、インポートしたりできます。試しに「noise(x*a, y*b)」で作ったノイズテクスチャを「プリセット作成」
下からカテゴリを選び、好きな名前で登録。
すると、選んだカテゴリに登録したプリセットが表示されます。
自分が作った奴は左側に人物アイコンが付くみたい。
カテゴリを増やしたり、プリセットを消したり増やしたりは、「プリセットの管理」からできます。
プリセットマネージャーは、図形のプリセットマネージャーとほぼ一緒。
わかりにくいのは
「マスタープリセットの復元」＝もともと入ってたプリセットを復活できる。間違って消しちゃったときに
「フィルター」＝RGBやCMYKなどのカラーモードでフィルタリングできる。
ぐらいですかね。
その他の詳しい使い方は「図形ツールについて①／Affinity3」を参照してください。
大体使い方一緒。
とりあえず何個かGeminiちゃんにお手伝いしてもらいながら、プロシージャルテクスチャを作成したのでプリセットを置いておきます。
「プリセットをインポート」から読み込めば使えます。
https://drive.google.com/file/d/1ov71_DiM_0_BPREX3NXp0YzKqH9CxgyB/view?usp=sharing
そのうちまた気が向いたら追加します。
こんなん考えたから使ってくれー！ というアイデアがあったら是非教えて下さい(=・ω・=)✨
フィルタ―㉒／Affinity3 に続く
投稿
