プログラミングでお絵かきして遊ぶための50のアイディア

プログラミングでお絵かきする試みを続けるうちにスケッチが100個ほど溜まりました。
似たようなことをして遊んでみたい人のために、過去のスケッチを例に出しつつ、アイディアというかネタというか、そういうのを列挙してみます。

これはProcessing Advent Calendar 2018 - Qiitaの6日目の記事です。遅刻！

序

初めて作り、完成したのはライフゲームだったと思います。簡単なプログラミングだけで複雑怪奇な振る舞いをするシステムを作れるという事実に、目の覚めるような驚きを感じつつ、魔法の金槌を手に入れたような気分になりました。
プログラミングさえあれば新鮮な驚きと感動に飢えることなく、人生はずっと面白いままなのだろうという予感を覚えました。

── ポーン（ゲーム制作者）*1

この文章がずっと印象に残っています。
それはたぶん私も似たような原体験を持っているからで、そういう人は他にもけっこういるのではないでしょうか。

...

私はここ一年半ほどProcessingまたはp5.jsを使って、プログラムで動く絵やら何やらといった小品を作って遊ぶというのを続けていました。
www.fal-works.com
OpenProcessingというサイトにも投稿していて、最近では投稿数が100件になりました。
www.openprocessing.org

あまり一つのことを追求していないので、どれもこれも何かのプロトタイプもしくはそれ未満というレベルなのですが、なぜこんなことをやっているのか。

作ること自体が息抜きであるとか、他にゲームの制作もやっているのでその案出しをしたいとか、いろいろ理由はあります。
そしてその一つには、上で引用したような原体験の感覚を忘れずにいたいから、というのもあるかもしれません。

ともあれ、妙に数だけは溜まりました。
そこでこの記事では、似たようなことをして遊んでみたい人のために、自分の作ったやつを例に出しながらあれこれ切り口を紹介してみたいと思います。

動きに着目する（基礎）

[1] ランダムウォークさせてみる

High Speed Random Walk — FAL Works

High Speed Random Walk

何かが完全に無作為に動いている様子は見ていて意外と飽きないものです。
この例では本来の2Dランダムウォークではなくて、動ける角度を45°刻みにしています。

[2] 速度・加速度を付けてみる

Rectangle Microbes — FAL Works

Rectangle Microbes

画面上にいくつか物体を放って、それらが物理法則に従って動くようにします。自然界の物体っぽい動きが作れます。
この例では加速度を不定期に増減させることで、なんとなく意志を持って動いているように見え……見えるのか？……とにかくそういう感じです。

[3] ばねを再現してみる

Simple Physics - OpenProcessing

Simple Physics

物理法則シリーズその２。
フックの法則をてきとうに調べて実装します。
びよんびよんとした動きがけっこう簡単に作れて面白いです。

[4] 引力を適用してみる

Gravitation - OpenProcessing

Gravitation

物理法則シリーズその３。
これはマウスカーソルを重力源としたものです。てきとうに作ったので軌道がカクカクしてるのと、あと画面外に行った粒子が戻ってくるように摩擦っぽいの入れたり、よく覚えてませんが何かインチキしたりしてそうです。
力の強さがちょうどいい感じになるように定数を設定する必要があって、そこがちょっと面倒かもしれません。

[5] 斥力を適用してみる

Organic Network — FAL Works

Organic Network

物理法則シリーズその４。
上記のばねの力に加え、物体が重ならないようにクーロン力みたいなのを実装しています。
遠くにあれば相互にあまり影響せず、近ければ近いほど強く反発する、という挙動を目指します。

[6] イージングさせてみる

Teleporting Dots — FAL Works

Teleporting Dots

速度＆加速度をあたえて後はよろしく、というのとはまったく別のアプローチです。
この例ではピャッと動く感じをイージング関数で実装しました。線の始点と終点でイージングの強さを変えています。

イージングについては以前の記事でも書いています。
www.fal-works.jp
手軽なうえに、位置以外にも角度とか大きさとか何にでも応用できるので重宝します。

[7] 円周上で動かしてみる

Arcs - OpenProcessing

Arcs

そのまんまです。三角関数は友達。

動きに着目する（応用）

[8] 物理シミュレーションを頑張ってみる

The Cloth-Like (3D phys. sim.) - OpenProcessing

The Closs-like

この例では、3D空間にて布のような物体の挙動を作ってみました。
格子状に点を配置して、それらの間にばねの力を適用することで実現しています。

物理っぽい方向でさらに進める余地はいろいろありますが（衝突とか剛体とか）、実装がどんどんめんどくさくなってくるので、既存の物理エンジンライブラリを活用するのもいいと思います。
流体もあるな、流体はまだやったことないです。

[9] 曲線上で動かしてみる

Bezier Fire - OpenProcessing

Bezier Fire

ベジェ曲線に沿って流れるように動かします。
Processingの場合、標準の関数でこういうことは多分できないと思いますので、自分でベジェ曲線のアルゴリズムをググって実装することになりますが、原理はわりとシンプルです。

[10] 軌道を組み合わせて複雑にしてみる

Orbit — FAL Works

Orbit

この作例、ふにゃふにゃした不規則な軌道に見えると思いますが、実は等速円運動しかやっていません。
ある点の周囲を円軌道で回る物体、その周囲を回る物体の、そのまた周囲を……というのを何度か繰り返して、最後のやつだけを画面上に表示することで、結果的にこう見えています。

[11] 軌跡をトレースすることで2点間を補完してみる

Afterimage — FAL Works

Afterimage

さらに毛色の違うアプローチ、詳細は以前の記事をご覧ください。
www.fal-works.jp

[12] 整列させてみる

Mass Game — FAL Works

Mass Game

多数の要素がいっせいにザッと整列したりばらけたりすると楽しい。
たぶんダンスとかの分野で長年の知見があるのではないかと思いますが、どう動いたらもっと楽しいのか、いくらでも研究できそうです。

[13] 初期位置や速度や角度を工夫してみる

Abstract Bullet Hell - OpenProcessing

Abstract Bullet Hell

ようするに弾幕シューティングである。
この例だと弾丸の動きはすべて単純な等速運動なんですが、組み合わせ次第で無数のパターンを生み出すことができます。

こういうのが好きだったのでゲームまで作ってしまいました。
www.fal-works.jp

[14] 動き方のバリエーションを考えてみる

Motion Catalog — FAL Works

Motion Catalog

上では主に「位置」の変化を取り上げてきましたが、他にも、角度、形、色、など動かす対象はいろいろあります。

なおこの例は、見た目に関しては下記のかっこいいPVのパクリです。
www.youtube.com

情報を視覚化する（抽象）

[15] 構造を視覚化してみる

Data Structures — FAL Works

Data Structures

なぜか分かりませんが構造という概念が好きです。
これはデータ構造を視覚化してみたものです。要素間の関係性や、取り出すときのルールなど、構造の種類によっていろいろな特徴があります。

[16] ネットワークを視覚化してみる

Königsberg — FAL Works

Königsberg

任意のネットワークをごちゃごちゃしないようにうまく自動配置するのは結構めんどくさい。というのをやってみると分かりますが、一度やってみると面白いと思います。

この例は、一筆書きができるようなネットワークを生成して（やり方は数学ガールを読んで知りました）、実際に一筆書きしてみせる、というのを繰り返すものです。

工夫としては、要素間を繋ぐ線を曲線にして、その途中に反発力を持つ見えない物体を配置することで、あまり線同士が重ならないようにしています。

[17] プログラムの動きを視覚化してみる

Object Pool — FAL Works

Object Pool

プログラム内部で変数やら何やらがどう動いているか、というのは画面に表示しない限りユーザーには分からないわけですが、その内幕をお見せしてみるのは結構面白いのではないかと思います。

この例は、パーティクルを出したりするときにかなりの頻度でお世話になる、オブジェクトプールというのを視覚化しています。
ゲームとかの内部はこうなっているのだよ……！

情報を視覚化する（具体）

[18] 時計を作ってみる

Clock variations - OpenProcessing

Clock Variations

時計を作ってみましょう。

時・分・秒 という数値情報を表示するだけ……というと簡単に聞こえますが、たとえば奇抜なデザイン時計などを検索してみると、ほんとうにいろいろな表現方法があるのが分かります。
もっと面白い視覚化方法がないか、自分でも考えてみると、情報をいかに表現するかという点で良い練習になる気がします。

[19] ネットワーク構造の情報を視覚化してみる

Kanji Network — FAL Works

Kanji Network

そういえば漢字の部首の組み合わせってネットワークとして視覚化できないかな、と思ってやってみたのがこの例です。
あまりにごちゃごちゃしていて、有用な情報を読み取れるような視覚化には至れませんでした。

データビジュアライゼーションという分野の話になると思いますが、複雑な情報を何か実利的な目的に向けて視覚化するというのは、それなりに知識と技術が要ることなのだろうと思っています。

[20] 音や音階を視覚化してみる

Exotic Melody Generator — FAL Works

Exotic Melody Generator

音の高さと言うのはつまり周波数、視覚化できない道理が無い。
さらに、音階って1オクターブでなんか一巡しますよね。とすると円で表せる。

そこでこの例では、いろいろな音階（メジャースケール、アラビア風、中国風、和風）で使われる音の高さを視覚化して、さらにランダムでメロディーっぽいものを生成するようにしました。
ふつうは耳で受け取るしかない情報が、こうして視覚的な特徴を持って表示されるの、個人的にはとても面白いと思います。

ついでに紹介すると下記はTEDの動画、こちらはリズムを円形に配置して視覚化するというものです。
www.youtube.com

[21] 音楽を視覚化してみる

Music Visualizer — FAL Works

Music Visualizer

前項は単音とその配置の話でしたが、実際の音楽はもっと複雑ですよね。

p5.js（たぶんProcessingも）で、プラグインを使えば波形と音量ヒストグラムの情報が取れるので、それをそのまま表示してみました。描画パフォーマンスはかなり悪いです。

[22] 色を色以外で視覚化してみる

Color Space Projection — FAL Works

Color Space Projection

色は色相彩度明度とかそういうやつで数値化できます。
ということは、それらの情報を色以外の手段で視覚化することで、きれいな配色を作るためのヒントが得られないだろうか……と思って作ったのがこの例です。

実りがあったかというと微妙ですが、まあここで言いたいのは、考え方しだいで視覚化できるものはいろいろありますぜということです。

[23] 文字情報を視覚化してみる

Geometric Cipher 3D - OpenProcessing

Geometric Cipher 3D

この例ではアルファベットをそれぞれ特定の角度（あとついでに色）で配置してみました。
するとどうだ！ 単なる文字情報が立体的な構造物と化したではないか！

ただブラウザ上で綺麗な描画をする方法が分からなかったのでなんかギザギザしてます、ProcessingのJavaモードだともうちょっと綺麗なんだけど。

[24] 言語を視覚化してみる

Die Sprachen — FAL Works

Die Sprachen

自然言語というのは言語によっていろいろ違うのを比べると面白いです。

この例では同じ意味の文章を英・仏・独で並べ、文章中の意味的に対応している部分を（あんまり厳密ではないんですが）線で繋ぐことで、語順などの違いを視覚化しています。

絵を描く（かたち編）

[25] 図形を筆として使ってみる

Screensaver - FAL Works

Screensaver

筆って言って伝わるでしょうか……なんかペイントソフトとかで鉛筆やら毛筆やら選んで塗り塗りできると思いますが、そういうやつのイメージです。

この例では直線や四角形などの図形を回転・拡大縮小しつつ動かしているだけですが、それでもこんなふうに独特な空間を作ることができます。

[26] 筆の穂先を再現してみる

Bad Copy of Arabesque — FAL Works

Bad Copy of Arabesque

筆が紙とどんなふうに接触するか、どんなふうにインクがついていくか、みたいなことを考えていくと、それをスクリーン上に再現できるかもしれません。

この例ではアラビア書道みたいなことをやってみたかった。普通に毛筆とか、もっと複雑なブラシとか、いろいろ試していく価値はありそうです。

[27] いろいろな図形を作ってみる

Motion Graphics - OpenProcessing

Motion Graphics

単純な図形の組み合わせで、無数の図形を作れるようになります。

[28] とことんシンプルにしてみる

Untitled — FAL Works

Untitled

できるだけ少ない要素でいかに面白い絵を作るか？
そういう方向のチャレンジがあっても良いのではないでしょうか。

絵を描く（ディテール編）

[29] パーリンノイズを活用してみる

Generative Something — FAL Works

Generative Something

Processingのパーリンノイズは本当のパーリンノイズではないらしいという話がありますが、さておき。
これを使うことでぐにゃぐにゃしたものを簡単に生成することができます。

以前の記事でもこれを解説しています。
www.fal-works.jp

[30] 透明な図形を重ねてみる

Rectangle Petals — FAL Works

Rectangle Petals

「ゲームボーイカラーの色にクリアパープルを選んだ人はオタクになる」という説がありますが私はパープルじゃないほうのクリアでしたからセーフ、それはともかく透明なものは綺麗だしかっこいい。いいね？

[31] 配色を追求してみる

Color Combination Generator — FAL Works

Color Combination Generator

綺麗な配色にはなにか法則性があるのだろうか？
その疑問に答えるべく配色理論というものがいくつか考え出されていますが、実際やってみるとそうそううまくいかないような気がします。それだけに奥が深い。

この例ではよくある配色理論に基づいて色の組み合わせを自動生成・提案するということをしています。

配色の話は以前の記事でも書きました。
www.fal-works.jp

[32] 色の合成のしかたを変えてみる

CMYK — FAL Works

CMYK

加算合成（加法混色）をはじめ、いくつかの合成方法があり、それぞれ特徴や向き不向きがあります。
この例では減法混色を使っています。

下記の記事など、いろいろあるんだなー！ というのがひと目で分かって参考になると思います。
infosmith.biz

[33] 影を付けてみる

Colored Shadow 2 — FAL Works

Colored Shadow 2

メインの図形の位置を少しずらしてフィルタでぼかすことで、影をつくることができます。

この例では影自体にも色を持たせ、かつ上に乗る図形を半透明にすることで、なんかプラスチックみたいな物体ができあがりました。
かなり気に入っています。

絵を描く（現実の題材編）

[34] 花火を作ってみる

Fireworks - OpenProcessing

Fireworks

定番ですな。
とはいえ人によってこだわりポイントは違うはずで、例えば私はチカチカ点滅して消えるあたりとかを意識的にやりました。

[35] 電流を描いてみる

Elektro — FAL Works

Elektro

ジグザグ線を重ねるのと、あと消えるときに青が残るようにすることで、電流っぽさを出してみました。

[36] 魔法陣を描いてみる

Magic Circle - OpenProcessing

Magic Circle

円と三角を重ねて怪しげな文字を円形に並べると魔法陣ができる！
（すみません、怪しげじゃない、ふつうのギリシャ文字です）

文字で遊ぶ

[37] 文字を動かしてみる

Kinetic Typography - OpenProcessing

Kinetic Typography

文字が動くとなんだか楽しいという現象があります。

[38] 文字のようなものを生成してみる

Meaningless — FAL Works

Meaningless

ほんとは意味はないんだけど、でもなんか未知の言語の文字っぽく見える、そういうものを生成してみると、一種独特の趣があります。

Asemic Writing で検索してみると良いでしょう。

[39] 文字を独自の方法で表示してみる

Network Letters — FAL Works

Network Letters

標準の方法でそのまま表示するのではなく、なにかひと手間かけてみるという手があります。

この例では、文字を打ち込むと点と線によるネットワークが現れて、打った文字の形になるように変化します。

数学や情報科学からネタを拝借する

[40] ライフゲームを作ってみる

Rectangle Lives — FAL Works

Rectangle Lives

定番、ライフゲーム！

ライフゲームはなかなか面白いのでこちらの記事で語りました。
note.mu

[41] ストレンジアトラクターを作ってみる（離散）

De Jong Attractor — FAL Works

De Jong Attractor

単純な数式に従って描画するだけで驚くべき複雑さが立ち現れる、ストレンジアトラクター。
この例では De Jong Attractor というのを描画しています。

個人的に @ozachou_g さんの作品（および下記の記事）は必見だと思います。
http://how-to-build-du-j.tumblr.com/

[42] ストレンジアトラクターを作ってみる（連続）

Colorful Dots in Lorentz Attractor - OpenProcessing

Colorful Dots in Lorentz Attractor

ストレンジアトラクターは、座標変化が連続的じゃないタイプ（これの一つ上のやつ）と、連続的なタイプとがあるようです。
この例は後者で、Lorentz Attractor というものです。

ただProcessingのJavaモードで作ったので、ブラウザ上だとめちゃくちゃ処理が重いと思われる。

[43] L-systemを作ってみる

Dragon Curve - OpenProcessing

Dragon Curve

L-systemというのは、植物の成長をシミュレートしたり複雑なフラクタル図形とかを作ったりできるアルゴリズムです。
コッホ曲線とかシェルピンスキーの三角形とか、たぶん図を見れば、どこかで見たことある！ ってなるんじゃないかと思います。

この例ではそのうちの一つ、ドラゴン曲線と言うのを作っています。
内容の詳細を解説する紙面がありませんが、単純な規則をあたえてほっとくだけでズモモモモ……と複雑な形に成長するのはなかなか面白いです。

[44] ニューラルネットワークを作ってみる

Something Like Neural Network — FAL Works

Something like Neural Network

ニューラルネットワークとは何か？ この例の実装は本当に正しいのか？
正直自信がありませんが、それでもなんとなくAIっぽい挙動をするものが作れました。
詳しくは自分で調べてくれッ！

未分類

[45] 写真を使ってみる

Half-Transparent - OpenProcessing

Half-Transparent

写真は強力な画像素材、この例ではあまりうまく料理できなかった気がしますが、活用方法を考えてみる価値はある気がします。

写真自体を加工するのも良さそうですね。例えば @deconbatch さんのこちらの作例など。
Paris Street; Rainy Day｜deconbatch｜note

[46] リズムを自動生成してみる

Rhythm Generator — FAL Works

Rhythm Generator

この例では、どの楽器をどのタイミングで鳴らすか、完全にランダムに生成しています。（スネアみたいなやつは例外）
聞くところによると自動生成音楽というのは昔から研究されているようで、私は今のところ作曲はさっぱりなのですが、機会と余裕があれば勉強してみたいものです。

ミニゲームを作る

[47] ボードゲームを作ってみる

Chess-like Game Generator — FAL Works

Chess-like Game Generator

ここまでくるとお絵描きという段階ではなくなってきましたが、せっかくなのでゲームを作るのも良いでしょう。トランプや囲碁将棋チェスオセロなど、定番ではありますが自分で作ってみると意外と面白いかもしれません。

私のこの例では、駒の動き方のルールが毎回新たに生成される、チェスの亜種のようなゲームを作りました。それぞれの駒の模様が、動ける方向と範囲の視覚化になっています。

[48] シューティングゲームを作ってみる

Collapsing Ideas — FAL Works

Collapsing Ideas

シューティングは、基本的な仕組みだけならとても簡単に作れるので、何か動きのあるゲームを作ってみたい人が最初に作るジャンルとしてお勧めだと思います。

この例は、攻撃方法を多様にしたいとか敵味方を平等にしたいとかローグライクっぽくしたいとか、変にこだわろうとして失敗気味。

[49] 対戦ゲームを作ってみる

Duel — FAL Works

Duel

この例はOpenProcessingで一番人気だったやつです。
動きのあるゲームを作るときは、画面を揺らしたりパーティクルを散らしたりすればとりあえずはそれっぽくなるという知見を得ました。
ネットワーク対戦とかじゃなくて相手はただのシンプルなAIですが、そのAIをどう作るのかも考えどころです。

[50] アクションゲームを作ってみる

Platform Game Prototype — FAL Works

Platform Game Prototype

マリオ的なやつですね。
作ってみて分かりましたがシューティングに比べて衝突判定と衝突後の挙動を作るのがけっこう難しい。地面や壁との接触でツルツル滑ったり引っかかったりします、この例ではどうにか抑え込めましたが、たしかあんまり綺麗な解決ではなかった気がする。

あと敵（？）の動き方のパターンを複数用意しましたが、もちもちしてるのも相まって、なんだか生きてるような感じになり、そこは面白いなと思いました。

終わりに

手当たり次第に並べてしまいましたが、プログラミングで遊ぶときに手を付ける題材として、これらはまだまだほんの一部だと思います。

プログラミングを始めた経緯や目的は人それぞれでしょうが、何かしら面白いと思っていただける部分があったり、自分なりの楽しみ方を見つけてもらえたりしたら嬉しいです。

...

あとせっかくなのでついでに、私が最近作ったゲームのほうも覗いてってくだされ！（ダイマ）

公式ページ： Solid Aether — FAL Works

www.youtube.com

そしてこちらはツイッタァァです。
twitter.com

*1:「フリーゲーム あの人に聞きたい ! - 第9回 ポーン さん」より。ポーンさんというのはステッパーズ・ストップというサイトを主宰し、数々のフリーゲームやアナログゲームなどを作ってきた人です。