Processing×Webの 薄い本ください。

～Processing.jsについて～

@reona396

Processing×Webの 薄い本ください。

～Processing.jsについて～

@reona396

【注意】 いたって真面目な 内容です。

自己紹介

• @reona396

• ブログ「だらっと学習帳」

• ProcessingJP副管理人

• OpenProcessingスケッチ投稿数122個

• KinectProcessingやAndroidProcessingなど

OpenProcessing • Processingスケッチ投稿サイト

• 作品の展示

• コードの共有

OpenProcessing • なれる！P5er ～OpenProcessing使い方ガイド～

本題

2012年9月19日。 Processing界に 衝撃が走った。

No more applets with

Processing 2.0a7

Java Applet

Java Applet ↓

Java Applet ↓

JavaScript

Java Applet ↓

Processing.js

翻訳記事

• OpenProcessing、JavaScriptモードによる投稿を推奨

• OpenProcessing、Processing.jsでの投稿に対応

ProcessingとJavaアプレット • Processingのスケッチの出力方法は

Javaアプレットが中心

ProcessingとJavaアプレット • Processingのスケッチの出力方法は

Javaアプレットが中心だった

ProcessingとJavaアプレット • Processingのスケッチの出力方法は

Javaアプレットが中心だった

• Javaアプレット出力機能廃止

• 開発チームもサポートを終了

＿人人人人人人＿ ＞ 突然の死 ＜ ￣Y^Y^Y^Y^Y^Y￣

Processing.jsとは • HTML5の<Canvas>タグを利用したライブラリ

• ブラウザ上でProcessingのスケッチを実行

• 作者はjQueryでも知られているJohn Resig氏

書き方 JAVAモードで書いた

Processingのファイルを用意する

書き方 ここをクリックして

書き方 JavaScriptを選択して

書き方 完成

書き方

実行すると

ブラウザが起動

OpenProcessingへの投稿 1. File > Export 選択 「web-export」というフォルダができる

2. フォルダごとzipに圧縮

3. アップロード

index.html processing.js sample.pde

OpenProcessingへの投稿

デモについて • Blossom- OpenProcessing

• Processing.jsでブログパーツをつくってみた

• デモサイト

– アニメーション背景

– インタラクション背景 四角をクリックすると円の色が変化

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モードとの使い分け

Processing.jsの短所 • JAVAモードと表示や動作が異なる場合がある

– filter()

• Processing.jsでfilterをかけたら

–再生速度

• OpenProcessing、Processing.jsでの投稿に対応

• 編集しにくい

–実行するたびにブラウザが立ち上がる

補足 • OpenProcessingはJavaアプレットでの投稿にも まだ対応している

–アプレット出力機能が残っている 古いバージョンを利用して投稿

–できればJavaScriptでの投稿を

Processing 楽しそう！

でも…

わからない ところが

あったら…？

ご安心ください！

日本のProcessingコミュニティ&フォーラム

http://p5info.com/

疑問・質問があればこちらまで！ ご清聴ありがとうございました。