#node.js #interactivewebsite #arduino #potentiometers

How it works
Node.js serves as a bridge between the Arduino board and the web page. The two potentiometers control the Y and Y value of the dot one the web page and move up or down, left or right or both on the screen and a graph is created. The button is supposed to clear the page when pressed. However, it does not work when I tried.

I’m interested in how Arduino is able to be programmed and allow the user to interact with the computer graphics. This is just a simple trick to get the idea. I would be really fun to see more projects done with the same techniques.

Wiring Diagram
https://circuits.io/circuits/4147325/embed

Arduino Code
#define X_POT A0
#define Y_POT A1
#define CLR_BTN 7

void setup() {
pinMode( X_POT, INPUT );
pinMode( Y_POT, INPUT );
pinMode( CLR_BTN, INPUT );

Serial.begin( 9600 );
}

void loop() {
Serial.print( analogRead( X_POT ) );
Serial.print( “,” );
Serial.print( analogRead( Y_POT ) );
Serial.print( “,” );
Serial.print( digitalRead( CLR_BTN ) );
Serial.println();
}

Node.js
https://github.com/lcc-prototyping-lab/etch-a-sketch-p5js

Video