Published Date : 2020年7月3日20:06

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

This blog has an English translation

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.


Table of Contents

Unity Side Configuration

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

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


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.

Creating Unity Scripts


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.


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


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 converts HSV values to RGB colors.


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


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


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!