This repository contains a project that integrates Arduino, Node.js, and WebGL to create an interactive shader. The project comprises three main parts:
- An Arduino script for reading analog values from potentiometers.
- A Node.js server for processing these values and communicating via WebSockets.
- A WebGL-based HTML interface that responds to potentiometer adjustments in real-time.
- Arduino IDE
- Node.js
- A web browser with WebGL support
- An arduino with 3 potentiometers
- Arduino Setup: Connect tree potentiometers to the analog inputs on your arduino.
- Upload Arduino Code: Upload
arduino.inoto your Arduino device. Note the usb port the arduino is connected to. - Node Server Dependencies: Run
npm installin the serial_interface/ directory to install dependencies. - Node Server Config: Open
serial_controller.jsand modify the Serialport Path to the usb port the arduino is connected to, for exampleCOM3.
- Start the Node Server: Run
node serial_controller.jsin the serial_interface/ directory to start the WebSocket server. - Arduino Connection: Ensure that the Arduino is connected and transmitting data. This can be checked by checking if the potentiometer values are displayed in the serial_controller log.
- Open Web Interface: Open
app.htmlin a browser to view the shader which is updated by the potentiometer values in real-time.
arduino.ino contains the script for the Arduino microcontroller. It reads analog values from three potentiometers and outputs these values in a specific format to the serial port.
serial_controller.js is a Node.js server that reads serial data from the Arduino, parses it, and sends updates via WebSocket when significant changes are detected in the potentiometer readings.
app.html is a webpage that displays a shader affected by the data received from the WebSocket server. It requires a browser with WebGL support.
This project is licensed under the MIT License. See the LICENSE file for more details.