要点
Processingというプログラミング言語で遊んでみました。ビジュアルアートを行うためのプログラミング言語で統合開発環境も同梱されていますので、簡単にビジュアルアートを作ることが出来ます。プログラミングを知らない人でも、座標計算で絵を書くことだけに集中できますので、ビジュアルアートの楽しさを味わえます。主に教育目的で面白い言語でした。
はじめに
数学ガールの著者である結城氏がビジュアルアートを作成しているのを見かけました。また同時期に他の方もビジュアルアートをgifのような形式で公開していることに気が付きました。gifと共に投稿されていた描画に必要なコードがとても短く、どんな言語で書かれているのかとても興味を惹かれました。
調べてみるとProcessingという言語を使っているらしく、自分も一度は触っておこうかな、という所から始まり、触ってみて実際にどうだったかを今回は記述していきます。
Processingとは
Processingとは2001年からあるビジュアルアートの作成を簡単に行うための言語で、要は液タブなどのように鉛筆でスケッチの上に絵を書いていくのではなく、スケッチの上の座標を指定してプログラムで絵を書く言語です。
例えば下記のように統合開発環境上にellipse(50, 50, 80, 40);とコードを書き、実行すると楕円を描画することが出来ます。
描画するためのコードの少なさとダウンロードして統合開発環境を開けば即コードを実行できるシンプルさが売りです。プログラミング初学者で躓きやすいポイントとして、プログラミング言語の文法とか以前にプログラミングの環境構築だったりしますので、ビジュアルビジュアルの敷居がとても低くなります。
なおProcessingのシンタックスはJavaとPythonがありますので、経験ある方を選ぶことも出来ます。触った所感では特に差はありませんでした。
作った物とProcessingの感想
置き場
作ったものは下記リポジトリにあげてあります。その中から部分的に抜粋します。
https://github.com/ta08/processing-playground
三角関数系曲線
インボリュート曲線、アステロイド曲線、リサジュー曲線。 それぞれの数式によって時間経過とともにどのような軌跡が描かれるか表しています。このような数式を用いてその軌跡を見る実装や、各変数を弄って図形がどのように変化するかを見る実装は統合開発環境上でも簡単に出来ます。
教育目的などでもとても有用そうです。
衝突判定
円毎のオブジェクトで衝突判定して、衝突した場合は状態を変化させています。別クラスを用意して実装し始めると途端に大変となります。というのも提供されている統合開発環境ではコード編集機能の弱さを感じたためです。
また下記のとおり、言語自体の表現力にもつらみを感じ初めた頃合いでもありました。
We don’t yet support any of the Java 7 and Java 8 language features. Please help us fix this. Advanced users (loosely defined as “people who know that these features exist”) can always make use of Java 7 and 8 features from another IDE. https://github.com/processing/processing/wiki/Supported-Platforms#java-versions
このような場合はダウンロードして直ぐ使える統合開発環境ではなく、IntelliJやVScodeでPluginを導入し開発した方が良いかもしれないです。ただそうなるとProcessingの利点である簡単に実行できるから外れてしまい、「コードを渡して遊びながら学んでもらう」などの教育目的での使用難易度が上がってしまうのかなと思いました。
Processing統合開発環境の雑記
コード補完
デフォルトではコードの補完機能はオフになっているため、設定を変更する必要があります。(デフォルトでオフだなんて！)
gif作成
統合開発環境には.mov形式の動画を生成してくれる機能があります。 gifに関しては見当たらなかったので、imagemagickを利用して作成しました。
コードの再利用
別スケッチブックで作成したクラスや関数は【スケッチ＞ファイルを追加】で現在のスケッチブックで利用可能。ただしファイルがコピーされるため、改修方法は工夫したほうが良さそうです。
おわりに
Processingで実際にビジュアルアートを行いました。ビジュアルアートが出来るまで敷居が低く、簡単に実装をすることも出来るので多くの人に楽しんで貰えると思います。
その反面、ある程度技術力がある人がクラスを用意して凝ったものを作ろうとした場合は、慣れた環境でCanvas系のライブラリ、例えばpixi.jsなどを使ってやったほうがストレスフリーかなとも思いました。pixi.jsの実装方法は下記が参考になりますが、pixi.jsはtickerの概念でフレームを表現している事を留意すれば苦なく読めると思います。 https://pixijs.io/examples/#/graphics/dynamic.js
ProcessingのコミュニティもJavascriptで開発しているp5.jsがあるみたいですし、興味が湧いたら徐々に自由度の高いものに手を出してみると面白いと思います。 https://p5js.org/
とはいえちょっと遊びたいだけなのに、わざわざプロジェクトを作ってやるのは面倒なので、やっぱり気軽に出来るProcessingは偉大です。自作クラスとか使わない実装をすればいいんです！