Your SlideShare is downloading. ×
0
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Processing×Webの薄い本ください。 ~Processing.jsについて~
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,359

Published on

KPF#x08 で発表した資料です。 …

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
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,359
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×