Interactive
マウスを用いたインタラクティブなプログラムの例
| int cnt=0; void setup(){ size(256,256); colorMode(HSB,100); noStroke(); frameRate(30); } void draw(){ fill(99,10); // 白10% rect(0,0,width,height); // 全画面塗りつぶし fill((cnt++)%100,50,99); // 順次変化する色相で ellipse(mouseX,mouseY,32,32); // マウスの位置に円を描く } |
実行結果 
・ブラウザのJAVAを有効にする 必要があります。 |
これだけで、マウスに追随して円が描かれるものができます。
void setup() は、初期設定
void draw() は、メインループ（この中身を際限なく繰り返します）
塗りつぶしの色指定の部分について補足します。
cnt++ ： これは cnt（カウント）を１つ進める・・意味します。
A %100 ： これは A の値を100で割った余り・・を意味します
つまり、ループの都度、1,2,3,4・・・・と値が変化して、
99まで進むと、次は0に戻ってまた繰り返すことになります。
キーボード入力を用いたインタラクティブなプログラムの例
| PFont font; void setup(){ size(256,256); colorMode(HSB,100); frameRate(30); font = loadFont("font_48.vlw"); textFont(font); textAlign(CENTER); } void draw(){ fill(99,10); rect(0,0,width,height); } void keyPressed(){ fill(random(100),99,99); text(key,random(width),random(height)); } |
実行結果  ・画像をクリックしてお試し下さ い。 ・キーボードから入力した文字が ランダムな位置に表示されます。 ・必ず英数入力モードで 操作してください。 ・ブラウザのJAVAを有効にする 必要があります。 |
void setup() は、初期設定
void draw() は、メインループ
ここで重要なのは、
void keyPressed() です。
ここには、「キーが押されたときにやるべきこと」 が書かれています。
この場合は、色相をランダムに決めて、
押されたキーの文字をランダムな位置に出力します。
| PAGE TOP |
応用サンプル
マウスクリックと、キーボードの[r],[g],[b],[0]に反応するプログラムの例です。[r],[g],[b]は、ボール色のRGB各値を増加、[0]は黒に戻します。
以下のソースをProcessingの編集画面にコピー＆ペーストしてお試し下さい。
// 変数の宣言 ////////////////////////////////
float[] x = new float[10] , y = new float[10];
float[] vx= new float[10] , vy= new float[10];
int[] radius = new int[10];
int[] R = new int[10], G = new int[10], B = new int[10];
int i;
// 初期設定 ////////////////////////////////
void setup(){
size(512,512);
colorMode(RGB,256);
noStroke();
frameRate(60);
// 配列変数の初期化
for(i=0;i<10;i++){
x[i] = width / random(2,5);
y[i] = height / random(2,5);
vx[i] = random(-5,5);
vy[i] = random(-5,5);
radius[i]= (int)random(10,50);
R[i] = 0;
G[i] = 0;
B[i] = 0;
}
}
// メイン ////////////////////////////////
void draw(){
fill(255,255,255);
rect(0,0,width,height);
for(i=0;i<10;i++) {
x[i] = x[i]+vx[i];
y[i] = y[i]+vy[i];
if( x[i]<radius[i] || width - radius[i]<x[i] ) vx[i] = -vx[i];
if( y[i]<radius[i] || height - radius[i]<y[i] ) vy[i] = -vy[i];
fill(R[i],G[i],B[i]);
ellipse(x[i],y[i],radius[i]*2,radius[i]*2);
}
}
// マウスコールバック ////////////////////////////////
void mousePressed() {
for(i=0;i<10;i++) {
x[i] = mouseX;
y[i] = mouseY;
}
}
// キーボードコールバック ////////////////////////////////
void keyPressed(){
for(i=0;i<10;i++) {
switch(key){
case 'r':
R[i] += 32; if(R[i]>255) R[i] = 255;
break;
case 'g':
G[i] += 32; if(G[i]>255) G[i] = 255;
break;
case 'b':
B[i] += 32; if(B[i]>255) B[i] = 255;
break;
case '0':
R[i] = 0; G[i] = 0; B[i] = 0;
break;
default:
break;
}
}
}
| PAGE TOP |