はじめに
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の部分を使って以下のように記載します。
[](http://www.youtube.com/watch?v=HIOwBN07ZaY)
実際に記載すると次のように表示されます。
