転職を繰り返したサラリーマンの多趣味ブログ

30才未経験でSEに転職した人の多趣味ブログ

【Processing②】アニメーションで円を描画する

Processingでは、フレームループによって連続的に画面を再描画できる。
そのためには、setup()関数draw()関数を使ってフレームの基本構造を書く必要がある。

setup()関数

プログラム起動時に、1度だけ呼ばれる。初期化のためのコードを記載することが多い。

draw()関数

フレームごとに繰り返し呼ばれる処理。この呼び出される間隔は、frameRate関数で変更可。(12、24、25、30が一般的)

アニメーション

// 円の半径
int diam = 10;
// 円の中心座標
float x, y;
// 円の増加判定
boolean flg = false;

void setup() {
  // キャンパスサイズ
  size(500, 300);
  // 毎秒30フレーム
  frameRate(30);
  // 線をなめらかに
  smooth();
   
  // キャンパスサイズの中心の座標
  x = width/2;
  y = height/2;
  
  // 線の色を設定
  stroke(0, 0, 255);
  // 線の太さを設定
  strokeWeight(5);
  
  // 円の色の設定
  fill(255, 0, 0);
}

void draw() {
  
  if(!flg) {
    
    // 背景色
    background(0, 230, 230);
    
    // 円の描画
    ellipse(x, y, diam, diam);
    
    // 円の背景を増やす
    diam += 10;
    
    if(diam == 400) {
      flg = true;
    }
  
  } else if(flg) {
     
     // 背景色
    background(0, 230, 230);
    
    // 円の描画
    ellipse(x, y, diam, diam);
    
    // 円の半径を減らす
    diam -= 10;
    
    if(diam == 0) {
      flg = false;
    }
  }
}

f:id:uuc1h:20180924175726g:plain