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