Entries

3Dボタンを作ってみた(Processing1.5.1)

3Dのボタンを作ってみました。
それから、FC2上でprocessingプログラムを動かすことができたのでアップします。
ただ、まだまだ問題があるみたいです。気になった現象についても
併せてレポートします。


まずProcessing上で動かすとこんな感じになります(これは画像で)。

OFF時

Button3D ボタンOFF時


ON時

Button3D ボタンON時



このソースをブラウザで表示させるとこんな感じです。
ブラウザがFirefox、Chrome、Operaの最新版であれば表示されているはずです。
IEでは動きません。
表示されていたらイジってみてください。





ブラウザに表示させると、こんな問題が見つかりました。

・文字列が表示されない。

この件について調べているのですが、原因がよく分かりません。
プログラム中でフォントを指定しない時にブラウザが管理している
デフォルトのフォントを使うと思うのですが、そのあたりの連携がうまく
いっていないのでしょうか、と推測しています。
(まあおそらく、プログラムの書き方に問題があるのだとは思いますが...)
いずれにせよ、Processingプログラムのブラウザ表示に関しては
まだまだ調査する必要がありそうです。


ではソースを。フォントのファイルはFC2の仕様でアップロードできないので、
コメントにしてあります。


// ボタンを立体的に見せる
// 2011-12-26 by Matsushiro

Btn pushbtn = new Btn();
//PFont font;

void setup(){
background(204);
size(400, 300);
noStroke();
smooth();
// font = loadFont("Calibri-48.vlw");
// textFont(font, 48);

pushbtn.display(0);
}

void draw(){
}

void mousePressed(){
if(pushbtn.areachk() == 1)
pushbtn.display(1);
}
void mouseReleased(){
if(pushbtn.areachk() == 1)
pushbtn.display(0);
}


class Btn{

void display(int stat){

int col_top;
int col_right;
int col_bottom;
int col_left;

if(stat == 0){ // 押されていない状態を作る
col_top = 230;
col_right = 100;
col_bottom = 80;
col_left = 210;
}
else { //押された状態を作る
col_top = 80;
col_right = 210;
col_bottom = 230;
col_left = 100;
}

fill(255, 255, 0);
rect(100, 100, 200, 100); // center
fill(col_top);
quad(90, 90, 310, 90, 300, 100, 100, 100); // top
fill(col_right);
quad(310, 90, 310, 210, 300, 200, 300, 100); // right
fill(col_bottom);
quad(100, 200, 300, 200, 310, 210, 90, 210); // bottom
fill(col_left);
quad(90, 90, 100, 100, 100, 200, 90, 210); // left
textSize(24);
fill(0);
text("Push Button",130, 160);
}

int areachk(){
if(mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 200) return 1;
else return 0;
}
}


Btnクラスにコンストラクタを作って、これにサイズ情報なんかをパラメタで
渡せるようにすればライブラリ化できると思います。

Processingで書いたプログラムをFC2に表示させる方法についても近々記事を
アップしますのでお待ちください。



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

0件のトラックバック

0件のコメント

コメントの投稿

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

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


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

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter