memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

#つぶやきProcessing が楽しい

今月12日に以下のツイートを発見しました。

一見してコードがわからなかったので、1つ1つばらしてJSについて勉強させていただきました。バックスラッシュ記法?とかRubyの式展開のような記述もできて、この短いコードでこんなに不思議で綺麗な表現ができるんだな。。。って驚きでした。

このツイートについているハッシュタグ「#つぶやきProcessing」が何か調べてみると、はぅ君 @Hau_kun さんが思いつかれた活動?のようでした。面白いですね。。。短いコードなら短時間で書けるし、制約の中で工夫するのはパズルのような面白さがあります。

これまでいくつか書いてみたのでご紹介。

初ツイートがこれですね。以前、enchant.jsの少人数授業をしたときにマリオを作りたいという子がいて、ヒント用に書いたコードがあったので、それを短くしてみました。

コードを短くするテクは上で最初に紹介したものとか、既にたくさんツイートされているのでそれらの作品から勉強させてもらいました。コツとしてはなるべく1文字変数を多用します。メソッドとかに値をセットするときに変数に代入して、同じ値を使うときにその変数で省略しちゃいます。通常はdrawメソッドで最初に画面を全消しするためbackgroundを使いますが、createCanvasを呼ぶことによって全消しする効果があります。最初みたときなんじゃこりゃ?と思いましたがある方のコードから教えてもらいました。


次に作ったのがこれ。配列にオブジェクトを突っ込んでmapメソッドで処理します。これは簡単な方程式で運動を表現したいな。。。という感じでした。


つづいてこれ。YouTubeでコンテンツをロードするときに表示されるアイコンですね。意外とこれ難しいんです。YouTubeのアイコンを画面録画して低速で何度も再生してどうやって作るのか考えました。。。実は、似ているんですが、まだ本物とは違うんですね。。。動きが。ぜひ、挑戦してみてください。


つづいて。これも過去に作ったコードですが、元ネタは別の方が作ったものです。それをつぶやきProcessingにしてみた感じです。MSの採用試験問題ですね。実はこれ脱出成功したことがありません。。。Nintendo DSやenchant.jsで作ったときにはうまくいけたんですが。。。どこか違うのかなぁ?


そして、昨日作ったのがこれですね。最初、ルンバのようなロボットを表現するコードを書きたかったんです。衝突検知して動き回るロボット。で、実際に書いてみると線をトレースする感じになって、これはこれで面白いな。。。と思って、じゃ、文字の枠線に沿って動かしたら面白いかもな。。。と思って作りました。今回は短くするのに本当に苦労しました。その証拠に、本当は「//#つぶやきProcessing」と書かなければならないのですが、// を入れるとオーバーしてしまい、それ以上削る手立てが浮かばず。。。あきらめて削りました。ちょっと反則です。。。


ただ、これも本当は、最初に以下を作ったんですね。。。それからどうしても短くすることができず。。。作品自体を妥協して上記のようになった。。。という感じです。


ちなみにルンバ的なやつは以下になります。


#つぶやきProcessingって、他の作品をみていただければわかるのですが、アート的な作品が中心なんですね。。。この短いコードでよくここまで楽しくて美しい表現ができるものだな。。。とつくずく感心します。

私のはそういうのとは違うので。。。ちょっと邪道な感じもしますが。。。

これからも気が向いたら書いて行きたいな。。。と思います。

*1:x+=cos(a

*2:X=t*cos(b