Entries

Processingで書いたプログラムの背景をHTML5 canvas上で透過させる(HTML5+Processing.js)

2013年最初の記事です。今年もよろしくお願いします。

今、HTML5ベースでプログラムを書いているんですけど、
以前Processingで作った3D風のアナログ時計をcanvas上に表示できないかと
調査をしてきました。その結果表示そのものはあまり苦労せずにできましたが、
時計の背景を透過させる方法が分からずにさらなる調査を行いました。
その結果問題が解決しましたので備忘録として書き留めておきます。

対処法:Processingのソースをちょっとイジる。

draw()の中で、background(0, 0);と書く。
(背景を黒にする+アルファ値を0にする)



動作確認に当たっては、Processing.jsのサイト

http://processingjs.org/

の画面右のメニューにある、「Web IDEs」の下の、Processing.js Helperのページ

http://processingjs.org/tools/processing-helper.html

に行って、Processingで作ったpdeファイルをこのページにコピーした後、
「Convert to JS」 を行います。(画面下にある3つのボタンの真ん中)
この作業を行うと、即時関数形式のJavaScript内に書けるソースが
自動生成されます。


そこで作られたJSソースをすべて(クリップボードに)コピーしておいて、

http://processingjs.org/learning/

のページにあるサンプルファイルの後半のソースにある
以下のような書き方、

・・・
var canvas = document.getElementById("canvas1");
// attaching the sketch to the canvas
var p = new Processing(canvas, sketch);
・・・

あたりをパクって、さっきコピーしておいたJSソースを

var p = new Processing(canvas, sketch);

の2番パラメタのsketch に直接ペーストしました。
(ソースはかなりいびつになりますが、これが最近の書き方???)

そして、こいつをcanvas上で指定した座標に表示させます。

HTML5, JavaScriptによる全体のソースは載せません。
あくまでProcessingのソースをJavaScript形式にコンバートした上で
ブラウザに表示させる時の背景処理に関する説明に留めます。

--------------------------------------------

元々Processingで作っていたプログラム。
アナログ時計を3次元で表示させるための実験プログラム。

元々作っていたProcessingのプログラム。アナログクロック



何も考えずに表示させた時(画像は拡大できます)

processingjs そのままの形で表示


背景色を黒でアルファ値を0にしたら背景が消えた!!
背景が透過しました!

processingjs 背景を透過させた形で表示


ちなみに、アルファ値が0でも、背景色が赤だとこんな感じ。
全然ダメ。

processingjs アルファ値が0でも色によってはNG

気になった点としては、ProcessingのソースをJavaScript形式に
コンバートすることによって、時計の針の太さが反映されなくなった
(全部太さが1px)ことが挙げられます。
Processing の strokeWeight()が死んでしまっている感じです。
値を変えて試しましたがダメでした。


こんなやり方がベストかどうかは知りませんけど、
実現できたのでますは一安心。

最初から全部JavaScriptで書けって?
なぜか好きなんですよ、Processingが。
だから使いたいんです。

スポンサーサイト
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/219-e1681c58

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


「カメラと動画(+スチル写真)」
「音響と音楽」
「プログラミング」
を主なテーマに活動しています。
映画館と美術館と音楽ホールと
古い街並みが私の学校。

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter