はじめに

Processingの使い方を記載します。
Processingはプログラミングの学習を行うための言語、および開発環境です。
図形の描画が簡単に行えるため、目に見える形で実行結果を確認しながら
プログラミングの学習をすすめることができます。

基本形

setup関数で初期設定をします。スケッチの最初に1回だけ実行されます。
draw関数はフレーム更新毎に実行されます。
frameRate関数でフレームレート(1秒間に何回フレーム更新するか)を指定します。
なお、静止した画面のみの場合はdrawは不要です。

void setup() {
  size(640, 480); /* width, height */
  frameRate(30);  /* fps */
}

void draw() {
}

座標系

ウィンドウの左上を原点とする座標系になります。
サイズはsize(width, height)で設定します。
幅、高さはそれぞれwidth,height変数で参照できます。

色

色はRGBで指定します。R,G,Bそれぞれ0~255の範囲で指定します。
background関数で背景色を指定します。

void setup() {
  size(640, 480);        /* width, height */
  background(0, 0, 0);   /* RGB = 0, 0, 0 = black */
}

色空間を変更できます。HSB色空間にすることもできます。
サーモグラフィーのような表示をするときに便利です。

colorMode関数の第2～第4引数はH,S,Bそれぞれの値の最大値を指定します。
最大値に100を指定すると色の値の範囲が0~100になります。

void setup()
{
  PImage img1 = createImage(100, 1, RGB);  
  PImage img2 = createImage(100, 1, RGB);  
  size(600, 120);
  colorMode(HSB, 100, 100, 100);
  for (int i=0; i<100; i++) {
    img1.pixels[i] = color(i, 100, 100);
    img2.pixels[i] = color(i*0.68, 100, 100);
  }
  img1.updatePixels();
  img2.updatePixels();
  image(img1, 0, 0, width, height/2);  
  image(img2, 0, height/2, width, height/2);  
}

上側はHueのみを0~100の範囲で変化させています。
下側はHueのみを0~68の範囲で変化させています。

図形描画

直線

line(sx, sy, ex, ey)関数で直線を描画します。始点のx,y座標と終点のx,y座標を指定します。
線の幅はstrokeWeight関数で指定します。線の色はstroke関数で指定します。

void setup() {
  size(640, 480);        /* width, height */
  background(0, 0, 0);   /* RGB = 0, 0, 0       = black */
  stroke(255, 255, 255); /* RGB = 255, 255, 255 = white */
  strokeWeight(1);
  line(width/4, height/4, width*3/4, height/4);
  strokeWeight(5);
  line(width/4, height/3, width*3/4, height/3);
  strokeWeight(10);
  line(width/4, height/2, width*3/4, height/2);
}

円

ellipse(x, y, width, height)関数で円を描画します。
中心のx,y座標と円の幅width、高さheightを指定します。
width!=heightのときは楕円になります。

円のように内側と外側がある図形は

内部
境界線

をどのように扱うかが指定できます。

内部を塗りつぶす場合はfill(R,G,B,A)関数で指定します。Aはアルファチャネルです。
Aで背景とのブレンド割合を指定します。 (色) = (内部)A/255 + (背景)(1-A/255)
A=255で内部のみ、A=0で背景のみになります。
noFill関数で内部塗りつぶしなし(=背景)になります。

noStroke関数で境界の描画を無効にします。

void setup() {
  size(640, 480);            /* width, height */
  background(255, 255, 255); /* RGB = white */
  fill(255, 255, 0, 255);    /* RGB = yellow, A = noblend */
  //noFill();
  stroke(255, 0, 0);         /* RGB = red */
  strokeWeight(2);
  //noStroke();
  ellipse(width/2, height/2, height/3, height/3);
}

入力

マウス

マウスの座標はmouseX, mouseYで参照できます。
マウスボタンが押下されるとmousePressedがtrueになります。

void setup() {
  size(640, 480);  /* width, height */
}

void draw() {
  background(255, 255, 255); /* white */
  if (mousePressed) {
    ellipse(mouseX, mouseY, height/3, height/3);
  }
}

コンソール出力

printでコンソール出力できます。printlnは改行付きになります。
nfsで整数部、小数部の長さを指定して文字列に変換できます。

print("Hello w/o new line");
print("\n");
println("Hello w/ new line");

float p =  12.34;
float n = -56.789;
println("p=" + p);
println("p=" + nfs(p, 3, 1));
println("n=" + nfs(n, 3, 1));

出力結果
-------------------
Hello w/o new line
Hello w/ new line
p=12.34
p= 012.3
n=-056.8

動画の作成

次のstepで動画を作成します。

saveFrameでprocessingのFrameデータを静止画として保存します。
外部ツール(e.g. ffmpeg)で静止画を動画に変換します。

saveFrameでprocessingのデータを静止画として保存します。

int x = 0;
void setup() {
  frameRate(30);
}
void draw() {
  background(204);
  if (x < 100) {
    line(x, 0, x, 100);
    x = x + 1;
  } else {
    noLoop();
  }
  // Saves each frame as line-000001.png, line-000002.png, etc.
  saveFrame("line-######.png");
}

静止画の保存先はCtl-kで開くことができます。

次にffmpegで静止画を動画に変換します。

準備

ffmpegをインストールします。
ffmpeg.exeがあるフォルダのパスを環境変数に設定します。
コマンドプロンプトを開いて、静止画が保存されたフォルダに移動します。

静止画をgif animationに変換します。
-iで入力ファイル名を、-rでフレームレートfpsを指定できます。出力ファイル名は一番最後の文字列out.gifです。

ffmpeg -i line-%06d.png -r 30 out.gif

静止画をmp4に変換します。

ffmpeg -i line-%06d.png -r 30 out.mp4

YouTubeのリンクを先頭画像を表示して埋め込みます。
リンクのURLが次の場合

https://youtu.be/HIOwBN07ZaY

HIOwBN07ZaYの部分を使って以下のように記載します。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/HIOwBN07ZaY/0.jpg)](http://www.youtube.com/watch?v=HIOwBN07ZaY)

実際に記載すると次のように表示されます。

Processingを使う

はじめに

基本形

座標系

色

図形描画

直線

円

入力

マウス

コンソール出力

動画の作成