制作メモ作ったものを見せびらかしたり解説したりします。自作ゲームやクリエイティブコーディングの話が中心です。Qiitaの5日目の記事です。初参加といいますかブログ記事を書くのすら初めてですが何卒。プログラミングでお絵かきをする話をします。一般に「クリエイティブコーディング」「ジェネレーティブアート」などと言われるものですが(※別々の概念です)、この記事でこう呼ぶのはちょっと大仰かもしれませんね。実際のところお絵かきとしか言いようがない。似たようなジェネレーティブな作例ロールシャッハテスト風の化け物なんだかよくわからない物体この記事の趣旨このたび先ほどの画像のようなスケッチを作ってみました。こちらで動くやつが見られます。OpenProcessingどういう原理でこういう絵が描けるんだろう?そう思ってくれた人を対象に、やり方を説明したいと思います。見ただけでなんとなくコードを想像できる人には、あまり有益な情報は無いかもしれません。一応、私が使用した言語はTypeScript(JavaScriptが静的型付けになったやつ)p5.js(アート・デザイン特化言語ProcessingがJavaScriptライブラリになったやつ)ですが、考え方の話をしたかったので、以下ソースコードは一切出てきません。そもそもJavaScriptを初めて触ったのが二ヶ月前なので技術的な話があまりできないのもある。道具立て次の2つを組み合わせます。noise)これはそういう名前の関数です。入力すると0.0~1.0の範囲で値を返すというものです。グラフにすると下の図のように波打つ感じになります。(JavaScriptで表示しているのだがお使いの環境で見えるでしょうか??)(ここに動く図が出るはずなのだがJavaScriptが有効でないようです)入力の値を連続的に変化させると、出力値の方も連続的、かつ一見不規則に変化してくれるので、ジェネレーティブなものを作りたいときに重宝します。)ですが、2変数・3変数にもできるので、CGの雲や炎のエフェクト、3Dゲームの地形の生成など、幅広く応用されているようです。Processingだとnoise()として実装されているので、以下noise()と表記します。他の言語はよくわかりませんが何かしら手段があるでしょう。半透明な線で濃淡を付けるもう一つがこれです。太めのフェルトペンとかで、ペン先が角ばっていて、紙と接触する箇所が線状になってるやつありますよね。あれを紙の上でビーっと動かすと、紙には面的にインクがつきますね。それと同じことをスクリーン上でやるわけですが、その時に色に透明度を持たせます。(ここに動く図が出るはずなのだがJavaScriptが有効でないようです)すると、何度も色を塗られたピクセルはその分色が濃くなっていきます。逆に高速で通過した部分は薄く色がつく。結果、線をなめらかに動かせば、なめらかな濃淡ができます。以上を利用するといろいろ変な絵が描けます。描画方法あとは上記の組み合わせです。画面上に2つの点を解き放って、2点間を半透明の線で結びます。そのうえで、それぞれの点の位置をnoise()でゆるやかに変化させれば、なんというか、その、結果的にああなるわけです。点のx座標をnoise()に入力して得た値を、点のy座標とするというように2ヶ所でnoise()を使いました。2つ目の点はy座標をひっくり返すことで上下に広がるようにしています。掛け算で重ね合わせました。中央部分以外がつぶれすぎな気がしたのでルートをとることで調節しました。noise()を使わず一定の速度にすると、2点のx座標が常にそろっているので、濃淡がなくなってしまいます。グラフそのものになります。あれっ......これはこれで面白いのでは??(作ってから思った)メタリックな感じにも見える。原理は簡単でしたが、大まかな形ができた後の調整のほうがどちらかというと面倒です。......noise()の変化を荒くするか細かくするかで、雰囲気がだいぶ変わるので、係数を与えて調整します。荒いnoise細かいnoiseあと、noise()の出力は全体としては0.5付近をうろうろすることになりますが、もうちょっと偏らせたいなぁとなる場面も多いので、数字をいじったり。2点の距離が離れすぎて微妙な結果になることがあったので、そういうときだけ遅れている方の点をスピードアップさせたり。以上のようにして次の結果が得られた。(クリックで再生成)(ここに動く図が出るはずなのだがJavaScriptが有効でないようです)作ってから思ったけどオーロラっぽいですね。最初からオーロラ描けばよかった。過去に、今回と同じテクニックを用いて、以下のようなものも描いています。Something以上です。できて面白いよというのが伝われば幸いです。Jacob氏)月別アーカイブはてなブログをはじめよう!fal-worksさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。