Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Processingでジャバジャバ稼ぐ
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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

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

Related Books

Free with a 30 day trial from Scribd

See all

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/ 疑問・質問があればこちらまで! ご清聴ありがとうございました。
  • wangalan395

    Oct. 17, 2015
  • nkmrbungo

    Jun. 25, 2015
  • masaakiokabe

    Jun. 24, 2015
  • harukamashiko

    May. 3, 2014
  • ngm4life

    Mar. 20, 2014
  • ogamita777

    Mar. 17, 2014
  • ssuser0a4bd6

    Feb. 19, 2014
  • MaikoShimabuku

    Dec. 25, 2013
  • manabunagase9

    Aug. 30, 2013
  • toenobu

    Jun. 12, 2013
  • matsuhiroshi

    Feb. 12, 2013

KPF#x08 で発表した資料です。 参加レポートはこちら: KPF#x08 に参加してきました #kpf http://blog.livedoor.jp/reona396/archives/54390021.html 作品はこちらからご覧いただけます。 Processing.jsを利用してアニメーション&インタラクティブなWebページ背景をつくってみた http://blog.livedoor.jp/reona396/archives/54387465.html

Views

Total views

10,511

On Slideshare

0

From embeds

0

Number of embeds

266

Actions

Downloads

16

Shares

0

Comments

0

Likes

11

×