Task 2

M2: Interactive Modules

by evan kirkiles
Sep 27, 2022
a finished version of the analog controller introduced in task 1, complete with a stylized robot enclosure and corresponding input funneling into a 3D browser game.
before starting the game, make sure your controls work by testing on the interface below.
Connection not yet opened to ws://96de-2601-18a-c681-c9a0-10a3-f75c-e629-7a61.ngrok.io/
↳ Controller [none found, showing preview]
X: 0 Y: 0
Connection not opened
the main differences between this task and the last are that this task's controller is entirely ESP32-based. we don't use a Pi, and therefore have improved size, costs, and on-boot functionality.
first, download the websocket server on either your local machine or a remote server. run it with the commands yarn install and yarn dev. make note of the URI you can access the ws server publicly, or on your local network, from, e.g. ws://localhost:3000/.
websocket server code
download the websocket ESP-32 client and modify include/sdkconfig.h to reflect the websocket server's URI and your wifi credentials. build and flash it to your ESP32 using the Espressif IDE extension for VSCode.
ESP32 client code
now, assuming you've connected successfully to wifi (which you can check by viewing the serial output upon flashing the ESP32), you can listen to messages from the websocket server to get state updates from your controller! an example is live above, which you can view the code for below.
websocket consumer client code
the joystick controls the movement of the character, while the button represents an "action" determined by the switch state. when the switch is off, i.e. pointed towards you, the button will cause the character to jump. when the switch is on, i.e. pointed away from you, the button will cause the character to interact, allowing you to "speak" with the characters in the scene.