p5.serial.js

Please connect your Arduino to your computer and upload the "Arduino Code(sample.ino)" code to it. Then click the "Connect" button on the right side to start communicating with your Arduino.

    Other examples:
  • minimal: minimal example to get serial byte data
  • monitor: serial monitor which is made with p5.serial, including CSV data logger funciton.
Arduino Code(sample.ino) 

void setup() {    
    Serial.begin(9600);
    pinMode(13, OUTPUT);
    }
    int count = 0;
    void loop() {
    Serial.write(count);
    delay(100);
    count++;
    if ( count > 100 )count = 0;
    
    if( Serial.available() > 0 ){
        int value = Serial.read();
        if( value == 1){
            digitalWrite(13, HIGH);
        }
        else if( value == 2){
        digitalWrite(13, LOW);
        }
    }
}
sketch.js
index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.serial</title>
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
    <button onclick="mystart(this)">Connect</button>
    <button onclick="serial.writeByte(1);">LED ON</button>
    <button onclick="serial.writeByte(2);">LED OFF</button>
    <div class="canvasplaceholder"></div>
</body>
</html>