#30일 12월 27일: WebSocket + 포트를 사용하여 TouchDesigner 제어

20689 단어 elm
제 인생 27일째입니다.
오늘, 우리는 웹 플러그인과 포트를 사용하여 자바스크립트와 터치 디자이너 사이에서 데이터를 왔다 갔다 보냅니다.우리는 Main.elm를 main.js로 컴파일하고 index.html에 몇 줄의 추가 자바스크립트를 추가할 것이다.
Touch Designer는 아마도 가장 멋진 프로그래밍 환경일 것이다.이는 후효, 기본 3D 소프트웨어와 파이톤을 혼합한 것처럼 모든 변화가 즉각 반영된다.
https://derivative.ca/download
오늘의 프로젝트는 다음과 같습니다.
  • 맨 윗줄은 1x1 그레이스케일 소음 무늬(0-1)이다.그리고 우리는 그것의 빨간색 통로r를 얻어 숫자로 변환했다.모든 값이 변경되면 내부 코드chopexec1가 터치됩니다.
  • 이곳의 또 다른 중요한 부분은 두 개webserver 노드다.맨 아래에 Python 코드가 있습니다.
  • constant1 우리 Elm 응용 프로그램의 슬라이더 값을 받아라!lag1 마우스 이동이나 아두노에서 온 센서 데이터 등 입력에 매우 유용하다.
    • 슬라이더 값은 TD에서 한 걸음 뒤떨어졌지만, 나에게는 충분해!
    만약 네가 터치 디자이너를 배우고 싶다면, 나는 네가 통과하는 것을 강력히 건의한다.
    오늘 Touch Designer의 많은 설정은 본 강좌에서 나온 것이다. https://thenodeinstitute.org/courses/webserver-dat-level-1/lessons/setting-up-the-webserverdat/topic/create-a-webserverdat/
    저는 아직 Touch Designer의 초보자이기 때문에 개선 제안이 있으면 매우 기쁩니다!
  • 1. Main.elm
  • 2. index.html / Compiling Main.elm with live reload
  • 3. Very brief introduction to TouchDesigner / project screenshot
  • 4. TouchDesigner server
  • 5. Sending data from TouchDesign on value change

    • 1. 주요 문제.느릅나무


    오늘의 Elm 프로그램은 Ports example in the guide의 간단한 버전이다.
    코드 중 일부는 내가 마음속에 기억하지 못하기 때문에, 나는 나중에 그것을 다시 복습해야만 할지도 모른다.그러나 나는 그것이 매우 쉽게 읽을 수 있다고 생각하기 때문에 나는 걱정하지 않는다.
    port module Main exposing (..)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)



-- MAIN


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }



-- PORTS


port sendMessage : String -> Cmd msg


port messageReceiver : (String -> msg) -> Sub msg



-- MODEL


type alias Model =
    { sliderValue : String
    , noiseValueFromTD : String
    }


init : () -> ( Model, Cmd Msg )
init flags =
    ( { sliderValue = "50", noiseValueFromTD = "" }
    , Cmd.none
    )



-- UPDATE


type Msg
    = ReceivedNoise String
    | NewSliderValue String


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ReceivedNoise noiseValue ->
            ( { model | noiseValueFromTD = noiseValue }, Cmd.none )

        NewSliderValue v ->
            ( { model | sliderValue = v }, sendMessage model.sliderValue )


subscriptions : Model -> Sub Msg
subscriptions _ =
    messageReceiver ReceivedNoise



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ p [] [ text <| "From TouchDesigner: " ++ model.noiseValueFromTD ]
        , input [ type_ "range", onInput NewSliderValue, Html.Attributes.min "0", Html.Attributes.max "100" ] []
        , p [] [ text <| "Slider value is " ++ model.sliderValue ]
        ]

    2. 색인.html/Main。느릅나무와 현장 재적재


    기본적으로 Main.elm는 main.js로 컴파일되어 index.html에서 인용된다.
    어떤 HTML은 Ports guide 에서 복제되었고, 어떤 것은 NODE Institute tutorial 에서 복제되었다.
    프로젝트 루트 디렉토리에서 두 개의 터미널을 설정했습니다.
  • nodemon --exec elm make --output=main.js, 내가 CMD+S를 눌렀을 때, Elm 파일을 다시 컴파일합니다.
  • live-server - 파일 변경 시 브라우저 다시 로드
    • 만약 네가 nodemon나live-server가 없다면 Node.js달리기npm install -g nodemon live-server로 가라.
    처음에, 나는 실행 elm-live src/Main.elm 을 시도했는데, 이것은 다른 Elm 프로젝트에 있어서는 보통 좋은 것이지만, 이것은 나의 index.html 파일을 다시 썼다.
    여기서 변경하는 중요한 내용 중 하나는 WebSocket URL입니다. 예를 들면 다음과 같습니다.
    <!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>Elm + Websockets</title>
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div id="myapp"></div>
</body>

<script type="text/javascript">
    const app = Elm.Main.init({
        node: document.getElementById('myapp')
    });

    const socket = new WebSocket('ws://localhost:9980');

    app.ports.sendMessage.subscribe(function sendToTD (message) {
        socket.send(message);
    });

    socket.addEventListener("message", function receiveFromTD (event) {
        app.ports.messageReceiver.send(event.data);
    });
</script>

</html>
    ws://localhost:9980 상수는 표준 견본일 뿐이다.app는 아주 좋은 함수입니다. 이것이 바로 제가 함수를 app.ports.sendMessage.subscribe라고 명명한 이유입니다.
    현재, 우리는 단지 하나의 값만 발송합니다.나는 우리가 구체적으로 말하고 싶다면, 우리는 반드시 Elm을 만들어서 이런 물건을 보내야 한다고 생각한다. sendToTD이제 우리는 브라우저에서 필요한 모든 것을 가지고 있다. 터치 디자이너로 돌아갑시다.

    3. TouchDesigner 데이터 유형에 대한 간략한 설명(CHOP/DAT/TOP)


    터치 디자이너는 노드를 기반으로 하는 Windows와 MacOS 프로그래밍 도구로 After Effects+Python의 실시간 버전처럼 느껴지며 3D 기능을 가지고 있다.
    변환할 수 있지만 같은 데이터 형식의 상자만 연결할 수 있습니다.
    TD에는 여러 가지 데이터 유형이 있습니다. 하지만 오늘 제가 언급하고자 하는 사항은 다음과 같습니다.
  • 슬라이스(채널 운영자): 숫자
  • DAT(데이터 연산자): 문자열/표/코드/텍스트
  • 상단(텍스처 조작부호): 이미지 데이터(GPU에서 계산)
    • 그것들은 모두 단독 메뉴를 가지고 있으며, 두 번 클릭하여 임의의 위치에 접근한 다음 { op = "constant1", value = sliderValue } 를 누르면 서로 다른 메뉴 사이를 순환할 수 있다.

    4. TouchDesigner 서버


    DATTab를 추가하고 활성 상태를 Web Server로 설정합니다.매개 변수가 숨겨지면 on 을 누르십시오.
    이것은 localhost: 9980에 웹 플러그인 서버를 설정합니다.
    오른쪽 아래쪽에 있는 분홍색 화살표를 눌러 웹 서버를 확장하고 코드 편집p을 클릭합니다.많은 코드가 필요하지 않으므로 Node Academy 자습서 코드의 간략한 버전으로 교체했습니다.
    # This code goes in webserver1_callbacks

def onHTTPRequest(webServerDAT, request, response):
    target_operator = op(request['uri'])

    if target_operator.isDAT:
        response['data'] = target_operator.text
    if 'data' in response:
        response['statusCode'] = 200  # OK
        response['statusReason'] = 'OK'

    return response

# Slider value from Elm comes in here (gets converted from String to Int automatically - yikes! :D)
def onWebSocketReceiveText(webServerDAT, client, data):
    op('constant1').par.value0 = data
    return

def onWebSocketOpen(webServerDAT, client, uri):
    op('table1').appendRow(client) # Adds connected address to our list
    return


def onWebSocketClose(webServerDAT, client):
    op('table1').deleteRow(client)
    return
    이 코드가 정상적으로 작동하도록 하기 위해서, 우리는 'constant1' 이라는 CTRL+E 인장과 'table1' 이라는 Constant DAT 인장이 필요하다.노드를 만들 때, 이 두 이름은 모두 자동입니다.
    우리는 현재 브라우저에서 웹 플러그인 메시지를 받을 수 있지만, 메시지를 보내는 것은 어떻습니까?

    5. TouchDesign에서 값 변경에 대한 데이터 전송


    연속 데이터를 보내려면 DATTable를 사용합니다.CHOP Execute가 Value Change로 설정되어 있는지 확인하고 데이터 전송을 전환할 인장 이름을 입력하고(내 예에서 On 다음 코드를 추가합니다.
    def onValueChange(channel, sampleIndex, val, prev):
    data = op("topto1")[0]
    client = op('table1')[1, 0].val
    op('webserver1').webSocketSendText(client, data)
    return
    내가 아는 바에 의하면 거의 이렇다.실제로 터치 디자이너의 이미지를 브라우저에 입력할 수도 있지만, 데이터의 양을 감안하면, 이미지를 정지하는 것이 가장 좋은 선택이라고 생각합니다.
    쿨하다D
    9.2.3단계부터 10.0.4단계까지
    중앙 OS 6에서 Night mare를 터치해보세요.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage