최근에 나는 현대 예술에 대해 매우 흥미를 느낀다
p5.js 같은 거 뭐 CG 예술 작품 만들려고
이런 CG 작품이 많이 투고된 사이트가 있어요.
만약 Codepen 같은 것을 엿본다면, 열람 중에 항상 오른쪽에 있는 GUI로 CG의 매개 변수를
변경할 수 있는 부품이 있어서 그게 뭔지 계속 생각해 봤습니다.

dat.GUI

Codepen
구글 데이터 아트 부서에서 만든 자바스크립트
매개변수 변경을 위한 그래픽 가벼운 UI
간단한 글쓰기로 GUI를 추가 입력할 수 있기 때문에 CG 아트 근처에서 많이 사용하는 것 같다.

React + dat.GUI

dat.이제 GUI에서 Javascript 변수를 변경할 수 있습니다.
React는 단방향 데이터 바인딩입니다.
React 및datGUI를 조합하고 싶다면,dat.GUI 매개변수를 변경할 때 setState()를 실행해야 합니다.
이 방면의 경험 기술을 실천해 보았기 때문에 공유하고 싶습니다.

제작 항목

create-react-app으로 빠르게 제작합니다.
요즘 바쁘니까 Typescript로 해요.

yarn create react-app react_dat --template typescript

원하는 라이브러리 추가

dat.동적 입력 프롬프트에서 클릭
unstated-next로 state 관리

dat.gui

@types/dat.gui

unstated-next

yarn add dat.gui @types/dat.gui unstated-next

unstated-next

unstated-next는 React Context Hook을 사용하기 쉬운 라이브러리입니다.
기본 개념으로 삼다

Container 객체

의 관리, 변경 공지 스테이트 제작

<Container.Provider> 패키지 구성 요소

소포 내부Container.useContainer()에서state

를 사용할 수 있습니다

state가 변경되면 Provider가 포장 중인 구성 요소 트리 업데이트

이런 느낌?
위대한 선구자의 해설 기사가 있으니 저쪽을 보면 된다
Tutorial

GUIContainer 만들기

React Hooks를 많이 사용합니다.

useState

useMemo

dat.GUI 객체에 Memonize(다시 렌더링해도 동일한 메모리 위치를 사용하는 객체)

useEffect

gui에만 속성을 처음 추가

GUI.ts

import dat from 'dat.gui'
import { createContainer } from 'unstated-next'
import { useState, useMemo, useEffect } from 'react'

const GUIContainer = createContainer(() => {
    const [message, setMessage] = useState('dat.gui')
    const [speed, setSpeed] = useState(0.8)
    const [flag, setFlag] = useState(false)
    const [fruit, setFruit] = useState('apple')
    const [number, setNumber] = useState(1)

    const gui = useMemo(() => new dat.GUI(), [])

    useEffect(() => {
        gui.add({ message }, 'message').onChange(value => setMessage(value))
        gui.add({ speed }, 'speed', -5, 5).onChange(value => setSpeed(value))
        gui.add({ flag }, 'flag').onChange(value => setFlag(value))
        gui.add({ fruit }, 'fruit', [
            'apple',
            'orange',
            'grape'
        ]).onChange(value => setFruit(value))
        gui.add({ number }, 'number', {
            one: 1,
            two: 2,
            three: 3
        }).onChange(value => setNumber(value))

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return { message, speed, flag, fruit, number }
})

export default GUIContainer

파일이 좀 길지만,dat.GUI를 통한 소개
나는 각양각색의 표를 쑤셔 넣었다.
기본적으로 다음과 같은 형식으로 GUI 양식을 추가할 수 있습니다.
dat

import dat from 'dat.gui'

let gui = new dat.GUI()
gui.add(Object, "プロパティ名").onChange(value => /* code */)

.onChange () 메서드를 사용하면 변경된 value를 수신하고 일부 작업을 수행할 수 있는 콜백을 등록할 수 있습니다.
이 콜백에서 setState () 를 실행하면 ReactDOM 을 다시 그릴 수 있습니다.

만든 GUI 컨테이너의 state 사용

App.tsx

import React from 'react'
import GUIContainer from './GUI'

const App: React.FC = () => {
    const { message, speed, flag, fruit, number } = GUIContainer.useContainer()

    return (
        <>
            <p>{message}</p>
            <p>{speed}</p>
            <p>{`${flag}`}</p>
            <p>{fruit}</p>
            <p>{number}</p>
        </>
    )
}

export default () => (
    <GUIContainer.Provider>
        <App />
    </GUIContainer.Provider>
)

확인해 봐.

yarn start

localhost:3000 브라우저를 통해 액세스
https://qiita.com/kaba/items/b05f680f850dd46548f3

총결산

dat.나는 GUI와 React 조합의 비결을 써 보았다.
dat.GUI를 손쉽게 추가 입력할 수 있습니다.
디지털 예술 외에도 작업 중에 원형의 웹 응용 프로그램을 입력하고 싶다
이럴 때도 쓸모가 있을 것 같아서요.
끝.