Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Processingを使う

More than 5 years have passed since last update.

はじめに

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変数で参照できます。

image

色は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);  
}

1.JPG

上側は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);
}

1.JPG

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);
}

q.JPG

入力

マウス

マウスの座標は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);
  }
}

1.JPG

コンソール出力

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で動画を作成します。

  1. saveFrameでprocessingのFrameデータを静止画として保存します。
  2. 外部ツール(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)

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away