Processing×Webの薄い本ください。 ~Processing.jsについて~

9,372 views

Published on

KPF#x08 で発表した資料です。
参加レポートはこちら:
KPF#x08 に参加してきました #kpf
http://blog.livedoor.jp/reona396/archives/54390021.html

作品はこちらからご覧いただけます。
Processing.jsを利用してアニメーション&インタラクティブなWebページ背景をつくってみた
http://blog.livedoor.jp/reona396/archives/54387465.html

Published in: Technology

Processing×Webの薄い本ください。 ~Processing.jsについて~

  1. 1. Processing×Webの 薄い本ください。 ~Processing.jsについて~ @reona396
  2. 2. Processing×Webの 薄い本ください。 ~Processing.jsについて~ @reona396 【注意】 いたって真面目な 内容です。
  3. 3. 自己紹介 • @reona396 • ブログ「だらっと学習帳」 • ProcessingJP副管理人 • OpenProcessingスケッチ投稿数122個 • KinectProcessingやAndroidProcessingなど
  4. 4. OpenProcessing • Processingスケッチ投稿サイト • 作品の展示 • コードの共有
  5. 5. OpenProcessing • なれる!P5er ~OpenProcessing使い方ガイド~
  6. 6. 本題
  7. 7. 2012年9月19日。 Processing界に 衝撃が走った。
  8. 8. No more applets with Processing 2.0a7
  9. 9. Java Applet
  10. 10. Java Applet ↓
  11. 11. Java Applet ↓ JavaScript
  12. 12. Java Applet ↓ Processing.js
  13. 13. 翻訳記事 • OpenProcessing、JavaScriptモードによる投稿を推奨 • OpenProcessing、Processing.jsでの投稿に対応
  14. 14. ProcessingとJavaアプレット • Processingのスケッチの出力方法は Javaアプレットが中心
  15. 15. ProcessingとJavaアプレット • Processingのスケッチの出力方法は Javaアプレットが中心だった
  16. 16. ProcessingとJavaアプレット • Processingのスケッチの出力方法は Javaアプレットが中心だった • Javaアプレット出力機能廃止 • 開発チームもサポートを終了 _人人人人人人_ > 突然の死 <  ̄Y^Y^Y^Y^Y^Y ̄
  17. 17. Processing.jsとは • HTML5の<Canvas>タグを利用したライブラリ • ブラウザ上でProcessingのスケッチを実行 • 作者はjQueryでも知られているJohn Resig氏
  18. 18. 書き方 JAVAモードで書いた Processingのファイルを用意する
  19. 19. 書き方 ここをクリックして
  20. 20. 書き方 JavaScriptを選択して
  21. 21. 書き方 完成
  22. 22. 書き方 実行すると ブラウザが起動
  23. 23. OpenProcessingへの投稿 1. File > Export 選択 「web-export」というフォルダができる 2. フォルダごとzipに圧縮 3. アップロード index.html processing.js sample.pde
  24. 24. OpenProcessingへの投稿
  25. 25. デモについて • Blossom- OpenProcessing • Processing.jsでブログパーツをつくってみた • デモサイト – アニメーション背景 – インタラクション背景 四角をクリックすると円の色が変化
  26. 26. Processing.jsの長所 • Webフレンドリー – 「 No more applets with Processing 2.0a7」より “my hope is that this change will also encourage the community to make Processing more web-friendly” – Webでの表現が広がる • Webにアップロードすれば、 スマートフォンからでもスケッチを楽しめる – Androidモードとの使い分け
  27. 27. Processing.jsの短所 • JAVAモードと表示や動作が異なる場合がある – filter() • Processing.jsでfilterをかけたら – 再生速度 • OpenProcessing、Processing.jsでの投稿に対応 • 編集しにくい – 実行するたびにブラウザが立ち上がる
  28. 28. 補足 • OpenProcessingはJavaアプレットでの投稿にも まだ対応している – アプレット出力機能が残っている 古いバージョンを利用して投稿 – できればJavaScriptでの投稿を
  29. 29. Processing 楽しそう!
  30. 30. でも…
  31. 31. わからない ところが あったら…?
  32. 32. ご安心ください!
  33. 33. 日本のProcessingコミュニティ&フォーラム http://p5info.com/ 疑問・質問があればこちらまで! ご清聴ありがとうございました。

×