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をジャンジャンいじっちゃってください!!

 

では〜

百均でVR入門!

普段はsketchup や unity、Mayaを使って建築物などの3Dモデルを作って遊んでいるのですが

ふと、そうやって自分で作った3DモデルをVRやARを使って実寸大で眺められたらな〜という衝動にかられました

 

ということで、早速VRの入門として買ったのがコレ!

f:id:torimaguro:20181020150336j:image

百均VR!!

もちろん税込108円!

自分が持っているスマートフォンをセットする事でVRゴールとして使うことができるようですね

 

どこで売ってる??

私は最終的に can do でゲットすることができました。が、1回目に行った100円ショップでは売ってなかったので、どうやらどこの100円ショップでもあるわけではなさそうですね〜

 

開封

袋はこんな感じ

f:id:torimaguro:20181020153514j:image

開けると2つのレンズがついたダンボール製の本体が

f:id:torimaguro:20181020153551j:image

手順通りダンボーるを折って組み立てると...

f:id:torimaguro:20181020153700j:image

完成!

さっきまでぺったんこだったのにこのボリュームになるとは。

100円ショップ大好き笑笑

 

使用してみる

早速テキトーにジェットコースターのVRアプリ「VR Roller Coaster by Frag, LLC」を自分のiPhoneにダウンロードして、どんな感じで写ってくれるのか試してみることに

 

感想

スマホのディスプレイを一枚のレンズを通して見る仕組みでなので、ピクセルが拡大されて画質は結構アライですが、それはしょうがないですね。その点流石にOculasなどのホンモノには及びませんが、100円でこれは楽しすぎる!!笑

なによりも、今まで使い倒して来たiPhoneにこんなポテンシャルがあったということに驚き...

 

調べてみるとこの100円VR

G○○gle C○r○b○a○dにそっくり!

ちなみに本家は2000円弱

それでも十分やすいですが、百均VRはそのさらに20分の1で買えちゃうあたり、百均の企業努力すばらしい。

 

これからやりたい事

とりあえずunityでGoogle cardboard(もう言ってしまう笑)向けのSDKがあるようなので、それを使ってiOSで動いてくれるアプリ開発を進めていこうと思います。まずは今まで作った建築物の3DモデルをVRで表示できるようにしたい!!

 

ではまた〜

 

 

Processingでプログラミングを始めよう!

f:id:torimaguro:20181012012959j:plain

Processing(プロセッシング)とは?

 

Processingは簡単に言えば「プログラミングを使ってアニメーションを作ったりお絵描きするソフト」です!

2次元(平面)も、3次元(立体)も対応してます!

 

また、パソコンのマイクやカメラからのリアルタイムデータも用いることができるので、例えばオーディオビジュアライザーを作ったり、映像をリアルタイムで加工したりと、幅広い作品が作れます

 

そんなProcessingを使ってプログラミングを学ぶ大きなメリットとしては

  • 実行結果がアニメーションだからモチベが上がる
  • オブジェクト指向など、プログラミングの難しい部分も遊びながら実験できる

が挙げられます

 

Processingとの出会い

高校を卒業してから大学が始まるまでの期間、ふと何か新しいことを始めたいなあと思い

「あ、プログラミングってかっこいいし、役立つじゃん!」

と、特に目的もなく漠然とプログラミングの勉強を始めました笑

そこで手始めに勉強し始めた言語がPythonでした

 

しかし3カ月で挫折笑

 

そんなこんなで、ある日ふとした理由で出会ったのがProcessingでした。

そしてどっぷりはまってしまって笑

今では始めて4カ月ほどですが、オブジェクト指向なども取り入れられるまでになりました。

 

一度プログラミングに挫折した私を救ってくれたProcessing様

本当に感謝しています笑

 

ではこんなにもハマれた理由はなんだったのでしょう?

 

Processingでのプログラミング入門を勧める理由

 

ズバリ楽しいから! 

Processingではプログラミングの成果が図形やアニメーションでとにかく楽しい!

それに加えて、「もっと面白いアニメーションを作るにはどうしたらいいだろう?」

自ずと探究心が湧いてきます!

 

人は何事も目的がないとモチベーションを保てないものです

その点Processingは成果が図形、アニメーションなので、Processing入門として優秀なツールだなと感じます

 

汎用性がある

Processingの言語はJavaですが、プログラミング言語同士演算子などの表記はだいたい同じです

なのでProcessingでJavaを使ってプログラミングの仕組みを勉強すれば、ほかの言語を勉強するときに結構今までの知識が役に立ちます

特にオブジェクト指向など、プログラミングの難しい部分も遊びながら実験できるのがいい!

 

とにかく行動! 

なんとなくプログラミングを始めたいな~と思っている方!

 

迷っているくらいならProcessingで気軽に楽しくプログラミングを始めちゃいましょう!

 

Processingダウンロードページ

Download Processing.org

 

 

「トリマグロ生活」始めました

大学一年で建築を学んでいるものです〜

 

半年間大学で生活して、建築に限らずいろんな趣味に出会って、いろんなジャンルの本を読んで、いろんな考え方に出会って、、、、頭の中で常に色々考えていました。

 

でも反省点が一つ。

 

アウトプットできてないいい!!

 

自分はを大学で学んでいるわけですが、建築に関して言えば、グローバル化やインターネットの普及、デジタル技術の発展、人口減少を受けて、職業としてすごく多様化しているんだなーと感じています。

戸建て住宅からリノベーション、都市計画、さらにはデジタル技術の発展に伴って、AR,VR等のバーチャル空間の構築というソフト的なものを扱ったり、建築が絡むものって結構幅広い。。。

その現状を目の当たりにして、自分はこれからどのように社会に貢献できるのか、毎日考えさせられます、、

 

ただ、、頭の中で考えていても始まらない!

 

実際に手と足を動かしつつ、いろんな情報を掴んで、みんなに発信できたらいいなと思います!

 

目指すはトリマグロ!!

 

とりあえず(トリマ)行動する!

マグロのように泳ぎ続ける!