ノイズ関数

特性

Processing, openFrameworksには標準でノイズ関数が用意されています。
下記はそれぞれのリファレンスへのリンクになります。

Processing noise関数
openFrameworks ofNoise関数

どちらの関数も指定した引数に基づき、0.0から1.0までの間で連続的に変化する値を返す関数です。言葉だけでは良く分からないと思いますので、引数を0から0.05づつ増加させたnoise関数の返り値を羅列したものを見てみましょう。

雰囲気を掴んで貰えるよう100行用意しましたので、値の変化に注目しながらスクロールを進めて下さい。また、末尾に出力した際に使用したProcessingのソースコードもありますので、興味のある方は自身の環境で実行してみてください。

関数名(引数) : 返り値
noise(0.00) : 0.11172
noise(0.05) : 0.11978
noise(0.10) : 0.13734
noise(0.15) : 0.15224
noise(0.20) : 0.15946
noise(0.25) : 0.16817
noise(0.30) : 0.18849
noise(0.35) : 0.21029
noise(0.40) : 0.21221
noise(0.45) : 0.19755
noise(0.50) : 0.19243
noise(0.55) : 0.20360
noise(0.60) : 0.22071
noise(0.65) : 0.24283
noise(0.70) : 0.27743
noise(0.75) : 0.29258
noise(0.80) : 0.28837
noise(0.85) : 0.27902
noise(0.90) : 0.25409
noise(0.95) : 0.21525
noise(1.00) : 0.19511
noise(1.05) : 0.18889
noise(1.10) : 0.18133
noise(1.15) : 0.18880
noise(1.20) : 0.20647
noise(1.25) : 0.22240
noise(1.30) : 0.24995
noise(1.35) : 0.29253
noise(1.40) : 0.32501
noise(1.45) : 0.35294
noise(1.50) : 0.35901
noise(1.55) : 0.33509
noise(1.60) : 0.30289
noise(1.65) : 0.29044
noise(1.70) : 0.28264
noise(1.75) : 0.26519
noise(1.80) : 0.22681
noise(1.85) : 0.17644
noise(1.90) : 0.13467
noise(1.95) : 0.10305
noise(2.00) : 0.09137
noise(2.05) : 0.09223
noise(2.10) : 0.09121
noise(2.15) : 0.08441
noise(2.20) : 0.08133
noise(2.25) : 0.08813
noise(2.30) : 0.09703
noise(2.35) : 0.10910
noise(2.40) : 0.13564
noise(2.45) : 0.18318
noise(2.50) : 0.21886
noise(2.55) : 0.24520
noise(2.60) : 0.28917
noise(2.65) : 0.34038
noise(2.70) : 0.39194
noise(2.75) : 0.43608
noise(2.80) : 0.47592
noise(2.85) : 0.51949
noise(2.90) : 0.55355
noise(2.95) : 0.56971
noise(3.00) : 0.57340
noise(3.05) : 0.56168
noise(3.10) : 0.53427
noise(3.15) : 0.50925
noise(3.20) : 0.49376
noise(3.25) : 0.48834
noise(3.30) : 0.49272
noise(3.35) : 0.50014
noise(3.40) : 0.50059
noise(3.45) : 0.48841
noise(3.50) : 0.46992
noise(3.55) : 0.44139
noise(3.60) : 0.39598
noise(3.65) : 0.34947
noise(3.70) : 0.29876
noise(3.75) : 0.25462
noise(3.80) : 0.23433
noise(3.85) : 0.22501
noise(3.90) : 0.20244
noise(3.95) : 0.17800
noise(4.00) : 0.16732
noise(4.05) : 0.17382
noise(4.10) : 0.18365
noise(4.15) : 0.18027
noise(4.20) : 0.16291
noise(4.25) : 0.14408
noise(4.30) : 0.13240
noise(4.35) : 0.12442
noise(4.40) : 0.11274
noise(4.45) : 0.10151
noise(4.50) : 0.09623
noise(4.55) : 0.10106
noise(4.60) : 0.10735
noise(4.65) : 0.10076
noise(4.70) : 0.08598
noise(4.75) : 0.08197
noise(4.80) : 0.09368
noise(4.85) : 0.11549
noise(4.90) : 0.14569
noise(4.95) : 0.16817

お疲れ様でした。
それでは、列挙された値から読み取れるポイントを説明します。

ポイント1 : 0.0 – 1.0

ご覧の通り返り値は0.0から1.0までの間の数字です。この範囲以外の数字が表れる事はありません。ノイズ関数は0.0から1.0までの数字を取得するための関数なのです。ProcessingやopenFrameworksでは、この0.0から1.0までの数字を、動きや色などの表現・見せ方に利用していきます

ポイント2 : 連続的な変化

各行の前後行で返り値を見比べて見て下さい。列挙されたケースでは、その差は大きくても0.03程に収まっています。これは引数を0.05増やす(又は減らす)事によって、現在の引数の返り値との差が、大きくても0.03程度の値を取得出来る事を表しています。

ポイント3 : スケール

更に、引数を4.9から0.01づつ4.95まで増加させた場合の返り値を用意しました。

noise(4.90) : 0.14569
noise(4.91) : 0.15098
noise(4.92) : 0.15586
noise(4.93) : 0.16059
noise(4.94) : 0.16450
noise(4.95) : 0.16817

noise(4.90) : 0.14569 と noise(4.95) : 0.16817 の値に注目して見てください。先ほどの100行にも同じ引数、返り値を持つ値を見つける事が出来ます。このことから、引数に与える数字の増減の値を小さくすれば、より変化の小さい返り値を、引数の増減を大きくすれば、変化の大きな返り値を取得する事が出来るという事です。

今回、列挙した値を出力したProcessingのソースコードです。コンソールの部分に値が表示されます。なお、実行するたびに返り値の値は変わります。

値の利用

ここからはノイズ関数から得られる値をどうやって表現へ変換するかの例をいくつか挙げていきます。Processingでのソースコードも併せて記載しておりますので、ご自身の環境でも動かしながらご確認下さい。

サンプル1 : ノイズ値 to サイズ

次のサンプルはノイズ値を円の半径に利用しています。

中心座標にある円の半径が大きくなったり小さくなったり変化をしています。この動きはノイズ関数から得られた値を元に半径を変化させる事で実現しています。

このコードでノイズ関数から取得した値を変数noiseValueへ書き込んでいます。

更に変数noiseValueへ300をかけた値を変数radiusへ書き込みます。ノイズ関数の返り値は、ポイント1で示したように0.0 ~ 1.0までの間を取りますので、radiusは0.0 ~ 300.0までのいづれかの値となることになります。

また、フレーム毎に半径が変化するのは、変数noiseArgをdraw関数内で0.05づつ増加させ、ノイズ関数からの返り値を変化させているからです。この増加量を変化させると変化の仕方が変わります。

ポイント3で説明したスケールを見た目として実感できると思うので、色々な値に変えて試してみて下さい。(例) 0.01, 0.0, 1.5 etc..

サンプル2 : ノイズ値 to カラー

こちらのサンプルではノイズ関数を使って円の色を変化させています。

色を指定する為に、RGBの値をそれぞれノイズ関数で0.0 ~ 255.0のいづれかの値へ変化させています。サンプル1との違いは変化させる対象の値が3つ(R, G, B)存在するという事です。

その為、引数用の変数の初期化に0ではなく、random関数の返り値を指定しています。これは全て同じ初期値を指定するとR, G, Bの値がすべて同じになってしまうため、色の変化が白と黒になってしまうためです。

このように複数の値を別々に変化させたい場合は、randomを使って初期化する方法があります。

サンプル3 : ノイズ値 to 位置

次のサンプルは位置情報(x, y)にノイズ値を利用しています。

XとYという二つの値を操作するという点は先ほどのサンプルと似ていますが、絵としての見え方はだいぶ変わります。

サンプル4 : ノイズ値 to 文字

0.0から1.0までの数字を取る値が我々の身近にあります。それは百分率です。例えば、”0.1″という少数は”10%”を表しまし、”0.39″は39%を表します。

その特性を使って、百分率を文字として出力するサンプルです。文字として変化を眺めると、絵で見るのとは違う見え方もあるかと思います。

多次元

ここまでの説明は、全て引数が一つのノイズ関数のみを使ってきました。しかし、最初に挙げたリファレンス先にある通り、Processingでは3つまで、openFrameworksでは4つまで指定する事が出来ます。

思ったよりボリュームが増えてしまったため、それらについてはココで説明はしませんが、1つの引数のノイズ関数に慣れてきたら、2つ、3つのパターンも触って行きましょう。引数が増えても0.0 – 1.0までの返り値を返すという動きに変化はありません。

以下に一例として、3つの引数を使ったノイズ関数を使ったサンプルを置いておきます。

以上です。

ご意見や疑問ながどありましたら、自己紹介にあります各種連絡先に下さい。

自己紹介

また、普段の投稿でもノイズ関数は使っておりますので、Noiseのタグで使用例なども結構な数があると思います。(openFrmeworksが多いです)

Junkiyoshi.com noiseタグ

最後まで読んで頂き、ありがとうございました。

[ほしいものリスト]
Amazon

[ Sponsor Link ]

キャリアに役立つ?クリエイティブ・コーディング

先日、Processing Community Day Tokyo というProcessingユーザの交流イベントへ参加してきました。

Processing Community Day Tokyo
https://pcd-tokyo.github.io

普段の実生活ではProcessingやクリエイティブ・コーディングという単語を知っている人も周りには少なく、「ニッチな趣味」として細々とやってきましたが、PCDの会場ではProcessingを知っていて当たり前の空間が広がっており年甲斐もなく、非常に心が躍りワクワクした時間を過ごす事が出来ました。

また、これまでSNSなどで知り合いになった方々などとも実際にお会いしたり、光栄にも「投稿見てます」と声をかけて頂く事もあって、これまで特別な目的があって投稿を続けて来たわけでは無かったのですが、ひとつ報われた気がしました。

さて、そんな素晴らしいイベントで、実は、一点だけ心残りがあります。

WorldCafeという参加者同士のディスカッションの場が設けられ「キャリア形成 進路においてのクリエイティブ・コーディング」という議題に参加したのですが、最終的に「求む、弟子」というキャリアに全然関係ない、良く分からない主張をして終わってしまったのです(悲劇!)

自身ではProcessingやopenFrameworksでやってきた事が、仕事に活きて来た事も多々あると思っておりますので、贖罪の意味も込めて、自分の体験を通じて感じた事柄を列挙していきたいと思います。

1. プログラミング技術習得の為の実験場

C++やOpenCVについては、実は業務上で新しく習得する必要がありました。習得レベル的にはヘビーだったとは思うのですが、業務と併せてクリエイティブ・コーディングとして扱う事で楽しく進める事が出来、習得速度も速かったです。

また、会社で実施されるOJTや研修の知識だけだと、業務で扱う範囲内で完結してしまいがちなのですが、自身の興味や関心を優先するクリエイティブ・コーディングではあえてトリッキーな書き方をしてみたり、使った事のない機能をわざと使ってみるなど、業務ではやらないような挑戦的な事(自分的には)する機会も多かったです。その分、失敗もありましたが、そこから学ぶ事も多く総合的な理解度を深める事が出来たと思います。

「絵を出力する」という事が最終目的なのでコードの書き方などが間違っていたりしても最終的には許される。という寛容さも色々と試す事が出来る環境の一因でした。

更に、SNSに投稿をすることで「いいね!」などのメンションからモチベーションを供給する事によって継続し続けられます。素晴らしい!

2. 可視化

クリエイティブ・コーディングでは「可視化」や「インタラクティブ性」が得意だと思うのですが、その点が業務でもデモアプリや実験的なサンプルを作るのに活躍してくれます。

「百聞は一見に如かず」という言葉もあるように、何かを誰かに伝える際、見せられるもの有る・無しが、事柄が伝わるかどうかに対する大きなウェイトを持っていると考えており、「見せれる・触れる」ものを作るスキル・手段があるという事自体が個人的な強み・武器になっていると思います。

これはクリエイティブ・コーディング単体で強みにはなりづらいが、自分の持つスキルや技術と組み合わせ、それらをアウトプットする事で相乗的な強みに変えられるという事です。

3. 活きるプログラミング

クリエイティブ・コーディング、実は、ここだけの話、単純にやっていて楽しいんです。

色々とソースコードをいじり回しながら、動いた!思わぬ動きを発見した!ネットに投稿してメンションが沢山来た!快感!!など従来のプログラミングの楽しさとは別次元の楽しさがあります。

これまでもプログラミングは好きでしたが、クリエイティブ・コーディングを通じて、更に一段と好きになりました。今はこんな楽しい事をもっと広げて行くべきと、漠然ではありますが考えております。(ゆえにの弟子発言)

個人的には「好きな事を仕事にしよう!」とかあまり好きな考え方ではないですが、仕事で扱っているプログラミングに興味や関心を更に深める事が出来て幸せだと感じますし、きっかけをくれたProcessing, openFrameworks達には感謝をしています。

もっとユーザ増えろ。

おしまい。

[ほしいものリスト]
Amazon

[ Sponsor Link ]

zach liebermanからRetweetして貰ったという自慢

1月6日にアップロードした動画にzach liebermanさんからRetweet/Comment/Likeを頂きました!いやっほーい!

zachさんはopenFrameworksの開発者で、自身もSNSに色々作品を挙げられている人です。日本語だと下記の記事が詳しいでしょうか。

詩的なコード表現の追求:ザック・リーバーマン
http://dentsulab.tokyo/article/?p=674

凄い、嬉しかったので、取り急ぎ、自慢です。

[ほしいものリスト]
Amazon

[ Sponsor Link ]