TORIMAGURO生活

Touchdesigner/Processing/Unityを一年で学んだちょっと外れた建築学生

Processingが動く仕組みをザックリ解説

ではProcessingで0からコーディングをはじめましょう!!

 

 

Processingの大きな骨格を理解しよう

まず呪文のように毎回使われるコードがこれ!これをまず書きましょう

 

f:id:torimaguro:20181116211902p:plain

 

void setup() {

}

 

void draw() {

}

 

これらはPrcessingのアニメーションの一番大きな骨格であるコードで、何を作るにもまずこれを書いて、どんどんここに書き足していきます

 

とりあえずイジる!

では、それぞれの中括弧の中に以下を真似しながら書き足してみてください

f:id:torimaguro:20181116212413p:plain

 

void setup() {

size(500,500);

}

 

void draw() {

background(0);

rect(0,0,100,100);

}

 

 

ここでプログラミングする上での注意!

コードを書くときは、全角、半角に注意してください。それが違うだけで全然動いてくれないです笑

コードは基本半角英数字でかかれます!

 

そして左上の実行ボタンをクリック!

f:id:torimaguro:20181116212830p:plain

 

うまくいけば下のようにウィンドウが開いて白い四角形が表示されるはず!

 

f:id:torimaguro:20181116213220p:plain

おめでとうございます!これがあなたの作品第一号です!

って、しょぼいですよね笑

Processingの力はこんなもんじゃないので安心してください

 

結果をもとに細かい仕組みを考察しよう!

ここで、先ほどの映像が、どういった仕組みになっているか見ていきましょう

 void setup() { } 

まずvoid setup() { }の中括弧の中にsize(200,300);を追加しました

void setup() { }

の中括弧の中は、初期設定を書き込む場所で、ここにウィンドウの大きさ、描画方法の種類(2Dを書くか3Dを書くか等)を記述して、文字通りセットアップをします。

size(ウィンドウの幅の大きさ,ウィンドウの縦の長さ);

はProcessingの組み込み関数(後で解説)の一つであり、ウィンドウの大きさを定義する命令文です。

つまりここでは、アニメーションの設定としてウィンドウの大きを幅500、縦500に設定する と言うことになります。

実際、値を変えてもう一度実行して見てください。自由にキャンバスの大きさが変わるはずです。

 

void draw() { }

次に void draw() { }の中括弧の中にrect() { }; を追加しました

void draw() { }

の中括弧の中は、毎フレームごとに何を表示させるかを命令する場所で、ここに、図形の種類(点、線、折れ線、三角形、四角形、、、、)とその座標、その図形の塗り潰しの色や枠線の色などを記述して、文字どうりプロセッシングが、命令どおり描画してくれます。

rect(x座標、y座標、縦幅、横幅);

は先ほど同様組み込み関数の一つであり、四角形(rectangle)を書くための命令文です。

つまりここでは、x座標が0、y座標が0、の位置にヨコ500、タテ500の四角形を描画してください

と命令しています。

試しにその下に

ellipse(60,40,100,80);

を追加してみてください。

f:id:torimaguro:20181116233420p:plain

このように円が四角形の上に重ねて描かれます。

これは円を描画する命令で

ellipse(x座標、y座標、長軸の長さ、短軸の長さ);

のように使います。

 

組み込み関数とは

size(ウィンドウの幅の大きさ,ウィンドウの縦の長さ);

rect(0,0,100,100);

ellipse(x座標、y座標、長軸の長さ、短軸の長さ);

 

はProcessingが用意してくれた関数(値のインプットに対して図形を表示するなどの操作をする)で、この3つ以外にもいろいろあります

https://processing.org/reference/

drawの内容は上の行からから下の行に毎フレーム処理される

いま、実行結果は静止画のようですが、実は短い時間に何枚ものフレームを表示している、いわゆる動画です。プロセッシングが行う処理は

setupの処理→draw関数の処理→draw関数の処理→drawの処理....と何度もdraw関数の命令を上から下に処理して行きます。なので、先ほど作ったプログラムの実行結果は全然動きがない静止画っぽい見た目だけれど、実際は同じ絵を何回も切り替えているんです!

 

  まとめ

このように、Processingは

 

setup() {

初期設定

}

draw() {

毎フレームの処理

}

 

のように命令することでアニメーションを生成してくれるのでした!

これをもとに、Processingをジャンジャンいじっちゃってください!!

 

では〜