001 - Generative DesignをUnityで再現してみよう
001 - Reproduce Generative Design in Unity

YouTubeにアップした動画、「001 - Generative DesignをUnityで再現してみよう」の補足説明の記事です。

Here's a little more about the 「001 - Reproduce Generative Design in Unity」 video I uploaded to YouTube.

Generative Design（ProcessingやP5.js）で使われているコードをUnityで再現してみようという企画です。 「Generative Design-Processingで切り拓く、デザインの新たな地平」という名前で販売されている本のGithubで公開されているコードを使用しています。

This project aims to reproduce the code used in Generative Design (Processing and P5.js) in Unity. I am using code published on Github in a book sold under the name "Generative Design: Visualize, Program, and Create with Processing".

無駄な説明を省いて、忙しい時でも短時間で理解できるような動画です。

It's a video that can be understood in a short period of time even when you're busy, without any unnecessary explanation.

まずはGenerative DesignのGithubページに行き、コードの挙動を確かめます。

First, Go to Generative Design's Github page to see how the code behaves.

次にUnityを起動して、３Dキューブとマテリアルを作成して、カメラを適切な位置に移動して調整します。

You then launch Unity and create a 3D cube and material to move and adjust the camera to the appropriate position.

マテリアルの色見が暗いなら、[Window][Rendering][Lightning Settings]と順に進んでいき、[Auto Generate]にチェックを入れます。

If the color of the material is dark, go through [Window] [Rendering] [Lightning Settings] and check [Auto Generate].

そして新しいスクリプトを作成して、Generative Designのコード[P_1_0_01]をUnity用に書き換えます。

You then write a new script to rewrite the Generative Design code [P_1_0_01] for Unity.

NewBehaviourScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{

    float m_Hue;
    float m_Saturation;
    float m_Value;
    float cubeWidth;
    float cubeHeight;

    Camera cam;
    GameObject cube;
    Vector3 pPos;

    // Start is called before the first frame update
    void Start()
    {
        cam = this.gameObject.GetComponent<Camera>();
        cam.clearFlags = CameraClearFlags.SolidColor;
        cube = GameObject.Find("Cube");
        m_Saturation = 1.0f;
        m_Value = 1.0f;
    }

    // Update is called once per frame
    void Update()
    {
        Vector3 mousePos = Input.mousePosition;
        mousePos.x = Mathf.Clamp(mousePos.x, 0.0f, Screen.width);
        mousePos.y = Mathf.Clamp(mousePos.y, 0.0f, Screen.height);
        mousePos.z = 10.0f;
        m_Hue = Map(mousePos.y, 0.0f, 404.0f, 0.0f, 1.0f);
        cubeWidth = Map(mousePos.x, 0.0f, 539.0f, 0.1f, 6.1f);
        cubeHeight = Map(mousePos.x, 0.0f, 539.0f, 0.1f, 4.6f);
        cam.backgroundColor = Color.HSVToRGB(m_Hue, m_Saturation, m_Value);
        cube.GetComponent<Renderer>().material.color = Color.HSVToRGB(1 - m_Hue, m_Saturation, m_Value);
        cube.transform.localScale = new Vector3(cubeWidth, cubeHeight, cubeWidth);

        if (Input.GetMouseButtonDown(0))
        {
            pPos = cam.ScreenToViewportPoint(mousePos);
        }
        if (Input.GetMouseButton(0))
        {
            Vector3 dir = pPos - cam.ScreenToViewportPoint(mousePos);
            cam.transform.RotateAround(new Vector3(), new Vector3(1, 0, 0), dir.y * 360);
            cam.transform.RotateAround(new Vector3(), new Vector3(0, 1, 0), dir.x * 360);
            pPos = cam.ScreenToViewportPoint(mousePos);
        }
    }

    float Map(float value, float start1, float stop1, float start2, float stop2)
    {
        return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
    }
}

スクリプトを作成して、ダブルクリックすると自動でVisual Studioが開きます。

Create a script and double-click it to automatically open Visual Studio.

デフォルトで用意されているvoid Start()とvoid Update()はProcessingで使われているvoid setup()とvoid draw()と同じ動きをします。

The default void Start() and void Update() functions the same as the void setup() and void draw() functions used in Processing.

void Start()でカメラのバックグラウンドカラーをソリッドにして、カメラオブジェクトとキューブオブジェクトを取得して、HSVカラーのSaturationとValueの値を設定します。

In the void Start() function, make the camera background color solid, get the camera and cube objects, and set the saturation and value of the HSV color.

そしてvoid Update()でマウスの座標を取得していきます。

Then we get the mouse coordinates in the void Update() function.

Mathf.Clampで画面が表示されている範囲内でマウスの座標を取得するようにします。

Use Mathf.Clamp to get the coordinates of the mouse within the area of the screen.

Processingで使うMap関数を別でC#バージョンで作成しておきます。

Create a Map function for Processing in the C# version.

参考にさせて頂いたサイトです。渡された数値をある範囲から別の範囲に変換する方法について

This is the site I used it as a referred to.About converting numbers passed in from one range to another

Color.HSVToRGBはHSVの値をRGBカラーに変換します。

Color.HSVToRGB converts HSV values to RGB colors.

そしてcube.transform.localScaleでキューブの大きさをマウスと連動させます。

Then use cube.transform.localScale to resize the cube as you move the mouse.

続いてせっかくUnityで作るので、3D視点を加えていきます。

Then, Since we are going to make this with Unity3D, let's add a 3D viewpoint to it this time.

マウスでカメラ視点を動かすスクリプトをこのYouTubeビデオ（HOW TO ROTATE THE CAMERA AROUND AN OBJECT IN UNITY (EASY TUTORIAL)）から拝借しました。

I borrowed a script from this YouTube video（HOW TO ROTATE THE CAMERA AROUND AN OBJECT IN UNITY (EASY TUTORIAL)） that moves the camera's point of view with a mouse.

以上です。お疲れ様です。

That's all. Thank you for your hard work.

See You Next Page!