2019/02/02(土)、Processing Community Day が東京で開催されました。

私もこのお祭りを盛り上げたい！という気持ちで、『24時間 1時間に 1作品アップ』ということをやってみました。

いいこと思いついた！

Processing Community Day は世界各地で開催される Processing ユーザーの交流イベントで、今回が日本での初めての開催でした。

著名な方々のキーノートに魅力的なワークショップ、ユニークな話題が満載のライトニングトークで、丸一日どっぷり Processing に浸かれるイベントです。

この満足保証付き、楽しさ太鼓判！のお祭りに、残念ながら私は参加できませんでした…
でも何かしら関われたらなぁと前日に思いついたのが、Processing 作品を Twitter にアップしてお祭りに華を添えられたら？というものでした。

どうせなら 1時間に 1作品アップして 24時間丸一日続けたら面白いかもな。
過去作は結構な数あるから、それらをチョチョイと変えて作れば楽勝だぜ！

と思ってましたが、甘かったです…。

怒涛の 24 作品紹介

考え甘々の話は後にして、アップした作品をご紹介します。

00時

これは映画「2001年宇宙の旅」の HAL 9000 をモチーフにしたものです。
喋らせるのは厳しいので、text() で台詞を表示しました。
原型のソースはこちら。

01時

みんな大好きランダムウォーク！
文字のフォントは絵と合ってるのかな？ いろいろ選んでるうちにどんどん分からなくなってくる、このあたりのセンスは絶望的に無いという自覚があります。

02時

こちらは Processing を使った画像処理。こういうの好きなんです。
input に Processing Community Day 東京のタイトル絵を使わせていただきました。

03時

夜の東京の街、そんなイメージのアニメーション。
右下にメッセージと日時を付け加えてみました。

04時

文字の位置がもうちょい下でしたね。時間なくて結構焦って作った感あります。
Twitter 上ではとても人気がない。けれど、私はこれが好き。

05時

これはフォントとか文字の明るさとか「もうちょいどうにかなっただろ」感ありありですね。
仕上げが甘い！

06時

これは、この作品の上に文字を書いて、

それにこの効果をかけたものです。

模様的にはお気に入りですが、今見ると色合いをもうちょっとなんとかしたかったです。

07時

これは、 かめ. (@turtar_fms) さんの Processing Advent Calendar 記事を参考にして作ったアニメーションです。
「参考に」というかまんま使わせていただいています。

08時

こちらも Processing Community Day 東京のタイトル絵を Processing で画像処理したもの。

09時

これは Processing でモーフィングさせた 3D アニメーションと文字との組み合わせ。
フォントを変える気がないな私！

10時

イベント開催が 10時台だったので、それに合わせて華やかな入り口ゲートのイメージで。

11時

こちらも かめ. (@turtar_fms) さんの Processing Advent Calendar 記事を元にした別バージョンのアニメーション。
なぜフォントを変えない、私？

12時

YouTube での中継があったので、それに合わせて昔のテレビかオシロスコープ的なイメージで。
私的には会心の作！

原作は静止画を切り替えていくアニメーションでしたが、このように連続で変化していく方が面白いですね。

13時

これも Processing でのモーフィングを使ったもの。
ここらへんから段々ネタ切れになってきて苦しくなってきてます。

14時

こちらも Processing Community Day 東京のタイトル絵を Processing で画像処理したもの。
画像にライフゲームを施したらどうなるか？というやつです。
ライフゲームのロジックを間違って実装しちゃってるんですけども…

15時

文字の動きをどうしようかといろいろ迷って結局円運動、しかも開始/終了点が変という結果に…
時間がないとこういう仕上げの部分が疎かになってしまいます。

16時

こんなキモいもので祭りに華を添えることになるのか？
なんてことも思いつかない状況。とにかく時間に追われて作品作るのに精一杯。

17時

星の形を noise() で変化させたら踊ってるように見えたということで作ったものです。

星の形を作るコードは、今回 Processing Community Day 東京でワークショップの講師をされた レオナ(@reona396)さん のブログを参考にさせていただきました。

元のコードはこちら。

きっちり綺麗にループさせられたら良かったなあ。

18時

元々は p5.js を使ったクリエイティブ・コーディング講座で作ったものです。
色っぽいイメージで作ったんですが、「とても怖い」というご意見もちらほら。

19時

困ったときのチューリング・パターン芸です。
結構なんにでも使えて便利！

20時

最近やった Vector Field のアニメーションを背景にしてみました。
本当は文字からわらわら生えてくるイメージで作りたかったんですが時間無く断念。

21時

これは遺伝的アルゴリズムでシューティングの精度を高めるという実験をしていたものです。

ヒットの度に Processing Community Day の文字を表示させたんですが、よく見るとその文字のフォントが後ろのスコア等を表示している文字にまで反映されちゃってます。
作ってたときは気付かなかった…

22時

ここに来てやっとフォントを変える余裕が出てきました。
このフォントなかなか似合ってるんじゃないでしょうか？

23時

大トリは運営の方にお礼の花束を差し上げる感じで、以前作ったこれを使って作りました。

これ、大元のコードは今回 Processing Community Day 東京でワークショップの講師をされた ritoco(@t_ritoco) さんのコードです。

思ってたより大変だったよ〜

まず、24時間手動でアップしていくのは辛いので、Twitter へのアップは日頃使っているボットを使い、Linux の cron で 1時間おきにアップするようにスケジュールを組みました。

私は 23時を過ぎるとおねむになっちゃうので、それまでに夜間にアップする分の作品を作ってセット。
それ以上の作品のストックは無いので、朝起きたら早速作品作りです。
休憩を挟んだり、Processing Community Day の YouTube 中継を見ながらずっと作り続けて、23時の分まで終わったのが 18時過ぎでした。

過去作の改変とはいえ、1時間に 1作品って思ってたほど簡単じゃなかったです。

作ってるうちに欲が出てしまう、レンダリングに時間がかかるなどいろいろありましたが、一番の原因は自分のコードの可読性の低さ、変更に耐えられない柔軟性の低さでした。
頼むよ、過去の私…。今もか。

それらを身にしみて思い知ったのも、今回の Processing Community Day 東京 での収穫でした。

Processing Community Day 東京 最高！

YouTube でキーノートとライトニングトークを拝見しましたが、どの話もとても興味深くて面白かったです。
自分では持っていなかった視点や考え方、奥の深さを皆さんから感じてすごい刺激を受けました。

Twitter で見知っている方々がワークショップの講師をされていて「すごいなぁ」と思ったり、これまた知り合いの方がそのワークショップを聴講されてて「いいなぁ」と思ったり。

あと、今回 YouTube で拝見した限りですが、とてもスムーズな進行がされていて運営の方々の準備の周到さを感じました。
当日も我々には見えないご苦労がきっとあったでしょうね。

こんな楽しい素晴らしいイベントを開催してくださって、運営の方々、ボランティアの方々、ありがとうございました。

できたら来年も！