Processing四方山話
これは、Processing Advent Calendar 2024 に参加しています。ぜひカレンダーの方もお楽しみください。
タイトルからユルくて申し訳ない気持ちでいっぱいですが、四方山に因んで４つくらいトピックを挙げて話します。申し込んだ当初は今年作ったProcessing の作品を振り返ろうと思ってましたが、openprocessingの自分のページを見て、2023年10月23日以降何も作っていないことが発覚したので方針変更となりました。
（細かい話ですが、p5.jsでは一応2024年8月12日付のスケッチが残ってたことは付記します。）
では４つのトピックを紹介します。
小・中学生のProcessing学習をサポート
Processing遍歴
BASICやScratchの話
コードで“なにか”を作ること
こうした内容についてお話ししたいと思います。興味あるところから／ところだけ、読んでもらって大丈夫です。
小・中学生のProcessing学習をサポート
一つ目がいきなり宣伝風味が強くてすみませんが、私が日頃Processingに触れる機会として、最も多いケースとして小・中学生のProcessing学習をサポートすることが挙げられます。
プログラミングスクールTENTO[1]という教室に通う生徒たちが対象です。そのスクールはよくある習い事に存在する、コースやカリキュラムという枠組みはほぼ無く、生徒それぞれが思い思いの取り組みをしているのが特徴で、私たちはそれを昔から寺子屋スタイルとして実践してきました。
Wikipediaの寺子屋のページ[2]には一寸子花里の「文学ばんだいの宝」という浮世絵が参考資料として載っていますがまさにこんな感じです。
習い事として通い出す小学生くらいであれば、Scratch（後述します）やMinecraftであそぶように親しみながら学んでいく具合ですが、小学生も高学年くらいから、また中学生くらいになると、ちょっとそういうのがダサくなってきて文字を打つコーディングに触れたくなったりするようです。
他にも、習い事なので熱心な保護者さんになると「Pythonを覚えさせてやってください。」と言語指定で連れて来られる生徒もいます。
（保護者さんのご希望の場合はいろいろご説明した上で、）そういう頃合の生徒たちにはProcessingをまずお勧めしています。理由は簡単で、グラフィック表現を中心に具体的な操作としてコードを扱えること、原ProcessingであればJavaをベースとして言語体系で、今後様々なプログラミング言語に触れる場合の土台としてよいこと、の２つを理由に推しています。（非常によく言われることですね）
余談ですが「Pythonが…」っておっしゃる方には、昨今Pythonって言われているのは特にAI/機械学習分野や統計などでの活用でのことかと思いますが、10代そこらの生徒が社会に出る頃にPythonを知っていることがどれだけ重要かはわからないということをお伝えするのと、（グラフィックを扱うライブラリも存在しますが）多くは抽象的な操作となるため、初学者には辛いことをお伝えしてご納得いただいています。
Processingでrectやellipseをコードで掴んで動かすことは、非常に具体的ですし、インタラクティブな作品などになれば、プログラミングを始めたばかりの方でも面白くなりますよね。
最後にふと、その教室に通ってくれて何度か授業で一緒になった生徒の中に、TabicodingをやっているLilyさんがいたことを思い出しました。立派に作品作り続けてて尊敬します。でもまぁ日々そんな感じでProcessingを推しています。
Processing遍歴
私がProcessingに初めて触れたのが、確か2000年初頭ごろだったんじゃないかな。その頃大学生で、友人と2人でVJユニットを組んでいました。最初は2人でしたがじわじわと周辺の方も巻き込み最終的に5人くらいになりました。実はその中に @takawo さんもいて、彼が私たちにProcessingを教えてくれたと記憶しています。バージョンも0.9.xとか（もしかしたら0.7.xとか？）1にいってなかったですね。
当時のVJといえばVHSなどのビデオデッキを持ち込んだり、PCを使う場合はMotiondive等のVJアプリを使ったり、そうしたアプリに読み込む素材は.movだっり.aviだったりという具合で（全てが懐かしいのですが、）「VJを始めよう」的な雑誌記事では、ハイスペックなPCと大容量なHDDに素材を詰め込んで云々と、学生には手の届かない環境を推奨していました。
初期の私たち2人のアプローチは最初からずれていて、ゴミ捨て場に落ちていたプロジェクターやパソコンを再利用してたので、そんなハイスペックは到底無理で私の場合パソコンはPC-98を使い、BASIC（こちらも後述します）でライブでコードを書いてVJをしていました。相方さんは絵描きさんだったので、OHPを使ってみたり、スキャンした画像をPCで表示させたりして味がありました。
メンバーが増えてくると交代する際にプロジェクターをNO SIGNALにさせないように、編集機から拝借したビデオミキサーなどを駆使して交代で切り替えながら映像を出していました。その頃私はカメラとモニターを使ったフィードバック表現にハマって、メンバーの出す様々な映像をトリガーにエフェクトをかけまくってた記憶があります。
まぁそんなこんなで、茨城の大学生が地元でのイベントはもちろん、渋谷や六本木のクラブで映像たくさん垂れ流させてもらいましたね。
そのグループでの活動も社会人や進学などで散り散りと疎遠になり自然解散的に人が減り、その後しばらく1人VJもやってた時期があります。その時Processingを思い出しVJアプリ的なものを自作してMIDIコントローラーで制御したりしていました。
そのセッティングで、青山かどこかのバーでVJをする機会があって、主催者のリクエストでラグジュアリーって指定され、ちょうど私がハマって貴和製作所とかで買い集めてたスワロフスキーとかのダイヤモンドみたいな形（ブリリアントカットですね）を作ってみたくなってProcessingで作ったことがありました。多分2008年ごろの話。その頃ようやくProcessingのバージョンも1.0になったらしいです。
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PROCESSING 1.0 (REV 0162) - 24 November 2008
Processing 1.0 has arrived! You can read an overview of changes introduced
in the last few months here: http://processing.org/reference/changes.html
[ known issues ]
+ Sketches that size(w, h, OPENGL) and do not clear the background on each
frame can cause major flickering or problems when the screen clears anyway.
There are several possible solutions:
1. You may need to disable the default 2x smoothing by using
hint(DISABLE_OPENGL_2X_SMOOTH).
2. Update the drivers for your graphics card.
参照[3]：https://raw.githubusercontent.com/processing/processing/master/build/shared/revisions.txt
コロナ禍自宅の整理をしている時にHDD山の中からそのダイヤモンドの形状を表現したコードの救出に成功したのが2021年4月。バージョンが3に上がった今も全く問題なく動いて驚きました。
発掘したコード、現在のバージョンでもそのまま動くとか凄すぎる。#Processing #vj pic.twitter.com/4SpbtFHUMq
— qramo🤑（くらも）🛹📷💻🚘 (@qramo) April 15, 2021
参照[4]：https://twitter.com/qramo/status/1382554749166182402
このコードについて形はそれなりに作れて満足しているのですが、光源の設定や透明感や光り方などもっと詰めたいなと思っています。今はあまり時間もないのでそれはまたいつか。
そしてそのコードはopenprocessingに移植して、少し再構成して私のプロフィール画面のアニメーションに設定してみています。もっと賢くコンパクトに軽く書ける気がするのですがリファクタリングは老後の楽しみに取っておこうかなという感じで放置です。
まあしかしこんなプロフ画面、なんというか昔取った杵柄みたいに古い栄光に縋るタイプなのかもしれません。プロジェクターもパソコンもゴミ捨て場で拾ったように古いものを大切にしています。16年前のコードの再利用。
BASICやScratchの話
ここでは、BASICとScratchというプログラミング言語の話をします。おそらくこの２つは私が人生の中で深く積極的に使っている言語と言って間違い無いと思うからです。
BASICについてのエピソード
BASICは最近あまり聞きませんが、世間的にはVisualBASICなどがまだ使われている印象です。私が使っていたのは中学校のパソコン室にあったQuickBASICと自宅にあったN88-BASICをよく使っていました。
色は８色とか１６色の制限がありましたが、グラフィックも扱うことができゲームやアニメーションを作り、部活の仲間と見せ合って遊んだりしていました。1990年代初期なので、そうやって近くに仲間がいたことはとてもありがたかったですね。インターネットに投稿して反応があるとかそういうことは全く考えられませんでしたから。（そしてまたベーマガなどの雑誌投稿で盛り上がった世代よりはやや後なのですよね）
思い出深い話があって、sinとかcosを知っていろんな座標をぶん回して擬似的な3Dを作るのを得意になってやってた時期があるのですが、ちょうど数学の単元で回転体について習う頃に、カーソルキーで頂点を打って好きな断面を作り、スペースキーを押すと画面上でそれを回転体にする。さらに別のキーを使ってX軸上に回して回転体を観察できるといったプログラムを作ったことがありました。
それを数学の先生に見せたら気に入られて、クラスの人数分フロッピーディスクにコピーして授業中に使ってくれたのです。変な生徒でしたね。
Scratchについてのエピソード
私がScratchを触り始めたのは実はVJをやってた頃で、Scratchがリリースされたのが2007年。2008年にはプログラミングワークショップを企画してガッツリ使い始めました。タイミング的に非常に早かったので、いっときは世間的にScratchワークショップの国内での第一人者とも呼ばれることがありました。
Scratchはコードのコマンドがブロックと呼ばれるパーツで表現されていてマウス操作を基本にコードを組み立てていくのが特徴です。作った作品はオンラインで公開・共有も可能で作品にコメントをつけたりして交流もできる環境が整っています。私たちが部室でやってたことがオンラインでできちゃうわけです。
それがVJとどう繋がるのかというと、私のVJスタイルは現場でコードを書いて調整しながらという感じだったのですね。クラブイベントなんてだいたい徹夜なので、一晩中コードと睨めっこしているわけですよ。それがなかなか辛くて、ビジュアルプログラミングのMax/MSPなども気になっていたのですが、さっぱり馴染まず何かの流れでScratchを知りドラッグ&ドロップの片手でコードが弄れることに感動しました。
Scratchの場合、コーディング環境とCanvasに該当するステージ（プログラムの実行表示エリア）が一体になっていて、VJスクリーンに投影するにはPC単体では難しく、スキャンコンバーターでそのステージのみをクロップしてミキサーやプロジェクターに映像を送っていました。VJ歴はすでに長かったのでそういった機器との組み合わせは朝飯前でしたね。
さらにScratchがVJプレイにとって非常に良かったのは、ドラッグ&ドロップの片手操作に加え、実行中のコードを組み換えると瞬時に実行中の振る舞いも変わるといった俊敏な応答性もあります。構文エラーも原理的に無いので、ずっとコードを動かしながら映像に変化を加えられます。一つ課題があるとすればステージの解像度が480x360と小さめでしたがレトロゲームっぽさもあってそれも良かったかなと思います。
子ども向けにScratchのプログラミングワークショップを始めた頃は、金曜の夜からイベントでVJをして土曜の朝（徹夜明けで）ワークショップの準備をしてそのまま実施なんてこともあったのはここだけの話です。「眠そうだね？」とか「タバコくさい」（自分自身は非喫煙者です）とか声をかけてくれた子供達もいましたね。
そしてここ最近は私はScratchでも #creativecoding をやってみようということで色々な機会に試してみています。
ワークショップとしてもやってみたり、ごく最近だと雑誌「子供の科学」でプログラミングでアートを作ろうという企画を行いました。一部の応募作品はScratchのサイトで共有してくれていますので、良かったらみてみてください。Scratchでは動かすスプライトも自分で手書きで書けるので、それをあえて図形だけにしたりしてなかなか攻めた制約だと自負があります。これにハマった子にはいいのでは？と書籍『たのしいクリエイティブコーディング Processingで学ぶコード×アート入門』（ユ・ジャン、マティアス・ファンク 著、杉本達應 翻訳 ビー・エヌ・エヌ）を賞品にしてみました。
コードで“なにか”を作ること
順番的には最後の話題ですが、ここで、コードで“なにか”を作ることを改めて考えたいと思います。
私は人生の中でも長くコードに触れている方だと思いますが、いわゆるエンジニアやプログラマーではありません。とても接し方はカジュアルです。なので、Processing界隈での #creativecoding といった動きにとても共感を覚えます。
”作品”作りのように意気込んでしまうと「いいものを作らないと」といった気持ちも湧いてきて却ってプレッシャーになることもありますよね。自分の興味関心で”なにか”を気ままに作ることは、この上ない時間だと思います。“なにか”を実現するために調べたり試行錯誤することは大きな学びにもなるでしょう。
そしてこれがもし、物理的であったり大きな物だとどうでしょう。いくつも試すうちに手狭になり継続が難しくなりそうですね。またプログラミングのいいところは、自分が「こうかな？」と思って試したことを即座にコンピュータが返してくれます。（殊にScratchは実行待ちすらなく変化するので素晴らしい。）そうした試みとその振り返りのサイクルが短いので、どんどん進められるでしょう。
また、取り組む方の興味関心で“なにか”を思い描くのも重要です。誰かに与えられた課題よりも圧倒的に学びに繋がるはずです。もちろん始めたばかりで書籍やネット上の資料を参考にほぼ写しているという段階もあるかもしれません。その場合もぜひちょっと色を変えてみる、形を変えてみる、繰り返しの回数を変化させてみるなど、自分なりのアレンジを加えて弄ってみると良いでしょう。こうした試行錯誤を繰り返す活動をティンカリング（Tinkering）といいます。それによって対象をより理解する手助けになるでしょう。
またその“なにか”には正解がないのも良い点の一つです。あなたの中にある正解（心地よさや、なんとなくでもいいと思います）を手探りで見つける経験は普段なかなか得難いことだと思います。プログラミングを学ぶ子供たちの中には「正解を教えて」とか「コード全部見せて」といった与えられた正解にこだわり留まりがちな場面も多くみられます。プログラミングだけでなく、社会の中で何かを作り出すときにお手本や正解はありません。自分の感覚で決めるという経験をしたことがないと、そうした場面にぶつかったとき、どのように振る舞うか悩むことになるでしょう。
個人的な”なにか”を作り続ける方々を尊敬します。
過去のアドベントカレンダーの紹介
うっかりアドベンターのアカウントを二つ作ってしまったことに気づきました。
現在の qramo
Human-Computer Interaction (HCI) Advent Calendar 2024
Processing Advent Calendar 2024(今回の投稿です)
旧 qramo
Scratch Advent Calendar 2015 - 12/25
参考文献
小学生・中学生・高校生向けプログラミング教室・スクール TENTO：https://www.tento-net.com/
寺子屋 - Wikipedia：https://ja.wikipedia.org/wiki/%E5%AF%BA%E5%AD%90%E5%B1%8B
Revisions for Processing 3.x and earlier have been removed. You can find them here.： https://raw.githubusercontent.com/processing/processing/master/build/shared/revisions.txt
@qramo on X 1:41 PM · Apr 15, 2021：https://x.com/qramo/status/1382554749166182402