制作メモ作ったものを見せびらかしたり解説したりします。自作ゲームやクリエイティブコーディングの話が中心です。https://twitter.com/falworks_ja2018-12-07プログラミングでお絵かきして遊ぶための50のアイディアプログラミングでお絵かきする試みを続けるうちにスケッチが100個ほど溜まりました。似たようなことをして遊んでみたい人のために、過去のスケッチを例に出しつつ、アイディアというかネタというか、そういうのを列挙してみます。Qiitaの6日目の記事です。作り、完成したのはライフゲームだったと思います。簡単なプログラミングだけで複雑怪奇な振る舞いをするシステムを作れるという事実に、目の覚めるような驚きを感じつつ、魔法の金槌を手に入れたような気分になりました。プログラミングさえあれば新鮮な驚きと感動に飢えることなく、人生はずっと面白いままなのだろうという予感を覚えました。ポーン(ゲーム制作者)*1この文章がずっと印象に残っています。それはたぶん私も似たような原体験を持っているからで、そういう人は他にもけっこういるのではないでしょうか。...私はここ一年半ほどProcessingまたはp5.jsを使って、プログラムで動く絵やら何やらといった小品を作って遊ぶというのを続けていました。www.fal-works.comOpenProcessingというサイトにも投稿していて、最近では投稿数が100件になりました。www.openprocessing.orgあまり一つのことを追求していないので、どれもこれも何かのプロトタイプもしくはそれ未満というレベルなのですが、なぜこんなことをやっているのか。作ること自体が息抜きであるとか、他にゲームの制作もやっているのでその案出しをしたいとか、いろいろ理由はあります。その一つには、上で引用したような原体験の感覚を忘れずにいたいから、というのもあるかもしれません。妙に数だけは溜まりました。そこでこの記事では、似たようなことをして遊んでみたい人のために、自分の作ったやつを例に出しながらあれこれ切り口を紹介してみたいと思います。Walk何かが完全に無作為に動いている様子は見ていて意外と飽きないものです。この例では本来の2Dランダムウォークではなくて、動ける角度を45°刻みにしています。Microbes画面上にいくつか物体を放って、それらが物理法則に従って動くようにします。自然界の物体っぽい動きが作れます。この例では加速度を不定期に増減させることで、なんとなく意志を持って動いているように見え......見えるのか?......とにかくそういう感じです。Physics物理法則シリーズその2。フックの法則をてきとうに調べて実装します。よんびよんとした動きがけっこう簡単に作れて面白いです。OpenProcessingGravitation物理法則シリーズその3。これはマウスカーソルを重力源としたものです。てきとうに作ったので軌道がカクカクしてるのと、あと画面外に行った粒子が戻ってくるように摩擦っぽいの入れたり、よく覚えてませんが何かインチキしたりしてそうです。力の強さがちょうどいい感じになるように定数を設定する必要があって、そこがちょっと面倒かもしれません。Network物理法則シリーズその4。上記のばねの力に加え、物体が重ならないようにクーロン力みたいなのを実装しています。遠くにあれば相互にあまり影響せず、近ければ近いほど強く反発する、という挙動を目指します。Dots速度&加速度をあたえて後はよろしく、というのとはまったく別のアプローチです。この例ではピャッと動く感じをイージング関数で実装しました。線の始点と終点でイージングの強さを変えています。イージングについては以前の記事でも書いています。www.fal-works.jp手軽なうえに、位置以外にも角度とか大きさとか何にでも応用できるので重宝します。OpenProcessingArcsそのまんまです。Closs-likeこの例では、3D空間にて布のような物体の挙動を作ってみました。格子状に点を配置して、それらの間にばねの力を適用することで実現しています。物理っぽい方向でさらに進める余地はいろいろありますが(衝突とか剛体とか)、実装がどんどんめんどくさくなってくるので、既存の物理エンジンライブラリを活用するのもいいと思います。流体もあるな、流体はまだやったことないです。Fireベジェ曲線に沿って流れるように動かします。Processingの場合、標準の関数でこういうことは多分できないと思いますので、自分でベジェ曲線のアルゴリズムをググって実装することになりますが、原理はわりとシンプルです。WorksOrbitこの作例、ふにゃふにゃした不規則な軌道に見えると思いますが、実は等速円運動しかやっていません。ある点の周囲を円軌道で回る物体、その周囲を回る物体の、そのまた周囲を......というのを何度か繰り返して、最後のやつだけを画面上に表示することで、結果的にこう見えています。WorksAfterimageさらに毛色の違うアプローチ、詳細は以前の記事をご覧ください。Game多数の要素がいっせいにザッと整列したりばらけたりすると楽しい。ダンスとかの分野で長年の知見があるのではないかと思いますが、どう動いたらもっと楽しいのか、いくらでも研究できそうです。Hellようするに弾幕シューティングである。この例だと弾丸の動きはすべて単純な等速運動なんですが、組み合わせ次第で無数のパターンを生み出すことができます。いうのが好きだったのでゲームまで作ってしまいました。Catalog上では主に「位置」の変化を取り上げてきましたが、他にも、角度、形、色、など動かす対象はいろいろあります。この例は、見た目に関しては下記のかっこいいPVのパクリです。Structuresなぜか分かりませんが構造という概念が好きです。これはデータ構造を視覚化してみたものです。要素間の関係性や、取り出すときのルールなど、構造の種類によっていろいろな特徴があります。WorksKönigsberg任意のネットワークをごちゃごちゃしないようにうまく自動配置するのは結構めんどくさい。いうのをやってみると分かりますが、一度やってみると面白いと思います。この例は、一筆書きができるようなネットワークを生成して(やり方は数学ガールを読んで知りました)、実際に一筆書きしてみせる、というのを繰り返すものです。工夫としては、要素間を繋ぐ線を曲線にして、その途中に反発力を持つ見えない物体を配置することで、あまり線同士が重ならないようにしています。Poolプログラム内部で変数やら何やらがどう動いているか、というのは画面に表示しない限りユーザーには分からないわけですが、その内幕をお見せしてみるのは結構面白いのではないかと思います。この例は、パーティクルを出したりするときにかなりの頻度でお世話になる、オブジェクトプールというのを視覚化しています。Variations時計を作ってみましょう。いう数値情報を表示するだけ......というと簡単に聞こえますが、たとえば奇抜なデザイン時計などを検索してみると、ほんとうにいろいろな表現方法があるのが分かります。面白い視覚化方法がないか、自分でも考えてみると、情報をいかに表現するかという点で良い練習になる気がします。Networkそういえば漢字の部首の組み合わせってネットワークとして視覚化できないかな、と思ってやってみたのがこの例です。あまりにごちゃごちゃしていて、有用な情報を読み取れるような視覚化には至れませんでした。データビジュアライゼーションという分野の話になると思いますが、複雑な情報を何か実利的な目的に向けて視覚化するというのは、それなりに知識と技術が要ることなのだろうと思っています。Generator音の高さと言うのはつまり周波数、視覚化できない道理が無い。音階って1オクターブでなんか一巡しますよね。そこでこの例では、いろいろな音階(メジャースケール、アラビア風、中国風、和風)で使われる音の高さを視覚化して、さらにランダムでメロディーっぽいものを生成するようにしました。ふつうは耳で受け取るしかない情報が、こうして視覚的な特徴を持って表示されるの、個人的にはとても面白いと思います。ついでに紹介すると下記はTEDの動画、こちらはリズムを円形に配置して視覚化するというものです。Visualizer前項は単音とその配置の話でしたが、実際の音楽はもっと複雑ですよね。p5.js(たぶんProcessingも)で、プラグインを使えば波形と音量ヒストグラムの情報が取れるので、それをそのまま表示してみました。描画パフォーマンスはかなり悪いです。Projection色は色相彩度明度とかそういうやつで数値化できます。いうことは、それらの情報を色以外の手段で視覚化することで、きれいな配色を作るためのヒントが得られないだろうか......と思って作ったのがこの例です。実りがあったかというと微妙ですが、まあここで言いたいのは、考え方しだいで視覚化できるものはいろいろありますぜということです。3Dこの例ではアルファベットをそれぞれ特定の角度(あとついでに色)で配置してみました。単なる文字情報が立体的な構造物と化したではないか!ただブラウザ上で綺麗な描画をする方法が分からなかったのでなんかギザギザしてます、ProcessingのJavaモードだともうちょっと綺麗なんだけど。Sprachen自然言語というのは言語によっていろいろ違うのを比べると面白いです。この例では同じ意味の文章を英・仏・独で並べ、文章中の意味的に対応している部分を(あんまり厳密ではないんですが)線で繋ぐことで、語順などの違いを視覚化しています。WorksScreensaver筆って言って伝わるでしょうか......なんかペイントソフトとかで鉛筆やら毛筆やら選んで塗り塗りできると思いますが、そういうやつのイメージです。この例では直線や四角形などの図形を回転・拡大縮小しつつ動かしているだけですが、それでもこんなふうに独特な空間を作ることができます。Arabesque筆が紙とどんなふうに接触するか、どんなふうにインクがついていくか、みたいなことを考えていくと、それをスクリーン上に再現できるかもしれません。この例ではアラビア書道みたいなことをやってみたかった。普通に毛筆とか、もっと複雑なブラシとか、いろいろ試していく価値はありそうです。Graphics単純な図形の組み合わせで、無数の図形を作れるようになります。WorksUntitledできるだけ少ない要素でいかに面白い絵を作るか?そういう方向のチャレンジがあっても良いのではないでしょうか。SomethingProcessingのパーリンノイズは本当のパーリンノイズではないらしいという話がありますが、さておき。これを使うことでぐにゃぐにゃしたものを簡単に生成することができます。以前の記事でもこれを解説しています。Petals「ゲームボーイカラーの色にクリアパープルを選んだ人はオタクになる」という説がありますが私はパープルじゃないほうのクリアでしたからセーフ、それはともかく透明なものは綺麗だしかっこいい。Generator綺麗な配色にはなにか法則性があるのだろうか?その疑問に答えるべく配色理論というものがいくつか考え出されていますが、実際やってみるとそうそううまくいかないような気がします。この例ではよくある配色理論に基づいて色の組み合わせを自動生成・提案するということをしています。配色の話は以前の記事でも書きました。WorksCMYK加算合成(加法混色)をはじめ、いくつかの合成方法があり、それぞれ特徴や向き不向きがあります。この例では減法混色を使っています。いうのがひと目で分かって参考になると思います。2メインの図形の位置を少しずらしてフィルタでぼかすことで、影をつくることができます。この例では影自体にも色を持たせ、かつ上に乗る図形を半透明にすることで、なんかプラスチックみたいな物体ができあがりました。OpenProcessingFireworks定番ですな。いえ人によってこだわりポイントは違うはずで、例えば私はチカチカ点滅して消えるあたりとかを意識的にやりました。WorksElektroジグザグ線を重ねるのと、あと消えるときに青が残るようにすることで、電流っぽさを出してみました。Typography文字が動くとなんだか楽しいという現象があります。WorksMeaninglessほんとは意味はないんだけど、でもなんか未知の言語の文字っぽく見える、そういうものを生成してみると、一種独特の趣があります。検索してみると良いでしょう。Letters標準の方法でそのまま表示するのではなく、なにかひと手間かけてみるという手があります。この例では、文字を打ち込むと点と線によるネットワークが現れて、打った文字の形になるように変化します。Lives定番、ライフゲーム!ライフゲームはなかなか面白いのでこちらの記事で語りました。Attractor単純な数式に従って描画するだけで驚くべき複雑さが立ち現れる、ストレンジアトラクター。いうのを描画しています。さんの作品(および下記の記事)は必見だと思います。Attractorストレンジアトラクターは、座標変化が連続的じゃないタイプ(これの一つ上のやつ)と、連続的なタイプとがあるようです。ProcessingのJavaモードで作ったので、ブラウザ上だとめちゃくちゃ処理が重いと思われる。CurveL-systemというのは、植物の成長をシミュレートしたり複雑なフラクタル図形とかを作ったりできるアルゴリズムです。なるんじゃないかと思います。この例ではそのうちの一つ、ドラゴン曲線と言うのを作っています。内容の詳細を解説する紙面がありませんが、単純な規則をあたえてほっとくだけでズモモモモ......と複雑な形に成長するのはなかなか面白いです。この例の実装は本当に正しいのか?正直自信がありませんが、それでもなんとなくAIっぽい挙動をするものが作れました。OpenProcessingHalf-Transparent写真は強力な画像素材、この例ではあまりうまく料理できなかった気がしますが、活用方法を考えてみる価値はある気がします。写真自体を加工するのも良さそうですね。さんのこちらの作例など。Generatorこの例では、どの楽器をどのタイミングで鳴らすか、完全にランダムに生成しています。(スネアみたいなやつは例外)聞くところによると自動生成音楽というのは昔から研究されているようで、私は今のところ作曲はさっぱりなのですが、機会と余裕があれば勉強してみたいものです。Generatorここまでくるとお絵描きという段階ではなくなってきましたが、せっかくなのでゲームを作るのも良いでしょう。トランプや囲碁将棋チェスオセロなど、定番ではありますが自分で作ってみると意外と面白いかもしれません。私のこの例では、駒の動き方のルールが毎回新たに生成される、チェスの亜種のようなゲームを作りました。それぞれの駒の模様が、動ける方向と範囲の視覚化になっています。Ideasシューティングは、基本的な仕組みだけならとても簡単に作れるので、何か動きのあるゲームを作ってみたい人が最初に作るジャンルとしてお勧めだと思います。この例は、攻撃方法を多様にしたいとか敵味方を平等にしたいとかローグライクっぽくしたいとか、変にこだわろうとして失敗気味。WorksDuelこの例はOpenProcessingで一番人気だったやつです。動きのあるゲームを作るときは、画面を揺らしたりパーティクルを散らしたりすればとりあえずはそれっぽくなるという知見を得ました。ネットワーク対戦とかじゃなくて相手はただのシンプルなAIですが、そのAIをどう作るのかも考えどころです。Prototypeマリオ的なやつですね。作ってみて分かりましたがシューティングに比べて衝突判定と衝突後の挙動を作るのがけっこう難しい。地面や壁との接触でツルツル滑ったり引っかかったりします、この例ではどうにか抑え込めましたが、たしかあんまり綺麗な解決ではなかった気がする。あと敵(?)の動き方のパターンを複数用意しましたが、もちもちしてるのも相まって、なんだか生きてるような感じになり、そこは面白いなと思いました。終わりに手当たり次第に並べてしまいましたが、プログラミングで遊ぶときに手を付ける題材として、これらはまだまだほんの一部だと思います。プログラミングを始めた経緯や目的は人それぞれでしょうが、何かしら面白いと思っていただける部分があったり、自分なりの楽しみ方を見つけてもらえたりしたら嬉しいです。Workswww.youtube.comそしてこちらはツイッタァァです。ポーンさんというのはステッパーズ・ストップというサイトを主宰し、数々のフリーゲームやアナログゲームなどを作ってきた人です。Jacob氏)ジェネレーティブアートに使えそうなテクニック的な話です。Éti...2017-12-20プログラムで綺麗な配色を作る方法(CIELAB色空間の巻)RGBやらHSBやらCIELABやらの話です。Jacob氏)月別アーカイブはてなブログをはじめよう!fal-worksさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。