Processingを始めてみよう！

processingを始めてみよう！

Processingとは？

Processingとは、無料で利用することができるJavaベースのIDE（統合開発環境）です。特徴としては、Processingはアートワークを作る際にはJavaベースのプログラミング言語で記述する必要があります。しかしJavaといってもプログラミングにあまり親しみのない学生、アーティスト、デザイナーなどにも扱いやすい様に詳細な関数設定を排除することで短いコードでアート―ワークを作成できるものとなっています。

Processingを使ってみよう！

Processingの大きな特徴の一つが、すぐに始められるということです。複雑な設定は何も必要ありません。オープンソースプログラムであるので、ライセンスもいりません。公式サイトでアプリをダウンロードしても良し、OpenProcessingというブラウザでも実行できるprocessingを使用するも良し、Sublime Text というコーディングに特化したテキストエディタでも使用することもできます。またProcessingはスマートフォン/タブレットでもサポートされており、iOS,Androidに関わらずアプリを利用することができます。

Processingの基本

では実際にProcessingを開いて色々と試していきましょう。今回はアプリケーションをダウンロードしたものを使用していきます。実際の画面がこちらです。

ウィンドウサイズ

Processingでは、アートワークを作る際のウィンドウサイズを指定することができます。size()というコマンドを用いてサイズを指定するのですが、かっこの中身にはパラメータという数値が入り、画面のサイズを指定することができます。ひとつ目のパラメーターはウィンドウの横幅を、ふたつ目のパラメーターはウィンドウの縦幅を指定します。単位はpx(ピクセル)です。

size(ウィンドウの横幅,ウィンドウの縦幅);

座標軸について

Processingでは、場所を指定する際には、座標軸を用います。学生の頃に数学のグラフなどで、ｘ、ｙを用いて座標を指定しましたよね？Processingでも同じようにⅹ軸、y軸で場所を指定していきます。この際、原点とⅹ軸、y軸の方向に注意が必要で、原点（0.0）は左上の隅となっており、そこから右方向にⅹ軸、下方向にy軸が伸びています。

実際にコードを書いていきましょう。

void setup() {
  size(300,300);
}
 
void draw() {
  background(255);
 strokeWeight(30);
point(150,150);
}

いきなりたくさんのコードが出てきて、混乱するかもしれませんが、各要素について理解すれば、単純なコードであることがわかると思います。

・void setup() {　}……これを宣言することによって、前提となる要素を指定することができます。アニメーションを作成する際に、前提となる設定を指定することが必要です。{}の中に要素を指定します。

・void draw() {　}……これを宣言することで、ここからアニメーションについての記述であることを示しています。

・size(300,300);……これでウィンドウサイズを設定します。x軸、y軸の順番 なっています。

・background(255);……これで背景の色を指定しています。グレースケール値で設定することができ、255は白色となっています。

・strokeweght(30;)……これは線の太さを指定することができます。

・pont(150,150)……指定した座標に点を打ちます。

注意点ですが、各要素の最後には必ず『；』を記述することを忘れないようにしてください。

他にも簡単な図形であれば以下のコードを記述することで作成することができます。パラメータの数値を変えて試してみてください。

円形

ellipse(円形の中心のx座標　,　円形の中心のy座標　,　円の横幅　,　円の縦幅);

四角形

rect(四角形左上のx座標　,　四角形左上のy座標　,　四角形の横幅　,　資格形の縦幅);

三角形

triangle(一つ目の点のx座標　,　一つ目の点のy座標　,　二つ目の点のx座標　,　二つ目の点のy座標　,　三つ目の点のx座標　,　三つ目の点のy座標);

この時に、width/2で横幅の半分、height/2で縦の幅の半分を指定することができます。

線を引く

line(始点のx座標,　始点のy座標　,終点のx座標　,終点のy座標);

上記のコマンドで線を引くことができます。では、縦半分の線を引くには、どのようにコードを記述すればよいでしょうか。

答えはこうなります。

void setup() {
  size(300,300);
}
 
void draw() {
  background(255);
 line(150,0,150,300);
}

上手くできましたか？座標の指定の仕方によって様々な線を引くことが可能です。

日本語表示について

最後に日本語を表示させる方法について説明していきます。Processingでは、デフォルトでは日本語のテキストをプログラム上で表示させることができず、文字化けを起こしてしまいます。また、設定によってはコンソール上の日本語もこのように文字化けしていることもあります。そのような場合には、メニューから、「ファイル」→「設定」を選択して、「言語」の部分を「日本語」に、「エディタとコンソールのフォント」を「MSゴシック」または「MS明朝」など日本語表示に対応したフォントに変更することで対処できます。自分も一番初めに触った時には、コンソール上でも文字化けを起こしてしまっていたので、少し焦りました…

文字化けしていますね…

これでコンソール上でも日本語表示となります。

では、今度はプログラム上での日本語表示について説明していきます。まずはこのコードを記述してみましょう。

void setup() {
  size(250,250);
}
 
void draw() {
  background(255);
  textSize(25);
  fill(0);
  text("hello world", 50, height/2);
}

このように、英語では「Hello world」と表示されますが、日本語では…

void setup() {
  size(250,250);
}
 
void draw() {
  background(255);
  textSize(25);
  fill(0);
  text("こんにちは", 50, height/2);
}

プログラム上で日本語を表示させる為には、プログラムで使用するフォントを指定する必要がでてきます。これがそのプログラムコードです。

PFont font = createFont("MS Gothic",50);
textFont (font);

そしてフォント指定のプログラムコードを書き加えたプログラムコードがこちらになります。

void setup() {
  size(250,250);
PFont font = createFont("MS Gothic",50);
textFont (font);
}
 
void draw() {
  background(255);
  textSize(25);
  fill(0);
  text("こんにちは", 50, height/2);
}

まとめ

今回はProcessingについての基礎を紹介してきました。Processingは初心者の方でも理解しやすいものとなっているので、興味があればアニメーションにも挑戦してみてください。