The Brief

Understanding the Brief

This project focuses on creating an interactive music-making system that combines physical hardware, software programming, and creative design. By integrating an Arduino-based control interface with a Processing-based sound system, you will build a functional tool for generating and manipulating music, enhanced with dynamic visuals.

Brainstorming

The Final Outcome

I coded two drums: the snare is in red, and the kick drum is in green. I also created a visualizer effect with floating circles around the canvas at the beginning of the sound. As the musician plays, the two circles expand when the drums are being pressed.

C++

Coding in Arduino

I wrote this code to create a simple way of reading and sending the status of two buttons—one for a kick and one for a snare—using an Arduino. The goal was to design a basic input system where pressing the buttons would send a signal to a computer, allowing me to use the button states in a program like Processing. By checking whether each button is pressed or not, and sending that information over serial communication, I can create a drum pad-like interface that can easily be expanded or integrated into other projects. The small delay ensures smooth data transfer without overwhelming the system with too much information at once.

1#define BTN_KICK 13
2#define BTN_SNARE 12
3
4void setup() {
5  // Initialize buttons as inputs
6  pinMode(BTN_KICK, INPUT);
7  pinMode(BTN_SNARE, INPUT);
8
9  // Start serial communication
10  Serial.begin(9600);
11}
12
13void loop() {
14  // Read the states of the buttons (0 or 1)
15  int kickBtnState = digitalRead(BTN_KICK);
16  int snareBtnState = digitalRead(BTN_SNARE);
17
18  // Send the button states to Processing via serial communication
19  Serial.print(kickBtnState);
20  Serial.print(',');
21  Serial.println(snareBtnState);
22
23  // Add a small delay to ensure smooth serial communication
24  delay(50);  // Adjust this delay as necessary to avoid flooding serial data
25}
26

C++

Open Processing Code

I coded this to create a simple way to interact with physical buttons and send their status to a computer. The goal was to design a basic input system where pressing the buttons could trigger actions in a program like Processing. By using the Arduino to read the button states and send them via serial communication, I can integrate simple physical controls into digital projects, such as building a DIY drum pad or interactive interface. The small delay between readings ensures the data is sent smoothly, without overloading the system, making it easy to expand and refine the project as needed.

1import processing.serial.*;
2import processing.sound.*;
3SoundFile kickDrum;
4
5Serial myConnection;
6String incomingData = "";
7float pot = 0;
8float photo = 0;
9float button = 0;
10
11void setup(){
12  size(600, 600);
13  printArray(Serial.list());  // List all available ports to verify the correct one
14  
15  //kick drum:
16  kickDrum = new SoundFile(this, "BT7AADA.WAV");
17  
18  // Open serial connection; adjust index if needed
19  myConnection = new Serial(this, Serial.list()[3], 9600);
20  myConnection.bufferUntil('\n');  // Buffer until newline character
21}
22
23// Change Color Visual
24void draw() {
25  // Change background based on button state
26  if (button > 0){
27    background(255);  // White when button is pressed
28    kickDrum.play();
29  } else {
30    background(0);  // Black otherwise
31  }
32  
33  // Use photoresistor value to influence color of the square
34  fill(photo, 255 - photo, 100 + photo); // Color changes with light sensor
35  
36  // Draw square shape using pot as the "size"
37  float halfSize = pot / 2;
38  rectMode(CENTER);  // Draw rectangle from the center
39  rect(width / 2, height / 2, pot, pot);  // Square with side length 'pot'
40}
41
42void serialEvent(Serial conn){
43  incomingData = conn.readString();  // Read the incoming serial data
44  String[] values = split(trim(incomingData), ",");  // Split the data
45  println(values);  // Print received values for debugging
46  
47  // Map the received values for use in Processing
48  pot = map(float(values[0]), 0, 4095, 50, width); // Potentiometer to size
49  photo = map(float(values[1]), 0, 4095, 0, 255);  // Photoresistor to color
50  button = float(values[2]);  // Button state
51  
52  printArray(values);  // For debugging, print received values
53}

p5.js

The Hardware

The resistor is connected to the button to complete the circuit. When the button is not being pressed, there is still a connection to the ground through the resistor. Buttons are bridging gap on the breadboard. One leg of the button is connected to a digital pin on the Arduino, and the other leg is connected to the power.

Drum Kit made from Cardboard

Music Machine

Understanding the Brief

The Final Outcome

Coding in Arduino

Open Processing Code

The Hardware

Next