「超入門コード10選！」【Processing-3D】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
個人的に考える超基本的で必要だと考える3D用のProcessingのコードです。
（[「超必須コード10選！」【Processing】](https://qiita.com/umi_mori/items/f5b90c1ea7cf09e9b0c9)内の必須コードは省略しています。）

## 1. `size (500, 500, P3D);`
3D空間上で、**画面の横と縦の大きさ**をそれぞれ500pxにする。
Reference：[size();](https://processing.org/reference/size_.html)

## 2. `point(250,250,250);`
座標(250,250,250)の位置に**点を描く**。
Reference：[point();](https://processing.org/reference/point_.html)

## 3. `box(10, 20, 30);`
幅10px、高さ20px、奥行き30px（x,y,z軸方向それぞれに10,20,30pxの長さ）の**直方体を描く**。
Reference：[box();](https://processing.org/reference/box_.html)

## 4. `sphere(100);`
半径100pxの**球体を描く**。
Reference：[sphere();](https://processing.org/reference/sphere_.html)

## 5. `translate(100,100,100);`
x,y,z軸方向それぞれに100ずつ図形を描く**基準の位置をずらす**。
Reference：[translate();](https://processing.org/reference/translate_.html)

## 6. `rotate(PI/4);`
π/4（45度）だけ図形を描く**基準の向きをずらす**。（z軸方向）

- `rotateX(PI/4);`：X軸方向にずらす。
- `rotateY(PI/4);`：Y軸方向にずらす。
- `rotateZ(PI/4);`：Z軸方向にずらす。

ラジアンを実数値で渡す形になるため、もしも度数法で渡したい場合は、`radians();`を用いるとよい。
例）`rotateX(radians(45));`

Reference：[rotate();](https://processing.org/reference/rotate_.html)

## 7. `camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);`

- eyeX, eyeY, eyeZ
**カメラの位置**の座標を入力。

- centerX, centerY, centerZ
**画面の中心位置**（もしもその時の基準点を中央にしたい場合は、全て0にする）

- upX, upY, upZ
**カメラの向き**（基本的に0.0 / 1.0 / -1.0 のいずれかを入力）

Reference：[camera();](https://processing.org/reference/camera_.html)

## 8. `lights();`
基準の位置に基準の向きで**ライトを照らす**。
より細かいライトの設定をする場合、次のコードを用いる。

|コード|意味|
|---|---|
| ambientLight();|周囲光源|
| directionalLight();|平行光源|
| pointLight();|点光源|
| spotLight();|スポットライト|
| noLights();|ライト無し|

Reference：[lights();](https://processing.org/reference/lights_.html)

## 9. `オリジナルの図形（Custom 3D Shape）`
主に用いるコードは次の三つである。

- `beginShape();`
図形の定義を始める時に書くコード。

- `endShape();`
図形の定義を終える時に書くコード。

- `vertex();`
図形の要素を書くためのコード。

Reference：[beginShape();](https://processing.org/reference/beginShape_.html)、[endShape();](https://processing.org/reference/endShape_.html)、[vertex();](https://processing.org/reference/vertex_.html)

例として、3D空間上に四角形を描くときは次のように描ける。

\>>サンプルコード（customShape.pde）

```java:customShape.pde
void setup(){
  //settings
  size(500,500,P3D);
  translate(250,250,0);
  rotateX(radians(45));
  rotateZ(radians(20));

  // writing custom shape
  beginShape();
  vertex(10, 10, 0);
  vertex(100,  10, 0);
  vertex(100,  100, 0);
  vertex(10,  100, 0);
  vertex(10, 10, 0);
  endShape();
}
```
\>>出力結果（customShape.pde）
<img width="500" alt="スクリーンショット 2018-10-29 13.32.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/b9489fa3-4660-84f7-89ec-f9be43720028.png">

\>>説明（customShape.pde）
`vertex();`で、各座標を順番に辿り、図形を描いている。
出力で立体的な視点になっているのは、基準点の角度を`rotateX();`と`rotateZ();`で変えているため。

<img width="366" alt="スクリーンショット 2018-10-29 13.36.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/bb786adf-c02b-9323-395e-89c352791885.png">

## 10. `ortho();`
**遠近感のない立体**にする。

Reference：[ortho();](https://processing.org/reference/ortho_.html)

\>>サンプルコード（ortho.pde）

```java:ortho.pde
void setup(){
  //settings
  size(500,500,P3D);
  translate(250,250,0);
  rotateX(radians(45));

  //changing to ortho setting
  ortho();

  // making the box object
  box(100,100,100);
}
```
\>>出力結果
（ortho.pde）
<img width="500" alt="スクリーンショット 2018-10-29 13.45.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/1624291a-d5f5-520f-6879-8271294fac23.png">

# Tips ： `OPENGL`で高速/高精度に描画する

OPENGLとは、**高速かつ高精度**に3D空間を表現できるためのライブラリである。

やること
- `import processing.opengl.*;`でライブラリをインポートする
- `size(500,500,OPENGL);`でP3Dではなく、OPENGLにする

\>>サンプルコード（OPENGL.pde）

```java:OPENGL.pde
//importing the library
import processing.opengl.*;

void setup(){
  //settings - sets to OPENGL in size();
  size(500,500,OPENGL);
  translate(250,250,0);
  rotateX(radians(45));

  // making the box object
  box(100,100,100);
}
```

\>>出力結果（OPENGL.pde）

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)