カテゴリー: 教材：プログラミング

Processingでは他のソフトウェアなどで作成した画像を扱うことができます。

画像ファイルの読み込み
まず始めにProcessingで使用したい画像ファイルを用意します。次にProcessingを開き、新しいスケッチ（sketch_）を表示します。Processingの「Sketch」メニューから「Add File…」を選び実行します。使用したい画像ファイルを選択し「Open」ボタンを押して読み込みます。読み込みがうまくいくとProcessingのメッセージエリアに”One file added to the sketch.”というメッセージが表示されます。
追加した画像ファイルは「Sketch」メニューの「Show Sketch Folder」を実行し、dataフォルダの中を確認すると見つかります。このdataフォルダに格納された画像ファイルをProcessingのプログラムで使用します。dataフォルダに複数の画像ファイルを格納して使用します。

画像ファイルの表示
画像ファイルをProcessingのプログラムで使用してみましょう。画像ファイルは、ここでは仮に XXXX.jpg という名称のJPEGデータとします。

PImage img;

void setup(){
  size(800,800);
  img = loadImage("XXXX.jpg");
}

void draw(){
  image(img,0,0);
}

上記のプログラムでは、始めに「PImage変数」を作成し、img と名付けます。変数　img　にloadImage()を使って画像ファイル XXXX.jpg を格納します。画像ファイル XXXX.jpg　を格納した変数 img　をimage()を使って表示します。image(img,0,0)　内の数値は画像ファイルの座標を表します。

複数の画像ファイルを表示する
複数の画像ファイルを表示する際のプログラム例を以下に記述します。画像ファイルは、ここでは仮に XXXX_1.jpg, XXXX_2.jpg という名称の２種類のJPEGデータとします。

PImage img1;
PImage img2;

void setup(){
  size(800,800);
  img1 = loadImage("XXXX_1.jpg");
  img2 = loadImage("XXXX_2.jpg");
}

void draw(){
  image(img1,0,0,800,800);
  image(img2,mouseX,mouseY,40,40);
}

上記のプログラムでは、image(img1,0,0,800,800)　のように記述することで画像ファイルの表示サイズをプログラムで変更しています。image()の各パラメータは以下のようになります。

image(画像を格納した変数, x座標, y座標, 幅, 高さ)

扱える画像フォーマット
Processingで扱うことのできるラスタ画像のファイルフォーマットは、JPEG、PNG、GIF になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

繰り返し構造について
プログラムでは繰り返しの構造を使うことで、ひとまとまりのコードを繰り返し実行することができます。繰り返しの構造を使うことで複雑な構造のプログラムを短いコードにできたり、プログラムにパターンを生み出すことなどができます。

forループ文
繰り返し構造を記述するコードとしてforループ文を使ったプログラムを作成してみましょう。
forループ文は以下のように記述します。

for(初期値; 条件式; 更新）{
　繰り返し実行されるコード
}

例）
for(i = 0; i < 100; i+=10）{ 　繰り返し実行されるコード } ・「初期値」で最初の値を設定します。 　forループ文では慣例的に変数 i が使われることが多い。 ・「条件式」で変数 i を評価します。 　変数　i の値を比べて条件にあわなくなるまで「繰り返し実行されるコード」を実行する。 　i > A　Aより大きい
　i < A　Aより小さい 　i >= A　A以上
　i <= A　A以下 　i == A　Aと等しい 　i != A　Aと等しくない ・「更新」で変数 i の値をどのように変化させるかを設定します。 　i+=10ならコードが実行されるごとに変数 i に10加算 i-=10なら10減算 i++は１加算 i--は1減算。 それでは、forループ文を使った繰り返し構造のプログラムを記述してみましょう。

void setup(){
  size(400,200);
}

void draw(){
  for(int i = 20; i < 400; i += 20){
    ellipse(i,100,20,20);
  }
}

二重の繰り返し構造
forループ文のなかにforループ文を記述することができます。
それでは、二重の繰り返し構造のプログラムを記述してみましょう。

void setup(){
  size(400,400);
  background(0);
  noStroke();
}

void draw(){
  for(int i = 0; i <= 400; i += 20){
    for(int j = 0; j <= 400; j += 20){
      fill(255,48,203);
      ellipse(i,j,15,15);
   }
  }
}

二重の繰り返し構造を使った別のプログラムを記述してみましょう。

void setup(){
  size(400,400);
}

void draw(){
  background(0);
  fill(252,145,3);
  stroke(250,240,48);
  for(int i = 0; i <= 400; i += 20){
    for(int j = 0; j <= 400; j += 20){
      ellipse(i,j,10,10);
      line(i,j,mouseX,mouseY);
   }
  }
}

課題２：
これまでに学んだ、点、線、面および色のコードと繰り返しの構造を組み合わせてグラフィック作品を作成してください。

変数について
変数とは、ある値をコンピュータのメモリに保存しておき、プログラムのなかで再利用できるようにするための仕組みです。

変数の作成
変数を作成するには、データ型、変数の名前、変数の値を考えて設定します。
変数を使う前には必ず変数の宣言をします。宣言とは、コンピュータのメモリにデータの値を格納する領域を確保することです。
変数の宣言をするためには格納する値にあったデータ型を定義し、名前を決めて値を設定します。

変数の宣言は以下のように記述します。

データ型　変数の名前　＝　値；

例）
int x = 10;

上の例は以下のように記述することができます。

int x;
x = 10;

ある変数に格納できる値や種類はデータ型で指定します。データ型には以下のようなものがあります。
・整数（小数点以下のない数値を扱うデータ型　マイナスの値をとることができる）
・浮動小数点（小数点を扱えるデータ型）
・文字
・単語
・画像
・フォント　など

変数には任意の名前を付けて設定をします。データの内容がわかりやすい名前を選んで設定しましょう。

変数を使った描画
それでは、変数を使って基本図形を描画してみましょう。

int d = 100; //変数の宣言

void setup(){
  size(400,400);
}

void draw(){
  ellipse(100,200,d,d);
  ellipse(200,200,d,d);
  ellipse(300,200,d,d);
}

上の例では１行目の　int d = 100;　にて変数の宣言が行われています。
int で整数のデータ型を定義し、変数の名前を d とし、変数 d に 100 という整数の値を代入しています。
変数 d の値を変更してプログラムがどのように変化するか試してみましょう。

int d; //変数の宣言

void setup(){
  size(400,400);
}

void draw(){
  d = mouseX; //変数に値を代入
  ellipse(100,200,d,d);
  ellipse(200,200,d,d);
  ellipse(300,200,d,d);
}

変数を使うことで３つの円が同じ値を受け取ることが確認できます。

カラーモードについて
Processingで色を表現するためにはカラーモデルを使って色を指定する必要があります。Processingで用いられるカラーモデルにはRGBモデルとHSBモデルがあります。

RGBモデルは、Red (赤)、Green (緑)、Blue (青) の三つの原色を混ぜて色を再現する加法混合の一種です。

HSBモデルはHue（色相）、Saturation（彩度）、Brightness（明度）の三つの成分から色を再現する方法です。

Processingでは、カラーモードを指定することで、RGBモデルとHSBモデルのいずれのカラーモデルを選ぶことができます。カラーモードは、以下のように設定します。

colorMode(mode, range1, range2, range3, range4);

mode 　RGBまたはHSB
range 　色を指定する値の範囲(intまたはfloat):省略可
range1   赤または色相の範囲(intまたはfloat):省略可
range2   緑または彩度の範囲(intまたはfloat):省略可
range3   青または明度の範囲(intまたはfloat):省略可
range4   透明度の範囲(intまたはfloat) :省略可

ProcessingのデフォルトのカラーモデルはRGBモデルになるため、RGBモデルで各色256段階の範囲で指定する場合は特にcolorMode()関数を使用する必要はありません。

色の設定について
Processingでは、背景の色、図形の線の色、図形の面の色をそれぞれ設定することができます。色を設定するための関数を以下に記載します。

背景の色
background(R,G,B);

線の色
stroke(R,G,B);

面の色
fill(R,G,B);

上記の関数のR,G,Bは色を表すパラメータで、R(Red:赤)、G(Green:緑)、B(Blue:青) の三つの原色を表しており、それぞれ0〜255までの数値で色を指定します。
0は色の最小値でそれぞれの色の成分が表示されません。255は色の最大値となります。

例：R, G, Bが0, 0, 0なら黒、255,0,0なら赤、255,255,255なら白

Processingでは色の選択に使えるツールが備わっています。メニューからTools>Color Selectorを選んで下記のウィンドウを表示し、カラーパレットから色を選択すると、RGB, HSBそれぞれの色の数値やカラーコードが表示されるので、この数値を参考にコード上の数値を記述します。

背景の色を設定する
背景の色を設定してみましょう。背景の色を設定するには、background()関数を使用します。

void setup(){
  background(0);
}

void draw(){
  
}

*background()関数をsetup()関数内で使用するか、draw()関数内で使用するかによって完成するアプリケーションの動作に違いが生じますので注意が必要です。（今後の講座にて解説予定）

線の色を設定する
基本図形の線の色を設定してみましょう。線の色を設定するにはstroke()関数を使用します。
また、線を描画しない場合にはnoStroke()関数を使用します。

void setup(){
  size(400,400);
  background(0);
}

void draw(){
  stroke(255,0,0);
  ellipse(100,200,100,100);
  noStroke();
  ellipse(300,200,100,100);
}

面の色を設定する
基本図形の面の色を設定してみましょう。面の色を設定するにはfill()関数を使用します。
また、面を描画しない場合にはnoFill()関数を使用します。

void setup(){
  size(400,400);
  background(255);
}

void draw(){
  fill(255,0,0);
  ellipse(150,200,300,300);
  noFill();
  ellipse(250,200,300,300);
}

透明度を設定する
図形の面の色や線の色を指定するstroke()関数やfill()関数に、透明度を設定する四つ目のパラメータを加えることで図形の透明度を設定できます。このパラメータをアルファ値と呼びます。

線の透明度設定：
stroke(R,G,B,alpha);

面の透明度設定：
fill(R,G,B,alpha);

アルファ値の値の範囲は0から255で、0にすると完全に透明になり（表示されない）、255にすると完全に不透明になります（アルファ値を指定しない場合と同じ）。
1から254までの値の範囲では半透明になり、下の色と混ざり合った透けた色が表現できます。

void setup(){
  size(400,400);
  background(255);
}

void draw(){
  stroke(255,0,0,125);
  fill(7,165,247,200);
  ellipse(150,200,300,300);
  stroke(0,255,0,100);
  fill(247,7,216,200);
  ellipse(250,200,300,300);
}

課題１：
基本図形と色の設定を使用してグラフィック作品を作成してください。
作品にはタイトルをつけてください。
画面サイズは400ピクセル X 400ピクセルとします。
提出先：学内共有フォルダ

Processingには、あらかじめ基本的な図形を描く関数が用意されています。以下に基本的な図形の描画方法を記載します。

点
point(x座標, y座標);

線
line(x座標1, y座標1, x座標2, y座標2);

方形
rect(x座標, y座標, 幅, 高さ);

三角形
triangle(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3);

楕円形
ellipse(x座標, y座標, 幅, 高さ);

四辺形
quad(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3, x座標4, y座標4);

描線の太さ
図形の描線の太さを変更できます。描線のデフォルトは1ピクセルですが、strokeWeight関数を使って変更できます。
以下のように記述します。

int x = 200;
int y = 200;
int w = 100;
int h = 100;

void setup(){
  
  size(400,400);
  
}

void draw(){
  
  strokeWeight(8);
  ellipse(x, y, w, h);
  
}

描画の順序
プログラムはコードの先頭１行目から順に読み込まれていくため、コードを書く順番は図形の重なり順などに大きく影響します。
重なり合う複数の図形がある場合は、最後に描かれた図形が一番上に重なって表示されます。

描画モード
図形を描画する際に、描画の基準点を設定することができます。
例えば方形の記述ではrectMode関数を使用して以下のように基準点を設定できます。

・rectMode(CORNER) rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ);　//デフォルトではこの基準点を使う
・rectMode(CORNERS) rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標);
・rectMode(CENTER) rect(中心のx座標, 中心のy座標, 幅, 高さ);
・rectMode(RADIUS) rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分);

コードは以下のように記述します。

int x = 200;
int y = 200;
int w = 100;
int h = 100;

void setup(){
  
  size(400,400);
  rectMode(CENTER);
  
}

void draw(){
  
  rect(x, y, w, h);
  
}

練習
基本的な図形を組み合わせてグラフィック作品を作成してみましょう。

Processingにおいて時間の経過とともに変化するグラフィックスを作成する場合には、Processingのストラクチャーを学び、効果的に利用することが必要になります。

それでは、まず以下のコードを記述してみましょう。

int x = 10;
int y = 10;
int w = 20;
int h = 20;

void setup(){
  
  size(400,400);
  
}

void draw(){
  
  ellipse(x+frameCount, y+frameCount, 20, 20);
  
}

記述したコードを実行してみましょう。
以下のように円が対角線上を移動するグラフィックスが表示されます。

このコードをもとにprocessingのストラクチャーについて学んでいきましょう。

このプログラムは以下の３つの部位で成り立っています。

１）グローバル変数の宣言と初期化
グローバル変数とは以下に説明する関数（setup関数とdraw関数）などから参照することができる変数の一種です。
（その他の関数および変数については今後学んでいきます）

int x = 10;
int y = 10;
int w = 20;
int h = 20;

２）setup関数
各種初期化で行う処理部分。アプリケーションが実行され、ウィンドウが開いたとき、最初に１度だけ実行されます。
setup関数では、画面（ウィンドウ）のサイズを決定するsize関数などの記述を行います。

void setup() {

// 一度だけ実行される処理

}

３）draw関数
アプリケーションが実行中に繰り返し実行し続ける処理部分。draw関数内に記述されたコードが終了するたびに新しいフレームがディスプレイ・ウィンドウに描画されコードが実行され続ける。
デフォルトの描画速度は１秒あたり６０フレーム（ １秒あたりのフレーム数はframeRate関数を使って変更することができる）。

void draw() {

// 繰り返し実行される処理

}

練習してみよう
上のコードの記述を変更して、様々なプログラムを作ってみましょう。
例）
・円が水平または垂直に移動するプログラム。
・円の大きさが変化するプログラム。

プログラミングの作成

プログラミングの動作を記述する一連の文字のことをコード（ソースコード）と呼びます。
Processingでは開発環境のウィンドウを開いて、その中でコードを記述していきます。

はじめにProcessingの開発環境ウィンドウについて簡単な図を掲載しておきます。

コードはProcessingの開発環境ウィンドウのテキストエディタの中に書き込んでいきます。
それでは、最初のプログラムを作成してみましょう。以下のコードを記述してください。

ellipse(50, 50, 80, 80);

コードが書けたら開発環境ウィンドウの実行ボタンを押してプログラムを実行してみましょう。以下のように円が描画できていれば最初のプログラムの完成です。

円あるいは楕円を描画するためには以下のようにコードを記述します。

ellipse(中心のX座標, 中心のY座標, 幅, 高さ);

先ほど描画した楕円（円）は、中心のX座標、Y座標がそれぞれ50ピクセル、幅と高さが80ピクセルの楕円（円）でした。
実行中のプログラムは開発環境ウィンドウの停止ボタンを押して停止させます。
それでは、数値を変えて、様々な楕円を描画してみましょう。

次に、もう少し複雑で面白いコードを書いてみましょう。以下のようにコードを書いて下さい。

void setup() {
size(480, 120);
}

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

コードが書けたら先ほどと同じように開発環境ウィンドウの実行ボタンを押してプログラムを実行してみましょう。以下のようなプログラムが実行されます。

このプログラムでは幅480ピクセル、高さ120ピクセルのウィンドウが開き、幅と高さが80ピクセルの白い円がマウスカーソルの位置に描画されます。マウスのボタンを押すと円は黒に変わります。

プログラミングの保存

Processingでは作成するプログラミングのことをスケッチと呼びます。それでは、スケッチを保存してみましょう。FileメニューのSaveコマンドを選択すると、Processingの開発環境のソフトウェアと同じ場所にあるsketchbookというフォルダに作成されたスケッチが保存されますが、この授業（愛知淑徳大学創造表現学部内の実習授業）ではFileメニューからSave As…というコマンドを選択し、Save As:と書かれた欄に任意の名称を入力し、Where:と書かれたプルダウンメニュー内の選択肢から「デスクトップ」を選んで保存するようにしてください。

（本項目の内容はProcessing公式サイト内の学習教材Getting Startedを引用して作成しています。）

本講座ではプログラミングを学習するための環境としてProcessingを使用します。
Processingはグラフィックスをプログラムで生成するうえで困難な各種設定などを必要とせず、コーディングに専念できるという特長があります。
また、Processingはグラフィックスだけでなく、音声や動画なども扱うことができ、それらを組み合わせてインタラクティブ（双方向性のある）な表現を可能にしてくれます。

それでは最初にProcessingがどういう経緯で制作されたプログラミング環境なのかを解説します。

Processingは当時マサチューセッツ工科大学メディアラボに在籍していたCasey ReasとBen Fryによって2001年に誕生しました。
その後2002年から2008年まで開発が続き、2008年秋からバージョン1.0がリリースされ、2013年にはバージョン2.0が、つづく2015にはバージョン3.0がリリースされ現在[2017年]に至っています。
ProcessingはJava(Java日本語サイト)というプログラミング言語の環境をグラフィック機能などに特化したものだと言えます。

Processingの作者であるCasey ReasとBen Fryは著書「Processingをはじめよう」の中で影響を受けた先行するプログラミング環境をあげています。
ひとつはLOGO(LOGOファウンデーション)で、教育のために開発されたプログラミング環境でした。この言語は児童の発達心理学の成果などが活かされており子どもが思考するための道具としての工夫がなされていました。ふたつめはDesign By Numbers(公式サイト)で、この言語はマサチューセッツ工科大学メディアラボのJohn Maedaによって開発されました。
Design By Numbersはデザイナーやアーティストといったプログラミングを専門としていない人でもプログラミングが可能となる環境を目指して作られており、数値によるグラフィックデザインの研究や教育に使われました。

上のような先行するプログラミング環境の思想や特徴の影響を色濃く受けたProcessingは、初心者にもわかりやすく、特にアーティストやデザイナーなどが創造や表現のためにプログラミングを使うことを学ぶ最初の一歩を踏み出すのに最適な言語です。