Processingのプログラミングをはじめる


Processingを用いてプログラミングの経験をしてみます。

まずソフトウェアを此方(学内のみ)からダウンロードしてインストールしてください。


1. 起動

2. 最初のプログラム

2. 1. 作成と実行

                ex1
/*  ex1   draw a circle and line */
ellipse(50,50,100,100);
line(0,0,100,100);
          
              右端の;はプログラム分の区切り。忘れないように。
               /* */で囲まれた部分はコメントです。
               //をつかってもよい(この場合は行末までがコメントの終わり)

          
          ex1

2. 2  保存と再実行

      

2. 2次元グラフィクス

2.1 座標系

          
                        こっち!  
                         http://processing.org/learning/drawing/
                          
            
                      http://processing.org/learning/drawing/

2.2 ウィンドウの作成と単純な図形の描画

size(dx,dy)
        
          点     線      長方形       楕円
                 http://processing.org/learning/drawing/

                                     表1
メソッド
意味
point(x,y)
(x,y)に点を描く
line(x0,y0,dx,dy)
(x0,y0)から(x1, y1)まで線を引く
rect(x0,y0,dx,dy)
(x0,y0)から始点として幅dx, 高さdyの長方形を描く
ellipse(x0,y0,dx,dy) (x0,y0)を描画領域の左上として、幅(yx,ry)の楕円(円)を描く。
text(文字列, x,y)
(x,y)に文字列を描く

2.2 色


       
                      表2
メソッド
内容
background(M)
背景を指定された色で塗りつぶす。(既に描かれていた図形は塗りつぶされる)Mは0-255の整数
stroke(M) 輪郭の色を設定
noStroke()
輪郭を書かない
fill(M)
塗りつぶしの色を設定
noFill()
塗りつぶししない

      

                       

黒   (0,0,0)
白   (255,255,255) 
赤   (255,0,0)
青   (0,255,0)
緑   (0,0,255)
    
        ex2
background(0);                  /* 背景を黒に */
size(350,100);                    /*350x 100のウィンドウを生成する */
fill(255,0,0);                        /* 塗りつぶしを赤にする */
ellipse(100,50,50,50);           /* (100,50)を中心とする径50, 50の楕円を描く */
fill(255,0,0,200);                 /* 塗りつぶしを透明度 200(255中)の赤にする */
ellipse(150,50,50,50);     /* (150,50)を中心とする径50, 50の楕円を描く */


2.  簡単な文法説明

2.1  変数の型


int      整数
float     実数
boolean         ブール値(true, false)
char     文字
color     色
String    文字列

          int a;

    (=は代入)

2.2 計算

=  代入
+  加算
- 引き算
*   かけ算
/ 割り算
% 剰余

    例 
                 int a,c;
                 a=3+2      
                 c=a*5      
         ex3
/*  ex3 加減算 */
int a,b,wa,sa;
a=2;
b=3;
background(0);

wa=a+b;
sa=a-b;

text("wa",15,15);
text(wa,45,15);
text("sa="+sa,15,35);

println("sa="+sa);
  a="This is "
  b="a pen"
  c=a+b               → cは "This is a pen"となる。
                        
 sa=-1

3.2 条件分岐

 if (条件式) {
         条件式が正しいときに実行される部分
   }
   else {
          条件式が正しくないときに実行される部分
   }

          ex4
/* ex4 条件分岐*/
int a=10;
int b=7;
size(400,100);
background(0);
if (a<b) {
    text("aはbより小さい",15,15);
}
else{
    text("aはbより大きい",15,15);
}

        

3.3   繰り返し


for (int i=is;  i<=ie; i++) {
             繰り返し部分
 }
         circles
/* circles  繰り返し */
background(0);
size(400,200);
for(int i = 0; i < 10; i++){
  fill (255,0,0,255-20*i);
  ellipse(100 + 20 * i, 100, 40, 40);
}
        

3.4 でたらめに決める

random(ic)
   
         randomCircles
/*  randomCircles  でたらめな円*/
background(0);
size(400,200);

for(int i = 0; i < 10; i++){
  fill (255,0,0,255-i*20);
  ellipse(random(400), random(200) , 40, 40);
}

          

3.5 ダイナミックに動作をかえるプログラム

          dynamicCircles
/* dynamicCircles  マウスと円描画*/
void setup() {

  size(480, 120);
  smooth();
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

     

  これから作成するアプリケーションは、基本的にはこの形式をとることにします。

3.  3Dグラフィクス

    cube
/*  cube */
void setup(){
  size(200,200, P3D);
}

void draw(){
  background(0);
  lights();
  noStroke();
  fill(255,0,0);
  translate(width/2, height/2, 0);
  rotateY(1.25);
  rotateX(-0.4);
  box(60);
}

   
            

 

          cube2
/*cube2 : マウスの動きとともに立方体が回転する*/
float xmag, ymag = 0;       //マウスの位置から判定した回転量(ラジアン)

float newXmag, newYmag = 0; //新しいマウスの位置から判定した回転量(ラジアン)
 
void setup(){
  size(200,200, P3D);
}

void draw(){
  background(0);
  lights();
  noStroke();
  fill(255,0,0);
  translate(width/2, height/2, 0);

  //マウスの値に応じた回転
  newXmag = mouseX/float(width) * TWO_PI;
  newYmag = mouseY/float(height) * TWO_PI;
  float diff = xmag-newXmag;
  if (abs(diff) >  0.01) { xmag -= diff/4.0; }
  diff = ymag-newYmag;
  if (abs(diff) >  0.01) { ymag -= diff/4.0; }
  rotateX(-ymag);
  rotateY(-xmag);
//マウスの値に応じた回転終わり

  box(60);
}


4. 音


         dynamicCirclesSound
import ddf.minim.*;
Minim minim;
AudioPlayer player;

void setup() {
  size(480, 120);
  smooth();
  minim = new Minim(this);
  player = minim.loadFile("piy1a.mp3",2048);
}

void draw() {
  if (mousePressed) {
    fill(0);
    player.rewind();
    player.play();
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

void stop()
{
  player.close();
  minim.stop();
  super.stop();
}


その他にもProcessingには色々な機能があります。
こちらのページを参照するか、processingのデモをみて、調べてみてください。

http://tetraleaf.com/p5_reference_alpha/