P5→Arduino Buzzer

Introduction

This project is used to try to control the sound level of a buzzer on an Arduino using mouse-x and mouse-y on the p5.

Components

Buzzer
Wires
Breadboard
Arduino Board

Code

Code on Arduino:

const int buzzerPin = 9;  // Define the buzzer pin

void setup() {
  Serial.begin(9600);    // initialize serial communications
  pinMode(buzzerPin, OUTPUT);
}

void loop() {
  if (Serial.available() > 0) {  // if there's serial data available
    int frequency = Serial.read();  // read the most recent data (from 0 to 255), store in a variable
    tone(buzzerPin, frequency);     // use it to set the buzzer frequency
  }
}

Code on P5:

var serial;          // variable to hold an instance of the serialport library
var portName = 'COM3'; // fill in your serial port name here
var outByte = 0;                       // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  serial = new p5.SerialPort();    // make a new instance of the serialport library
  serial.on('error', serialError); // callback for errors
  serial.on('list', printList);       // set a callback function for the serialport list event
  serial.list();                   // list the serial ports
  serial.open(portName);           // open a serial port
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}

// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log("port " + i + ": " + portList[i]);
  }
}

function draw() {
  // black background, white text:
  background(0);
  // draw a gradient
  let dark = color(0);
  let light = color(255, 200, 0);
  drawGradient(dark, light);
}

//function mouseDragged() {
  // map the mouseY to a range from 0 to 255:
//  outByte = int(map(mouseY, 0, height, 0, 255));
//  outByte = constrain(outByte, 0, 255);
  // send it out the serial port:
//  serial.write(outByte);
//  console.log(outByte)
//}
function mouseDragged() {
  // Map the mouseY to a range from 0 to 255:
  let buzzerVolume = int(map(mouseY, 0, height, 0, 255));
  buzzerVolume = constrain(buzzerVolume, 0, 255);

  // Send the buzzer volume out the serial port:
  serial.write(buzzerVolume);

  // Log the buzzer volume to the console:
  console.log(buzzerVolume);
}

// draw gradient function

function drawGradient(c1, c2) {
  noFill();
  for (let y = 0; y < height; y++) {
    let interp = map(y, 0, height, 0, 1);
    let c = lerpColor(c1, c2, interp);
    stroke(c);
    line(0, y, width, y);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js>"></script>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js>"></script>
    <script language="javascript" type="text/javascript" src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.serialport.js>"></script>
//没有constructor就加这句话
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}