3Dグラフィックス

https://gyazo.com/d0b1414b74f9d3f51ab8ac0e3eec4768

スケッチの作成

Processingを起動して,新規にスケッチを保存しましょう. メニューから[ファイル]-[名前を付けて保存]をクリックして,「スケッチフォルダを名前を付けて保存」を開きます. ファイル名に「Project9」を入力し,[保存]をクリックしましょう. 保存先に「Project9」という名前のフォルダが作成されていることを確認してください.

https://gyazo.com/7810b7309c73d90d82f24ed94c334a84

3次元グラフィックス

Processingは,これまで学んできた 2Dグラフィックス だけでなく, 3Dグラフィックス の描画も可能です. 3Dグラフィックスを描画するには,「 P3D(Processing 3D) 」または「 OpenGL 」の いずれかの レンダラ を指定しますが,ここでは標準の P3D を採用することにします. P3D を指定すると,2次元の座標系(x,y)が,3次元の座標系(x,y,z)に変更されます(z軸は 奥行き を表します).

まずは,下記のコードを参考に,size()関数で P3D を指定しましょう. また,rect()関数で,1辺の長さが200の正方形を描きまます. ここで,translate()関数を利用して, 原点 をウィンドウ中央に変更していることに注意してください. Runボタンをクリックしたら,正方形が画面中央に描かれることを確認してください.

https://gyazo.com/83a70fd123b2f0ebc923bc59ecae8929

このままでは,座標系が3次元に変更されているか確認出来ません. そこで,マウスの動きに合わせて正方形を,X軸とY軸を中心に回転させてみましょう. X軸まわりに回転させるにはrotateX()関数,Y軸まわりに回転させるにはrotateY()関数を利用します. いずれも引数には回転する角度を ラジアン角 で指定します.

下記を参考にコードを入力したら,Runボタンをクリックしてください. ドラッグしたままマウスを動かすと,正方形が回転することを確認してください.

https://gyazo.com/1123ca80c8fc17b47d3461510bd4699a

https://gyazo.com/c9ba324e73068c5d8f0a770ddde57df9

立体的な図形の描画

立体的な図形を描画してみましょう. 直方体を描画するにはbox()関数を利用します. box()関数の引数には,直方体の幅(width),高さ(height),奥行き(depth)を指定します. box()関数で描かれた直方体は原点を中心に描かれることに注意してください.

box(width, height, depth);

下記を参考にコードを入力したら,Runボタンをクリックしてください. ドラッグしたままマウスを動かすと,直方体が回転することを確認してください.

https://gyazo.com/b38f29c403eb34cf3216ce6c69b55359

球を描画するにはsphere()関数を利用します. sphere()関数の引数には,半径(radius)を指定します. sphere()関数で描かれた球は原点を中心に描かれることに注意してください.

sphere(radius);

下記を参考にコードを入力したら,Runボタンをクリックしてください. ドラッグしたままマウスを動かすと,球が回転することを確認してください.

https://gyazo.com/835c7d239acb17b8b8deb3af96369fe3

立体図形にもfill()で塗りつぶしの色,stroke()で線の色を設定することが可能です(球の補助線を消すにはnoStroke()を設定します). ここでは,塗りつぶしの色を赤#ff0000,線の色を黄色#ffff00に設定します.

Image from Gyazo

光源の設置

立体的な図形に陰影をつけるには空間に光源を設置します. 光源には 環境光指向性ライト点光源 などの種類があります.

環境光は,全方向から図形に対して均一の光を照らします. 全方向から照らすため影は出来ないことから,他の光源と組み合わせて用いるのが一般的です. 環境光を設置するには,ambientLight()関数を用います. 引数には三原色(R,G,B)の光の強度を0~255の範囲で設定します.

ambientLight(R, G, B);

下記を参考にコードを入力したら,Runボタンをクリックしてください. 直方体全体の色が変化していることを確認してください.

https://gyazo.com/092c6fb953d18c591f5f2c7fe63a810e

指向性ライトは,特定の方向に向かって進む光です. 光が垂直な面に当たったときに,もっとも明るくなります. 指向性ライトを設置するには,directionalLight()関数を用います. 引数には三原色(R,G,B)の光の強度に加え,光の進む方向(NX, NY, NZ)をX軸,Y軸,Z軸それぞれに-1~1の範囲で設定します. 例えば,方向が(1, 0, 0)のときはX軸の正の方向,(0, -1, 0)のときはY軸の負の方向に光が進みます.

directionalLight(R, G, B, NX, NY, NZ);

下記を参考にコードを入力したら,Runボタンをクリックしてください. ここでは,X軸の正方向に光を照らしています. 光が当たる面の色が変化していることを確認してください.

https://gyazo.com/b5bc5bdf46a0591bea665b629a167051

点光源は,指定した位置から全方向に放射される光です. 指向性ライトと同様に,光が垂直な面に当たったときに,もっとも明るくなります. 点光源を設置するには,pointLight()関数を用います. 引数には三原色(R,G,B)の光の強度に加え,光源の位置(x,y,z)を設定します.

pointLight(R, G, B, X, Y, Z);

下記を参考にコードを入力したら,Runボタンをクリックしてください. ここでは,座標(-320, 0, 0)から光を照らしています. 光が当たる面の色が変化していることを確認してください.

https://gyazo.com/ef8efe22af4fbf1af78112324b850554

課題

次のように1つの直方体と2つの球を配置し,Y軸を中心に自動で回転させなさい. 原点を移動させるにはtranslate(x, y, z)を用いる. 課題が完成したら,作成したスケッチを ZIPアーカイブ 形式で保存します. ZIPアーカイブを作成するには,メニューから[ツール]-[スケッチをアーカイブ]をクリックして,「スケッチを名前を付けてアーカイブする」を開きます. 保存するファイル名を確認した上で,[保存]をクリックします. 保存先に「Project9-日付a.zip」というファイルが作成されていることを確認してください.

Image from Gyazo

参考書籍

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです. 専門は情報科学であり,人工知能やデータベースなどの技術要素を指導しています. この公式サイトでは,授業で使用している教材を公開すると共に, ベールに包まれた女子大教員のミステリアスな日常を4コマ漫画でお伝えしていきます. サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください.