だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ: 勉強会



Polygon Lounge #2 に行ってきました。
グラフィックスプログラミングの最先端かつ様々な領域のお話を聞くことができ、素晴らしく刺激的なイベントでした。
「面白そう」「やってみたい」「挑戦しよう」という気持ちと共に走るトップランナーの皆様のなんと眩しいことか…私も精進しなくてはと思いました。
いつか登壇者側としてお呼びがかかるように頑張ります。

発表を聞いていて、グラフィックスプログラミングの真髄は様々なツールや概念を理解しうまく組み合わせることにあるのではないか、と思いました。
ソフトとソフトのつなぎ込み、あるいはソフトとハードのつなぎ込み、信号の送受信とそれに合わせた処理、異なる概念にある数値と数値の変換など…
柔軟な発想力と試行錯誤を重ねる情熱、そして豊かな知識がこういった組み合わせの技術力をもたらすのだと感じました。
私もインタラクションエンジニアとして組み合わせの技術力を伸ばしていきたいです。精進します。

DSC_2892

NEORTミートアップ #1 | Peatix
参加しました!

とても豪華なゲストスピーカーの皆様が揃い踏み!
多種多様なジャンルのお話を聞くことができ、勉強になりました&刺激を受けました!
一言で「ビジュアル表現」といっても色んな分野・切り口・視点があるのだと気がつかされました。
NEORTがそういった多様なビジュアル表現の交流の場として今後ますます発展していくことを期待しています!

イベント自体もなごやかに進み、とても良い雰囲気でした。
参加者の皆様、主催の方々の「ビジュアル表現で面白いものを見たい!つくりたい!」という熱気がありました。
第2回が開催されたらぜひその時も参加したいです!(できればゲストスピーカーとして呼ばれたい!精進します!)

現時点でアップロードされているLT資料をまとめてみました :










Processing Community Day Tokyo 2019 に参加しました。
スタッフの皆様、参加者の皆様、ありがとうございました。

私は初心者向けワークショップ枠×2の講師を担当させていただきました。
資料スライドは以下になります。


13時〜17時のぶっ続け2枠は大変でしたが、非常にやりがいがありました。
ご参加いただいた皆様、本当にありがとうございました。
今回のワークショップでは
・プログラミングの基礎となる重要な3要素「順次・反復・分岐」
・複雑な模様を作りたい時はよく観察すると楽に取りかかれること
・三角関数のしくみやProcessingにおける使い方
・「なんか面白い模様描けた……で?」に対するひとつの提案
といった要素をまとめてみました。
参加者の皆様からも好評のお声をいただき、非常にありがたく、そして嬉しく思っています。

Processingを好きな方がこんなに多く集まるイベントというのは初めてだったので、感動しきりでした。一度Processingもくもく会開いたら参加者1名(私)だったということもあり。
KeynoteやLT、各ワークショップについても内容が多岐にわたっており、Processingの深みを感じました。
ワールドカフェというテーマに沿った座談会でも様々な方と意見を交換でき、非常に実りある時間でした。
Processing初心者の方から上級者の方まで幅広い層の方と交流できたというのもオフラインイベントの良いところだと感じました。

ワークショップの都合、LTについては後ろの時間のものしか見ることができず、そこは少し残念に思っているところです。
アップロードされたLT資料など、しっかり読ませていただきます。
それにしても、Processingの日本語資料がこの数日でドンと増えたという事実が本当に嬉しいです。

次もまたProcessingフリークな皆様とどこかでお会いできることを楽しみにしております。
もちろん、Processingのコードの上でもお会いできれば!


先日、 We Are JavaScripters! @5th に参加してきました。
JSにまつわる様々なトピックを聞くことができてとても有意義な勉強会でした。
また、「p5.js について」という題でLTも行いました。
初めて参加する勉強会だったので、まずは自己紹介も兼ねて、
p5.jsやProcessingについてざっくりとLTしました。
以下、発表した内容と補足を書いておきます。

LTの前に以下のようなp5.js作品のデモを動かしました。
p5_demo - OpenProcessing
ポイントとしては、
・p5.jsはJSライブラリである
・デモのように、グラフィックやアニメーション表現をブラウザ上で展開できる
・インタラクティブな表現を取り入れられる(デモではクリックすると図形の動く方向が変わるようにしてあります)
といったところです。

LTで使用したスライドは以下のとおりです(誤字等を修正してあります)。


まず、p5.jsについて語るにはProcessingについて述べなければなりません。
ProcessingはJavaベースの言語および環境であり、
グラフィックやアニメーション表現のためのツールです。
プログラミング初心者が学びやすいように、というコンセプトで開発された経緯を持っています。
また、オープンソースかつ無料で提供されており、技術者からデザイナーまで、世界中の人たちに親しまれています。

Processingに(あるいはp5.jsに)興味を持ったら、 OpenProcessing をのぞいてみてください。
このサイトはいわばProcessing界のPixivで、世界中からProcessing作品が投稿・展示されています。
過去のProcessing作品を見て、参考にすると良いでしょう………が、
実はだいぶ前に投稿された作品は今では見ることができません。つらい。

というのも、先ほど述べたとおり、ProcessingはJavaベースなので、
昔の作品はWebで表示するためにJavaアプレットとして投稿していたのです。
そして、Javaアプレットは今ではお星様になってしまい………
OpenProcessingでもアーカイブ化されており、今ではサムネイル画像とコードしか閲覧することができません。

こういった問題を解決したのがProcessing.jsでした。
Processing.jsはJava版Processingとほぼ同じ文法を採用しながらも、
canvas上にProcessing作品を展開できる優れものでした。
この登場により、OpenProcessingでもJavaアプレットに頼らずに作品を投稿・展示できるようになりました。
しかし、現在では全盛期に比べると開発人員不足に悩まされているようです。

そんなProcessing業界に新進気鋭、現れたのがp5.jsです。
p5.jsはブラウザ上でグラフィックやアニメーションを展開するという点ではProcessing.jsと同様でしたが、
文法がJavaScript寄りになりました。
そのため、今までは変数の宣言時にintやfloat等、型を指定していたのが、varに置き換わることとなりました。
また、追加ライブラリも充実しており、ゲームやインタラクティブ作品等、
様々な表現をより強力にサポートしてくれるようになりました。

このp5.jsには幅広い用途が考えられます。
例えば、(かつてFlashが担っていたような)Webページのアクセントとして使用するのはいかがでしょうか。
グラフィックを描画するとはいえ、コードでできているため、画像では表現できない柔軟性を持っています。
突然、グラフィックの色やサイズの変更したいという気持ちが湧いてきたり、あるいはよそから降ってきたりしてもすぐに対応することができます。
また、Web上でインタラクティブな表現を行うことも可能です。
p5.jsはマウスやキーボードだけでなく、マイクやカメラ、
スマホとも連携した作品をつくることができます。

最近話題のプログラミング教育にも、p5.jsはオススメです。
というのも、Processingという言語自体がプログラミング教育にルーツを持っているため、非常に親和性が高いのです。
エディタさえ用意すれば始められる簡単さと、文法の簡易さを兼ね備えているため、
「プログラミングを学びたい!」と思い立った時にすぐに始められます。
また、今までのプログラミング教育でありがちだった、エディタで1+1の式を書いて、
コンソール上で2と出力するような内容は、初学者のモチベーションを維持するのが極めて困難です。
近年、プログラミングを学びたい!と思っている人の周囲には様々なデジタルコンテンツが溢れており、
「俺も艦これやパズドラやデレステみたいなゲームで一発当てたいぜ」「私もTwitterとかインスタとかLINEみたいなSNSやスマホアプリで一山当てたいわ」みたいなモチベーションでプログラミングを始めたとしても、
最初に出会う教材が1+1=2では続かないのです。
それに対し、p5.jsはアニメーションやインタラクティブ作品など、視覚的に訴えかけるものがすぐに、そして簡単に作成することができます。
コンソール上で数字を眺めるより、さらに情報量の多い成果を初学者にもたらし、それを学習意欲につなげられるのです。
そして、p5.jsはJavaScriptに近い文法で記述できるため、学んだことを実用的に活かしやすいという特徴もあります。
命令ブロックを積んだりピースを並べたりするような、わかりやすいビジュアルのプログラミングツールの使用は、論理的な考え方に触れることはできますが、
実務的なプログラミングはキーボード入力と文字で行われており、ブロックやピースの組み合わせではありません。
将来への備えという意味で、p5.jsのような言語に親しんでおくことはとても重要です。

p5.jsはグラフィック制作に特化していますが、グラフィックを描くために三角関数は必須です。
言いかえれば、三角関数さえ身につければどんな図形も思いのままに描くことができます。
学生時代、三角関数に泣かされたという方も、「絵を描く」という視点とモチベーションで見つめ直せば和解できるはずです。
私も数学の授業、そして三角関数には辛かった記憶しかありませんでしたが、Processingやp5.jsを通して理解を深めることができました。
また、p5.jsは物理シミュレーションを実装し観察することもできます。
公式サイトにも例がいくつかあがっているので、復習するもよし、好奇心を満たすもよし、挑戦してみるのも良いでしょう。

以上、p5.jsをとりまく環境と機能のご紹介でした。
とても面白いツールなので、ぜひ遊んでみてください!
p5.js の公式サイトはこちら!

第十六回 #渋谷java - connpass

上記の勉強会でLTしました。
発表資料は以下のとおりです。


久々にProcessingのJava版について言及しました。
p5.jsやProcessing.jsも面白いですが、Java版もこんな使い方があるよ!というLTでした。

Java界隈でもProcessingはまだ認知度がそこまで高くなさそうなので、
これからも頑張っていかなければ…!と考えているところです。
また、界隈ではJavaそのものというより周辺技術の方が盛り上がっている印象を受けました。
(Processingもそのひとつですね!)

色んな分野の勉強会に参加するとそれだけ様々な気づきが得られて良いですね。
参加者の皆様、お疲れ様でした。ありがとうございました。

↑このページのトップヘ