toioplayground (toiojavascriptlibrary를 사용해 보았습니다)

이는 소니 인터랙티브 엔터테인먼트 Inc.의 toio 의 toio 기술 사양 와 javascript library 가 공개된 후 장난감 총동원 부속 재생 패드의 경로 설정, 편집, 경로 추종 프로그램을 사용해 보았다는 보도다.

입문

toio

toio뭐 공부 해요?의 페이지, toio의 개념개발자 인터뷰이 무엇을 실현하고 싶은지 참고하십시오.

toio에 대한javascript 라이브러리

이 토오의 로봇 토오 핵심 입방체는 블루투스와 토오 컨트롤러의 통신을 통해 이동할 수 있다.
며칠 전 공개된 toio javascript 라이브러리, Node를 넣으면 됩니다.현재 js에서 핵심 다차원 데이터 집합을 직접 제어할 수 있습니다.

toio playground

본 보도의 toioplayground는 toiojavacript 라이브러리를 사용하여 Node를 진행합니다.js에서 실행되는 웹 응용 프로그램입니다.
Toio의 게임 매트리스에 대응하는 웹 화면의playground(아래 화면)에 노선을 그리고 Runtoio 핵심 입방체를 통해 게임 매트리스에 같은 궤적을 그린다.

작업 환경

macOS10.14(Mojave)를 통해 확인

다른 환경 확인 안 됨

Node.js Ver.10.15.3 확인

Ver.8 나중에는 대충 오케이.

사용 방법

다음은 MacOS 환경입니다.
터미널을 시작하고 적당한 위치에gitclone을 설치하십시오.

> git clone https://github.com/mnakada/toio-playground.git
> cd toioplayground
> npm i
> npm run build
> npm run local

웹 서버는 포트 10010에서local로 시작됩니다.
브라우저에서 열기 http://localhost:10010 하면playground가 열립니다.
다음은 장난감 총동원에 따른 게임 패드와 충전이 끝난 핵심 입방체를 준비한다.
코어 입방체 전원을 켜면

Toio Linked!

에서 설명한 대로 해당 매개변수의 값을 수정합니다.(그렇지 않으면 MacOS의 BlueTooth 연결이 가능한지 확인하십시오.)
여기서부터 사용 방법은 아래의 동영상을 참조하십시오.

핵심 다차원 데이터 집합을 재생 패드의 적당한 위치에 놓고 위에서 다차원 데이터 집합의 뒤쪽(toio와 측면에서 쓴 반대쪽)을 누르고 밑면의 기능 버튼을 누르세요.
웹의playground 화면에서 점은 기능 단추를 누르는 매트리스와 같은 위치에 놓여 있기 때문에 게임 매트리스에서 적당히 위치를 엇갈리고 입방체를 사용하여 점을 놓으십시오.
베셀 커브는 연결된 배치 점으로 당겨집니다.
너는 평면상의 점과 점에서 자란 손잡이로 곡선을 조종할 수 있다.
또한 점 사이의 곡선에 마우스 커서를 놓고 1초 동안 마우스 커서를 잡아서 (마우스 왼쪽 버튼을 길게 누르면) 점을 추가할 수 있습니다.
마우스 커서를 점 위에 놓고 "delete"키를 눌러 점을 삭제할 수도 있습니다.
경로 곡선이 완성되면 재생 패드에 핵심 입방체를 놓고playground 오른쪽에 있는 Run 단추를 누르면 핵심 입방체가 경로 곡선의 입구에서 출구로 운행한다.Export file의 경로 커브입니다.tpf 파일로 내보냅니다.
Drag&Drop 파일을 playground에 저장합니다Import file.tpf 파일의 경로 데이터를 가져올 수 있습니다.Clear를 누르면playground 경로를 지웁니다.
현재 핵심 다차원 데이터 집합의 전원이 끊어지거나 블루투스가 끊어질 때node.핵심 다차원 데이터 집합을 다시 연결하려면 js 프로그램을 다시 시작해야 합니다.
반응이 없으면 단말기의 node.Ctrl-C로 js 프로그램을 잠시 중지하고 다시 실행하십시오.

프로그램 정보

GitHub mnakada/toio-playground.
프로그램의 구조를 간단하게 설명하다.
npm run local을 실행할 때 node backend/TioPlayground.js가 시작됩니다.
ToioPlayground.js는 config입니다.json 파일, backend/WebService 읽기js를 호출합니다.
여기서 WebServer, backend/TioConnect를 시작합니다.js를 시작합니다.
ToioConnect.js는 toio 핵심 다차원 데이터 집합의 제어 라이브러리를 초기화하고 핵심 다차원 데이터 집합의 좌표 정보를 웹 서비스에 투입하거나 실행할 때의 시퀀스를 실행합니다.
ToioConnect.js의 이동 Target () 은 핵심 입방체를 자신의 위치와 target이 제시한 목표 위치에서 좌우 타이어의 속도를 계산하고 이동하는 부분이다.이곳에서 각양각색의 개작을 통해 핵심 입방체 추적 목표의 경로를 조정할 수 있다.
이동 목표 () 는 100ms 후의 목표 위치를 지정하고 목표와의 거리와 각도 차이를 계산하여 좌우 타이어의 속도를 설정한다.이때 스피드는 거리의 핵심 입방체 자체의 이동 속도에 따라 dv는 구부러진 좌우 타이어의 이동 속도에 사용되는 차분 속도이다.(속도 단위는 타이어 회전 속도 x4.3rpm)
만약에 k가 변하지 않으면 곡선의 수렴이 비교적 느리기 때문에 목표와의 거리가 비교적 먼 상황에서 신속하게 수렴하는 계수를 편리하게 하기 위해log10을 사용하는 것은 적당한 계수의 곡선을 만들기 위해 특별한 의미가 없다.
이동 목표 () 자체는 100ms 이후의 목표에게 100ms를 이동하는 코드이지만, 100ms마다 호출하면 동작이 톱날이 발생하기 때문에 10ms를 주기로 호출하고 매번 100ms 이후의 목표를 향해 계산한다.

  MoveTarget(target) {
    if(!this.cubePosition) return false;
    const distance = Math.hypot(target.x - this.cubePosition.x, target.y - this.cubePosition.y);
    if((this.runState !== 2) && (distance < 5)) {
      this.cube.move(0, 0, 0); // stop
      return false;
    }
    let realAngle = Math.atan2(target.y - this.cubePosition.y, target.x - this.cubePosition.x) * 180 / Math.PI - this.cubePosition.angle;
    realAngle %= 360;
    if(realAngle < -180) realAngle += 360;
    if(realAngle > 180) realAngle -= 360;

    let speed = distance + 10;
    if(speed > 100) speed = 100;
    const limit = speed;
    const k = Math.log10(distance); // slope factor
    let dv = realAngle * 0.4124 * k; // 13.3 * Math.PI / 180 * 100 * 60 / (430 * 12.5 * Math.PI * 0.1) / 2
    if(dv > limit) dv = limit;
    const lspeed = speed + dv;
    const rspeed = speed - dv;
    this.cube.move(lspeed, rspeed, 100);
    return true;
  }

프론트 측에서 웹 화면을 만드는 것은source/vue에 있는 vue입니다.js 프로그램입니다.
웹팩에서bundle 파일로 정리되기 때문에build 후의 상태로 보면 이해하기 어렵지만source/index.html에서source/js/ToioPlayground까지.js라고 불린다.vue.js의 표시는 다음과 같습니다.
​ TopMenu.vue: 메뉴가 포함된 전체 화면
​ Trajectory.vue: 핵심 다차원 데이터 집합의 궤적을 나타내는 붉은 점 도층
​ TopView.vue : BezierCurveEditor.vue의 wrapper층
​ BezierCurveEditor.vue: 베젤 곡선, 시작, 끝점, 핸들을 그리는 도면층
이 층에서 백엔드에서 던져진 핵심 입방체의 좌표 정보를 나타낸다.
또한 SVG의 베젤 곡선 GUI를 표현한 것은 Bezier CurveEdita이다.vue이지만 데이터에 점과 핸들을 반영하는 것은source/js/GraphData입니다.js입니다.

끝내다

나는 toio의javascript 라이브러리로 간단한 웹 응용 프로그램을 만들어 보았다.
목표를 향해 이동하기 위해 좌우 타이어의 속도를 계산하는 데는 여러 가지 시도가 있었다. 핵심 입방체가 여기저기 뛰어다니며 이리저리 돌아다니기 시작하면 즐거운 일이 많았다.
노선을 따라 급커브를 멋지게 탐색해도 빙빙 돌면 즐겁기 때문에 꼭 고쳐 쓰세요.