p5.jsの紹介

8/3G's Nite発表資料 作成:@9ryu


このページの内容

  1. p5.jsを半年学ぶと?
  2. p5.jsはwebページの表現の幅を広げる
  3. 後半について(p5.jsの可能性の考察)
  4. 後半1:recursive tree(再帰関数で描く木)
  5. 後半2:webで使用されているコンテンツの利用
  6. 後半3:データ通信技術の利用
  7. 余談1:p5.jsを学ぶなら
  8. 余談2:先日見た花火をp5で表現
  9. おまけ:このサイトのURL

p5.jsを半年学ぶと?

  • p5.jsは「インタラクティブ」な「グラフィックス」作品が容易に作れる。
  • はじめてプログラミングを学ぶ学生で優秀な方は、一期の授業でこのくらいのレベルに達する。
  • 一般のwebプログラマー(デザインセンスのある)が無理なく到達できるレベルはこれくらい?
  • 難しすぎると流行らない。そこそこの難易度で、既存のwebの価値を高められるようなことができそう?



p5.jsはwebページの表現の幅を広げる

  • コードの実行例のある解説サイトを簡単に作れる。
  • ビデオの埋め込みと違って、インタラクティブなものを、webページに載せられる。
  • キラーコンテンツ(ピカチュウとか楽天パンダ)とかがあれば、クマさんをそれに変えるだけで、人目を引けそう。



後半について(p5.jsの可能性の考察)

  • p5.jsの可能性について考察してみたいと思います。
  • 発表者の目線による主観的な考察です。
  • 個々人の立場や技術、目指すものに応じてp5.jsの評価は異なるので、参考になれば幸いです。



後半1:recursive tree(再帰関数で描く木)

ドラッグで木がしなる。しならせると背景の色が変っていく。

  • p5.jsは処理能力の限界を意識する必要がありそう。(この例は、スマホやタブレットだと動きもしない)
  • ブラウザで動くアート・アニメーション・3D系の言語に共通する注意点かもしれない。

発表者はこの木を沢山書いて、風景画にしたかった。



後半2:webで使用されているコンテンツの利用

  • とりあえず、画像を使ってみる。
  • ただの画像に対して、jqueryではできない(やる気にならない)ような見せ方をしてみる。
  • 空の画像を動かしてみる。link(これだけで写真から受ける印象がだいぶ違う)。
  • 拡大、縮小、移動を可能にする。link
  • 何の変哲もない空の画像でも、自由に拡大・縮小ができると、ちょっと面白い。
  • webで使用されているコンテンツ(主に画像?)に対して、p5.jsを使って新しい見せ方をすると、いいかも!?
  • こういう表現は、処理能力の問題が少なそうだ。



後半3:データ通信技術の利用

  • 天気予報の情報を取得して、日本地図の上に乗っける。
  • やり方は簡単(setupで、ajaxメソッド等でデータを取得するだけ)。
  • データ取得元はopenweathermap

拡大、縮小、移動が自由にできる地図が作れそう。(aで拡大、sで縮小、dで移動モードへ)。別画面へのlink

  • p5.jsはJSのライブラリなので、ajaxができる。
  • p5.jsを利用した実利的な方向がこれかもしれない。(ちょっとしたアート作品にデータ通信を組み合わせる)

お粗末なサンプルでごめんなさい><



余談1(p5.jsを学ぶなら)

  • p5.jsはprocessingのJS版なので、processingから学ぶのもあり!
  • webプログラムを書ける方は、processingの基本だけ学んで、自分で応用をかけていけばいいかも。
  • processing入門web(発表者の作ったサイトです。どうぞ宜しくお願いします。)



余談2(先日見た花火をp5で表現)

  • クリックすると、花火が上がる。
  • 所要時間:二時間くらい(30分くらいでいけるかと思ったら、全然駄目だった><)。link
  • 10クリックする(10回花火を上げる)と、花火の特設サイトへのリンクが現れるとか、どうでしょう?(この例では実装してません)
  • インタラクティブなちょっとしたアート作品を、他サイトへの導線にするといった使い道があるかもしれません。



このサイトのURLhttp://9ryulabo.com/

  • とりあえず上記へ行けば見れます!(その画面で「p5.jsの紹介」をクリック)