先日、 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 の公式サイトはこちら!
JSにまつわる様々なトピックを聞くことができてとても有意義な勉強会でした。
また、「p5.js について」という題でLTも行いました。
初めて参加する勉強会だったので、まずは自己紹介も兼ねて、
p5.jsやProcessingについてざっくりとLTしました。
以下、発表した内容と補足を書いておきます。
LTの前に以下のようなp5.js作品のデモを動かしました。
p5_demo - OpenProcessing
ポイントとしては、
・p5.jsはJSライブラリである
・デモのように、グラフィックやアニメーション表現をブラウザ上で展開できる
・インタラクティブな表現を取り入れられる(デモではクリックすると図形の動く方向が変わるようにしてあります)
といったところです。
LTで使用したスライドは以下のとおりです(誤字等を修正してあります)。
p5.js について from reona396
まず、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 の公式サイトはこちら!
コメント
このブログにコメントするにはログインが必要です。
さんログアウト
この記事には許可ユーザしかコメントができません。