Processing/Sample をテンプレートにして作成

開始行:
*Processing Sample Program ~ Processing には大きく２つのプログラミングスタイルがありま... -１）順に処理を実行し、最後でストップする（静止画用） -２）メインループを持ち、停止されるまで処理を繰り返す（動... それぞれ、簡単な例を紹介しましょう。 もし、すでに Processing の環境が準備されている場合は、 このページのソースをコピー＆ペーストしてお試し下さい。 ~ ***静止画　プログラム例 size(512, 512); colorMode(HSB, 100); background(0, 0, 99); noStroke(); rectMode(CENTER); for( int y = 16 ; y < 512 ; y += 32 ){ for( int x = 16 ; x < 512 ; x += 32 ){ fill( random(40,70), 50, 90); rect(x, y, 24, 24); } } ~ #ref(processing_01.jpg,right,around) たったこれだけです。 これにコメントを付けて説明すると、 以下のようになります。 size(512,512); // 画面サイズの指定 colorMode(HSB,100); // カラーモードの指定　 background(0,0,99); // 背景色　赤・彩度0・明度99 noStroke(); // 線なし（図形描画時） rectMode(CENTER); // 中心座標基準（長方形描画時） for( int y = 16 ; y < 512 ; y += 32 ){ // 縦方向の繰り... 　for( int x = 16 ; x < 512 ; x += 32 ){ // 横方向の繰... 　　fill(random(40,70),50,90); // 色指定（ランダム,彩... 　　rect(x,y,24,24); // 矩形描画（中心 x,y , サイズ24... 　} } ~ ***動画　プログラム例 float x,y; // ボールの位置 float vx,vy; // 速度（１フレームごとの移動量） int radius = 10; // ボールの半径 void setup(){ size(512,512); frameRate(60); x = width / 2; y = height / 4; vx = 3; vy = 5; } void draw(){ // メインループ fill(255); rect(0,0,width,height); x = x+vx; y = y+vy; if( x<radius || width - radius<x ) vx = -vx; if( y<radius || height - radius<y ) vy = -vy; fill(0); ellipse(x,y,radius*2,radius*2); } ~ #ref(processing_02.jpg,right,around) とりあえずこれで、丸い図形が画面上を動きます。 void setup() は、初期設定 void draw() は、メインループ このプログラムの以下の部分は、 アニメーションの基本的なテクニックです。 rect(0,0,width,height);　←　画面全体の塗りつぶし（消去） ellipse(x,y,radius*2,radius*2);　←　円の描画 この「全部消す」と「(少し位置を変えて)描く」をセットにし... 繰り返すことで、アニメーションが実現する・・という仕組み... x = x+vx;　　　（ y = y+vy;　も同じ役割　） これは、座標（位置）の移動を意味しています。 ＝　記号は、等しいという意味ではなく、 「右辺の計算結果を左辺の変数に代入しなさい」という意味で... つまり、現在の x 座標に vx だけ加えて、それを新たな x 座... ということを意味していて、 これを繰り返すことで、アニメーションが実現します。 if( x<radius || width - radius<x ) vx = -vx; この行は、壁面での跳ね返りを実現します。 xの値、すなわち画面内でのx座標が、左端よりも左、 あるいは右端よりも右にはみ出すようであれば、移動方向を逆... という動作を書いたものです。 たとえば 今 vx が＋の値で、x= x+vx で右（＋向き）に移動し... 右の壁を越えようとした時点で、 vx を－の値にすれば、それ... x=x+vxでｘ の値は減り続ける・・つまり左へ動くことを意味し... この壁への当たり・反転処理は、上下方向についても必要です... y について同様の１行が必要です。 ~ ***Interactive マウスを用いたインタラクティブなプログラムの例 int cnt=0; void setup(){ size(512,512); 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,64,64); // マウスの位置に円を描く } ~ #ref(processing_03.jpg,right,around) これだけで、マウスに追随して 円が描かれるものができます。 void setup() は、初期設定 void draw() は、メインループ 塗りつぶしの色指定の部分について補足します。 cnt++ ：　 これは cnt（カウント）を１つ進める・・意味し... A %100 ：　これは A の値を100で割った余り・・を意味します つまり、ループの都度、1,2,3,4・・・・と値が変化して、 99まで進むと、次は0に戻ってまた繰り返すことになります。 ~ ***キーボード入力を用いたインタラクティブなプログラムの例 PFont font; void setup(){ size(512,512); colorMode(HSB,100); frameRate(30); font = createFont("Arial",50); 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)); } ~ #ref(processing_04.jpg,right,around) キーボードから入力した文字が ランダムな位置に表示されます。 英数入力モードで操作してください。 ここで重要なのは、 void keyPressed() です。 ここには、「キーが押されたときにやるべきこと」 が書かれて... この場合は、色相をランダムに決めて、 押されたキーの文字をランダムな位置に出力します。 //''loadFont()の使い方'' //Processing で使うフォントを作成するには・・ //-ツールメニューで　Create Font... を選択 //-使いたいフォントを選択（あなたのPC内にあるものが候補） //-以上で、Processing で要求される vlw形式のデータが作成... //sketch の data ディレクトリに追加されます。 //-あとは、上のサンプルのように書けば表示されます。 ~ ***応用サンプル マウスクリックと、キーボードの[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] ) ... if( y[i]<radius[i] || height - radius[i]<y[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; } } } ~ ~ **付記： ３つの図形に、それぞれ異なる動きを与えるサンプル &color(red){作り変えて試すためのサンプルなので、使ってい... #image(test.jpg,right,30%) -円は斜めに動いて、エリア内を反射します。 -矩形は左右に反射します。 -三角形は上下に反射します。 int x1, y1, r, vx1, vy1; // ellipse int x2, y2, s, vx2, vy2; // rect int x3, y3, l, vx3, vy3; // triangle void setup(){ size(400,400); x1=50; y1=100; r=25; vx1=2; vy1=2; x2=0; y2=175; s=60; vx2=2; vy2=0; x3=200; y3=0; l=20; vx3=0; vy3=2; colorMode( RGB, 256 ); noStroke(); smooth(); } void draw(){ // Erase fill(255); rect(0,0,width,height); // ellipse Bouncing x1 = x1 + vx1; y1 = y1 + vy1; if( x1 < r || width-r < x1 ) vx1 = -vx1; if( y1 < r || height-r < y1 ) vy1 = -vy1; fill(255,0,0); ellipse(x1, y1, r*2, r*2); // rectangle Bouncing horizontal x2 = x2 + vx2; if( x2 < 0 || width-s < x2 ) vx2 = -vx2; fill(0,255,0); rect(x2,y2,s,s); // triangle Bouncing vertical y3 = y3 + vy3; if( y3 < 0|| height-l*2 < y3 ) vy3 = -vy3; fill(0,0,255); triangle(x3, y3, x3+l, y3+l*2, x3-l, y3+l*2); } ~ ~

終了行:
*Processing Sample Program ~ Processing には大きく２つのプログラミングスタイルがありま... -１）順に処理を実行し、最後でストップする（静止画用） -２）メインループを持ち、停止されるまで処理を繰り返す（動... それぞれ、簡単な例を紹介しましょう。 もし、すでに Processing の環境が準備されている場合は、 このページのソースをコピー＆ペーストしてお試し下さい。 ~ ***静止画　プログラム例 size(512, 512); colorMode(HSB, 100); background(0, 0, 99); noStroke(); rectMode(CENTER); for( int y = 16 ; y < 512 ; y += 32 ){ for( int x = 16 ; x < 512 ; x += 32 ){ fill( random(40,70), 50, 90); rect(x, y, 24, 24); } } ~ #ref(processing_01.jpg,right,around) たったこれだけです。 これにコメントを付けて説明すると、 以下のようになります。 size(512,512); // 画面サイズの指定 colorMode(HSB,100); // カラーモードの指定　 background(0,0,99); // 背景色　赤・彩度0・明度99 noStroke(); // 線なし（図形描画時） rectMode(CENTER); // 中心座標基準（長方形描画時） for( int y = 16 ; y < 512 ; y += 32 ){ // 縦方向の繰り... 　for( int x = 16 ; x < 512 ; x += 32 ){ // 横方向の繰... 　　fill(random(40,70),50,90); // 色指定（ランダム,彩... 　　rect(x,y,24,24); // 矩形描画（中心 x,y , サイズ24... 　} } ~ ***動画　プログラム例 float x,y; // ボールの位置 float vx,vy; // 速度（１フレームごとの移動量） int radius = 10; // ボールの半径 void setup(){ size(512,512); frameRate(60); x = width / 2; y = height / 4; vx = 3; vy = 5; } void draw(){ // メインループ fill(255); rect(0,0,width,height); x = x+vx; y = y+vy; if( x<radius || width - radius<x ) vx = -vx; if( y<radius || height - radius<y ) vy = -vy; fill(0); ellipse(x,y,radius*2,radius*2); } ~ #ref(processing_02.jpg,right,around) とりあえずこれで、丸い図形が画面上を動きます。 void setup() は、初期設定 void draw() は、メインループ このプログラムの以下の部分は、 アニメーションの基本的なテクニックです。 rect(0,0,width,height);　←　画面全体の塗りつぶし（消去） ellipse(x,y,radius*2,radius*2);　←　円の描画 この「全部消す」と「(少し位置を変えて)描く」をセットにし... 繰り返すことで、アニメーションが実現する・・という仕組み... x = x+vx;　　　（ y = y+vy;　も同じ役割　） これは、座標（位置）の移動を意味しています。 ＝　記号は、等しいという意味ではなく、 「右辺の計算結果を左辺の変数に代入しなさい」という意味で... つまり、現在の x 座標に vx だけ加えて、それを新たな x 座... ということを意味していて、 これを繰り返すことで、アニメーションが実現します。 if( x<radius || width - radius<x ) vx = -vx; この行は、壁面での跳ね返りを実現します。 xの値、すなわち画面内でのx座標が、左端よりも左、 あるいは右端よりも右にはみ出すようであれば、移動方向を逆... という動作を書いたものです。 たとえば 今 vx が＋の値で、x= x+vx で右（＋向き）に移動し... 右の壁を越えようとした時点で、 vx を－の値にすれば、それ... x=x+vxでｘ の値は減り続ける・・つまり左へ動くことを意味し... この壁への当たり・反転処理は、上下方向についても必要です... y について同様の１行が必要です。 ~ ***Interactive マウスを用いたインタラクティブなプログラムの例 int cnt=0; void setup(){ size(512,512); 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,64,64); // マウスの位置に円を描く } ~ #ref(processing_03.jpg,right,around) これだけで、マウスに追随して 円が描かれるものができます。 void setup() は、初期設定 void draw() は、メインループ 塗りつぶしの色指定の部分について補足します。 cnt++ ：　 これは cnt（カウント）を１つ進める・・意味し... A %100 ：　これは A の値を100で割った余り・・を意味します つまり、ループの都度、1,2,3,4・・・・と値が変化して、 99まで進むと、次は0に戻ってまた繰り返すことになります。 ~ ***キーボード入力を用いたインタラクティブなプログラムの例 PFont font; void setup(){ size(512,512); colorMode(HSB,100); frameRate(30); font = createFont("Arial",50); 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)); } ~ #ref(processing_04.jpg,right,around) キーボードから入力した文字が ランダムな位置に表示されます。 英数入力モードで操作してください。 ここで重要なのは、 void keyPressed() です。 ここには、「キーが押されたときにやるべきこと」 が書かれて... この場合は、色相をランダムに決めて、 押されたキーの文字をランダムな位置に出力します。 //''loadFont()の使い方'' //Processing で使うフォントを作成するには・・ //-ツールメニューで　Create Font... を選択 //-使いたいフォントを選択（あなたのPC内にあるものが候補） //-以上で、Processing で要求される vlw形式のデータが作成... //sketch の data ディレクトリに追加されます。 //-あとは、上のサンプルのように書けば表示されます。 ~ ***応用サンプル マウスクリックと、キーボードの[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] ) ... if( y[i]<radius[i] || height - radius[i]<y[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; } } } ~ ~ **付記： ３つの図形に、それぞれ異なる動きを与えるサンプル &color(red){作り変えて試すためのサンプルなので、使ってい... #image(test.jpg,right,30%) -円は斜めに動いて、エリア内を反射します。 -矩形は左右に反射します。 -三角形は上下に反射します。 int x1, y1, r, vx1, vy1; // ellipse int x2, y2, s, vx2, vy2; // rect int x3, y3, l, vx3, vy3; // triangle void setup(){ size(400,400); x1=50; y1=100; r=25; vx1=2; vy1=2; x2=0; y2=175; s=60; vx2=2; vy2=0; x3=200; y3=0; l=20; vx3=0; vy3=2; colorMode( RGB, 256 ); noStroke(); smooth(); } void draw(){ // Erase fill(255); rect(0,0,width,height); // ellipse Bouncing x1 = x1 + vx1; y1 = y1 + vy1; if( x1 < r || width-r < x1 ) vx1 = -vx1; if( y1 < r || height-r < y1 ) vy1 = -vy1; fill(255,0,0); ellipse(x1, y1, r*2, r*2); // rectangle Bouncing horizontal x2 = x2 + vx2; if( x2 < 0 || width-s < x2 ) vx2 = -vx2; fill(0,255,0); rect(x2,y2,s,s); // triangle Bouncing vertical y3 = y3 + vy3; if( y3 < 0|| height-l*2 < y3 ) vy3 = -vy3; fill(0,0,255); triangle(x3, y3, x3+l, y3+l*2, x3-l, y3+l*2); } ~ ~

ページ名: