Final Project DJ Falcon – Q M and Daniel

So, here it is! After fixing hundreds of errors and spending countless man hours, we finally have our project– DJ Falcon!

DJ Falcon:

Using Arduino and p5js, we created DJ Falcon, an audio mixer set that modifies tracks and makes everyone jam to the tunes. The mixer also has a visualizer whose waves sync with the audio being played.

The user is welcomed with this screen:

You can then choose a song from the list to mix:

Then you rotate the knobs on the mixer to shake things up!

The Process:

There are two parts to this code – the p5js part and the Arduino part.

Components Used:

Ph a000066 iso (1) ztbmubhmho Arduino UNO board

12002 04 Breadboard

09939 01 Rotary Potentiometers (2)

19c7994 40 Push down Switch (1)

Mfr 25frf52 10k sml Resistors

11026 02 Jumper Wires

Apps and Online Services:

Ide web  Arduino IDE Making p5.js Accessible. by Luis Morales-Navarro and Mathura… | by Processing Foundation | Processing Foundation | Medium p5js

The Process:

We started the project by drawing out everything first in a notebook. Here’s the very first (very rough) sketch of our idea:

I decided to work on the interface for the mixer and took care of the code and fixing the issues that came up, while QM was going to put together the circuit and the hardware. After setting up the basic circuit on the breadboard and building a very basic interface with buttons on p5js, we had to connect the both.

We then incorporated the p5js sound library in our p5 code. We used the built in reverb, delay, frequency functions and tested those out together by uploading an mp3 file on p5js. It was all working fine. We had to then figure out how to take values from the potentiometer, map them, and use them as arguments for the sound functions.

But before that, we had to write code for reading the values from the pin. QM got to writing the code for the Arduino IDE while Daniel got to figuring out how to take those inputs in p5js. This is where we hit our first roadblock. We just could not figure out the correct p5js library for serial communication and also couldn’t figure out how to separate the values we got from the potentiometer and store them in variables. With a little help from Professor Ang, we finally figured out the right library and used a list to store our values from where we used split() and trim() function to separate the values from each input. This is the bit of code that helped us do it:

function serialEvent() {
if (serial.available() > 0) {
serialData = serial.readLine();
if (serialData) {
// false if serialData == null
serialData = trim(serialData); // remove trailing whitespace
serialValues = split(serialData, ","); // split the string to array
console.log("serialValues ", serialValues);
rev_value = Number(serialValues[0]);
console.log("Rev: " + rev_value);
rate_value = Number(serialValues[1]);
console.log("Rate: " + rate_value);
play_value = Number(serialValues[2]);
console.log("Play/pause: " + play_value);
standby_value = Number(serialValues[3]);
console.log("Standby: " + standby_value);
rev_mapped = map(rev_value, 0, 1023, 0, 100);
rate_mapped = map(rate_value, 0, 1023, 0, 200);
console.log("rev mapped: " + rev_mapped);
console.log("rate mapped: " + rate_mapped);

It’s also worth mentioning that some of the code for the serial connection were reusable code snippets written by Professor Sherwood and Ang from class examples.

This is how our board looked:

Once we connected the Arduino board and had the serial connection going, it was now time to map the values to fit into the arguments. I had a pretty solid grip on the ranges for the different music functions like the dryness and wetness of reverb, due to being a music major, and had a good understanding of how our random values would translate to what we hear (QM also ended up learning a fair bit about music at this point from Daniel).

But even then, it wasn’t smooth sailing. Although we had an understanding of the values, p5 was playing its sly tricks with us with the inner working (or should I say, inner loopings!) of the draw() function causing a haphazard in the music where multiple tracks were playing by overlapping each other and it sounded more like a cacophony than a vibey night at a club.

One evening, after working for more than 5 hours continuously trying to solve these, we decided to call it a night and come back the next day.

Maybe sleeping on the bugs helped, because the next day, after the both of us worked simultaneously on our own laptops trying to fix the bugs, QM had a slight hint of a breakthrough when one of the buttons successfully paused the music without looping. Still it wouldn’t make it play again.

But then…(drumrolls) a moment of genius from Daniel and some tweaking of the code and suddenly everything worked! Words fail to describe how victorious we felt at that moment:

Now it was time to put everything together. QM, with a noob-level experience in soldering decided to solder the board together and Daniel would give a finishing touch to the interface, incorporating a dope background, cool fonts and a cleaner look. Here’s some of that scrappy soldering work:

And here’s Daniel’s work on the interface:

We were both happy with the font and the look of the mixer and the DJ Falcon mixer was ready.

The Schematic:

Code: Arduino IDE

const int switchPin1 = 2;
const int switchPin2 = 3;
void setup() {
pinMode(switchPin1, INPUT); // initialize serial communications
pinMode(switchPin2, INPUT);

void loop() {
// read the input pin:
int pot = analogRead(A0);
int mappedPot = map(pot, 0, 1023, 0, 255);
int potRev = analogRead(A1);
int mappedtest = map(potRev, 0, 1023, 0, 255);
int button1 = digitalRead(switchPin1);
int button2 = digitalRead(switchPin2);

Code for p5js:


We had more ambitious ideas in mind like using the delay() feature and a standby button but those were causing bugs due to the draw() function of p5js, but we’re sure these can be implemented in the future.

Final Project Update – Daniel and QM

p5 part

We’ve been working on deciding what features to be part of the mixer, and we decided on the following: Reverb, Delay, bypass, and a pause/play button. This is less than what was originally expected, however I got the idea to adding an extra feature, a sine-wave oscillator. This would allow the user to learn more about the types of sine-waves that are seen

After you select a song or the oscillator feature you will go to a different interface, for the oscillator and to change between wave-types we might use buttons or one of the already existing potentiometers to make the design more intuitive.

I’ve also been looking into the different sound library options of p5js and how they work, based on that I decided which effects would work best. Here is how I’ve been testing it (not the most optimized interface but it gets the job done)


For the Arduino section of the project we’ve figured out the coding aspect on how to receive multiple inputs to p5, the only thing left will be repurposing the Arduino’s box to make it the base of the mixer and soldering the cables into the potentiometers.

what’s missing?

What we need to work on now is polishing the interface, testing over and over the mixer and features and making sure the code for the buttons works.

Final Project update – Daniel and Q M


Our final project will be a mixer using an arduino board and P5js’ sound library.


The mixer will use the following components:

    • 1 potentiometer – analog input (Will work like a slider would in an actual mixer)
    • 2 buttons to switch between effects
    • 1 button to work as a Pause/Play button
    • [MAYBE] 1 button to work as a Bypass/Standby function

Here is a sketch of what it would look like:

We will use the Arduino’s box  to make the board and double as a place to hide the board.

The interface where you will mix is looking like this, currently I am working on it and designing it, this is not the final product/result as I’d like to add some color to it:

The line at the middle will react to the sound and hopefully produce colors and make a sound wave.

Future plans

During the week we expect to finish the interface and Arduino set-up, and would be working on the code and synching in the sounds.

Only project that may come is being able to translate the values from the potentiometer to the parameters to make the effects take effect.

Final Project Draft – Daniel Basurto


While I don’t have a fully finalized version, I have ideas on what I want to have my final project be about. For my final project I will be making an interface where you can modify audio. The audio will either be something the person records into p5 with the sound recorder function, or a selected song/audio file.

The audio would be modified using p5’s sound system, and the sound would be modified by buttons and maybe a potentiometer on the Arduino. I still need to find in which way the order will be in order to make the sound work, but p5 would serve as the UI to show the levels and settings, and the Arduino board will modify the sound.

Unusual Instrument – Daniel & Sara


For this week’s assignment, [Daniel] and I constructed a musical instrument that measures the distance between the ultrasonic sensor and anything placed in front of it (i.e., your hand). Depending on how far you place your hand/ an object from the sensor, the piezo buzzer will play one of 8 different notes we inputted into the code.

To do this, we used a force sensing resistor that you had to press on whenever you wanted the ultrasonic sensor to detect your hand, and a piezo buzzer that would play the sound as output.

Arduino: How to Make an Instrument

Schematic and Images

Here is the schematic for the circuit:

Code (or code highlight?)

int trig = 10; // digital 10
int echo = 11; // digital 11
long duration;
long distance;
int force;
void setup() {
 // runs once
 pinMode(echo, INPUT); // digital 11 
 pinMode(trig, OUTPUT); // digital 10
 Serial.begin(9600); // open serial monitor to track
void loop() {
 // runs repeatedly
 digitalWrite(trig, LOW);
 digitalWrite(trig, HIGH);
 digitalWrite(trig, LOW);
 duration = pulseIn(echo, HIGH);
 distance = (duration / 2 * 0.0344);
 int notes[7] = {233, 261, 293, 311, 349, 392, 440};
 //              Bb    C   D     Eb    F   G   A    
 force = analogRead(A0); // analog 0
 if (distance < 0 || distance > 50 || force < 100){
 } else if (force > 100){
   int sound = map (distance, 0, 50, 0, 7);
   tone(12, notes[sound]);

The notes were based on the key of Bb, as we intended to make Bohemian Rhapsody first, the notes and values are:

Bb: 233

C: 261

D: 293

Eb: 311

F: 349

G: 392

A: 440


Here I’m playing Twinkle Twinkle Little Star using the instrument.

Reflection and improvements:

  • The ultrasonic sensor was very sensitive to movement very close to it, but the farthest note (A), was very hard to detect just because it was so far away from the sensor. This made the sound laggy when it came out of the piezo buzzer, which made the song sound very untuned and the note inconsistent.
  • It may also be because of the quality of the sensor, but the range seemed too limited and not so accurate. If we tried to make it a shorter distance between frequencies, then it would have a lot of sliding, and if we wanted to keep the same distance apart we would have needed to move it further and cause a much more unstable sound


Night-Light Daniel Basurto


The idea for this concept comes from a point of laziness,  as in my room, when I want to turn the lights off, I need to immediately go to sleep, as I don’t have a nightlight for when I want to sleep.

Therefore, with my little understanding of Arduino hardware and coding, I decided to do a simple enough project but also being functional.

When making the circuit I needed help, and I was looking into many YouTube videos in order to find a way to properly understand it, I took what I could from the videos and made my circuit and code accordingly.


Here is the schematic for the circuit:

And here is the project in action:

There weren’t many problems with the circuit working, however, I do wish I could have added more to make it more complex, however that will only come as I get more experienced with Arduino and coding for it.


I was lost as to how to write the code, and found a code in one of the videos I found.

  LDR sensor

void setup() {
void loop() {
  float sensorValue = analogRead(A0);
  // Reads the analog input ranging from 0 to 1023

Now that I am looking back to the project after days of making it, I realize that the code is not as complex as I thought as the beginning. I do comprehend it now, however at the time I made the circuit I did not know.

Further Improvements

I would have preferred for this project to have taken less time, however I am satisfied with what I did. Maybe I’d like to add a kill-switch or a way for the circuit to end after amount of time.


Unusual Switch – Daniel Basurto


For this project I was lost as to what to do until I remembered my guitar having metal strings. I gave it a test to see if the signal would go through and it did. Something that bothered me when learning guitar was how seemingly play many notes at once and not pluck the strings, my circuit makes it so that when the string is plucked the LED will light up.


My circuit is based on this one we did in class to demonstrate how switches work:

The difference being that where the button would be the 5V cable is connected to my guitar, specifically positioned to not affect the sound. And the blue cable is serving as a pick to pluck the string.  It ended up looking like this:

Circuit in action

(I couldn’t get the video to upload on the media tab, there were errors when I tried, here is a google drive link to it)

As you can see by the video, whenever I touch the string, the LED lights up, and when I pluck it it turns off. Due to where I put the 5V cable the sound is not altered and it can sound fully.

My only difficulty was working with the short length of the cables and the size 0f the guitar.

further improvements

Personally this is the best I can make with my limited knowledge of Arduino, however, I’d like to make another circuit like this where each string is connected to a different LED light. This could be very useful for beginner guitarists if they’d like to see what string is being plucked.

Midterm Daniel – Final Update

game concept

The idea from this game came from my love of music and rock songs, as well as me not being able to code that well to implement sprites. I made a trivia game for guessing songs as I sometimes enjoy guessing them when listening to them from a distance.

game phase

The game is a quiz style game, where a song will play for 5 to 10 seconds, and you choose one of the 4 album covers on screen. Wether you choose the right or wrong one, you will proceed to the next round. If you get a wrong answer you will see it on the strike section on the top-right side of the screen. If you get 3 strikes, you loose and have the end-screen, where it tells you the score a hint to getting the game’s surprise at the end.

I used the random function for the length of the song array and based on that pulled a song and the album cover from the arrays. The positions for the correct answer and the other images were confusing to find, but I found a way around it, generating the correct answer over one of the other pictures.

The game ends after 10 rounds or if you get 3 wrong answers, afterwards you will see the end screen, or if you get the 10 answers correctly, a special surprise.


The biggest challenge was making the album covers and songs be random, as it took a while to figure out an efficient way to make it work, specially for the positions. It took days to figure out but felt very rewarding at the end.

The other challenge was making the game flow, as I used a noLoop() without noticing it. The noLoop() made my code not work as it stopped all the draw functions to stop working as intended. I fixed it by making my code be function oriented. Instead of fitting everything into 1 function, I spread it around many different ones.

The last challenge was more of a tedious one, as the songs took some time to collect and write the code correctly, I think it could have been done in a much more efficient way, but I do enjoy the end result.


The code was based on game states, similar to the example of class:

function draw() {

//   Taken from gameState code in class, makes the game work cohesively 
   if (gameState == 'start') {
  } else if (gameState == 'playing') {
  } else if (gameState == 'end') {

The draw parts of the game I tried to make them the most basic as possible, while adding custom functions to it.

function drawGame(){
//Based on having a random result from a string  
  image(album_covers[wSong1], img1X, img1Y)
  image(album_covers[wSong2], img2X, img2Y)
  image(album_covers [wSong3], img3X, img3Y)
  image(album_covers [wSong4], img4X, img4Y)
// Strikes and strike counter
  strokeWeight (5)
  text('Strikes: ' + strike, 300, 30)
//Correct song randomly placed over another picture
  image(album_covers[currentSong], goodX, goodY);  

  //Text for round and score
  text('Round ' + counter, 25, 25)
  text('Score: '+ score + '/10', 25, 40)

The way I transitioned from screens to the game itself, was by the mouse click function and adding more and more custom functions to it:

function mouseClicked(){
  console.log("gamestate is: ", gameState);
  if (gameState == 'start'){
//   Makes it so that the game can be looped and work properly when multiple games are played
    gameState = 'playing'; 
    randomize(); //the songs are randomized and in theory, don't loop
    counter++ // round increase
  }else if (gameState == 'playing'){
   if (mouse_is_over()) {  
    score ++ // whem you get an answer your socre increases
     nextRound() // refreshes the game 
    strike ++
   }else if(gameState == 'end'){
    gameRestart() // game begins again and values reset

function mouse_is_over(){ 
  // console.log (mouseX, goodX, mouseY, goodY) // This was for debugging
//   Makes it so that mouse is relative to the corredct answer
   if ((mouseX>= goodX && mouseX < goodX + imgSize) && (mouseY >= goodY && mouseY <goodY + imgSize)) {
     return true
   }else {
     return false
// Game ends if 10+ rounds are reached
function rounds(){
  if(counter == 11){
    gameState = 'end'
    // drawEndScreen()

// makes the next round happen,randoized again
function nextRound(){
  rounds ()  

// makes it so songs don;t repeat
function noRepeat(){
  while (currentSong == previousSongs){
    currentSong = int(random(songs.length))

// functions and values reset
function gameRestart(){
  print('Resetting game state');
  strike = 0
  score = 0
  counter = 0
  previousSongs = [];
  gameState = 'start'

// Makes it so the right song is in one of the 4 possible combinations
function currentSongPosition(){
  goodX = random(positionX)
  goodY = random(positionY)

//Game ends if you get 3 wrong answers
function gameOver(){
  if (strike > 3){
    gameState = 'end'

//makes it so the album pictures don't repeat as much by using while statements
function randomize(){
    currentSong = int(random(songs.length))
  while(currentSong in previousSongs){
    currentSong = int(random(songs.length))
  wSong1 = int(random(songs.length));
    while(wSong1 == currentSong){
    wSong1 = int(random(songs.length));
  wSong2 = int(random(songs.length));
  while(wSong2 == currentSong || wSong2 == wSong1){
    wSong2 = int(random(songs.length));
  wSong3 = int(random(songs.length));
    while(wSong3 == currentSong || wSong3 == wSong2 || wSong3 == currentSong){
    wSong3 = int(random(songs.length));
  wSong4 = int(random(songs.length));
    while(wSong4 == currentSong || wSong4 == wSong3 || wSong4 == wSong2 || wSong4 == wSong1){
      wSong4 = int(random(songs.length))


// special surprise
function rickRoll(){
  if (score == 10){
    gameState = 'end'"")

future improvements

I would have liked to add the names of each song under the pictures, but wasn’t able to figure it out.

Another thing I would have liked to iron out would have been the issue of songs repeating after they are played one round, however I was never able to figure it out, same for the album covers and their positions, I feel it could’ve been more practical and simple than the way I did it.

Also, being able to show the songs that played at the end of the game, or after each round would have been good, in order for the player to look them up if they liked them.


It was very interesting and fun doing a project like this as it allowed me to get a lot of practice by challenging myself. Overall, I wish I could make more improvements like using hears instead of X’s, but it was very good.

Midterm Progress

Project idea – “Know your playlist”

The idea for this project came from my love for music, lately for rock music. My idea for the project would be a quiz type game, where I would play a song and the player would need to guess it correctly. I have some ideas for the design of it, however they are just rough sketches at the moment.

The game would work the following way:

  • A 5 to 10 second clip of the song would play and then the player would need to answer – The options would include: 4 different album images each with the name of the song and artist.
  • The player would need to answer correctly, if not the game will skip to the next question and take away a life (each play-through will have 3 lives)
  • After the game is completed (around 10 questions), the game will reveal the player’s score, and if they get all answers correctly a special message will appear (TBD)


At the moment, I have no working code for the game, but I am thinking of using various arrays to keep songs from repeating themselves. Alongside that, in order to keep the design of the game tidy, I might need to use different object oriented functions for the picture + the name of the song. I am not fully sure on how will the project work and what exactly will be in the code, but I am working on finding it.

Assignment 4 – Daniel Basurto


The inspiration for this project came from this Friday’s rooftop-rhythms, as seeing the poems and poets gave me the idea of generating ones based on some of the most common words of the english language. I wanted to make them funny, however as you’ll soon see, that did not work out.


The code was a bit difficult to get, but I managed to make it so that every time you click the screen it will refresh and generate a new one.

The code ended up looking like this:

// I made a haiku generator (though they don't make much sense). I set the variables based on the structure: I [verb] a [adjective] [noun]
//         And I [verb] a [adjective] [noun] too
//         I feel like a [noun]
// While it does follow the rhytmic stucture of a Haiku, it is neither deep/thought-provoking or artistic

let NOUN1 = 0;
let VERB1 = 1;
let ADJ1 = 2;
let NOUN2 = 3;
let VERB2 = 4;
let ADJ2 = 5;
let NOUN3 = 6;

let strings = [];

function setup() {
  strings = loadStrings("words.csv");
  createCanvas(400, 400);
    random(150, 255),
    random(150, 255),
    random(150, 255),
    random(50, 100)
  for (let i = 0; i < 200; i++) {
    fill(255, 255, 255);
    ellipse(random(0, width), random(0, height / 2 - 40), random(2, 5));


let csvRowNumber = 0;

function draw() {
  let singleRow = [];
  // First message/rhyme
  singleRow = split(strings[int(random(strings.length))], ",");
  let verb1 = singleRow[VERB1];
  singleRow = split(strings[int(random(strings.length))], ",");
  let adj1 = singleRow[ADJ1];
  singleRow = split(strings[int(random(strings.length))], ",");
  let noun1 = singleRow[NOUN1];
  text("I " + verb1 + " a " + adj1 + " " + noun1, 0, height / 2);

  // Second message//
  message = "And I ";
  singleRow = split(strings[int(random(strings.length))], ",");
  message += singleRow[VERB2];
  message += " a ";
  singleRow = split(strings[int(random(strings.length))], ",");
  message += singleRow[ADJ2];
  message += " ";
  singleRow = split(strings[int(random(strings.length))], ",");
  message += singleRow[NOUN2];
  message += " too";
  text(message, 0, height / 2 + 25);

  //Third message//
  singleRow = split(strings[int(random(strings.length))], ",");
  let noun3 = singleRow[NOUN3];
  text("I feel like a " + noun3, 0, height / 2 + 50);


function mouseClicked() {
  background(random(150, 255), random(150, 255), random(150, 255)); //refreshes the background
  for (let i = 0; i < 200; i++) {
    fill(255, 255, 255);
    ellipse(random(0, width), random(0, height / 2 - 40), random(2, 5));



Personally, I wish I could have made the backgrounds have a color gradient to make it look prettier. However, it will be something I’d have to learn.

Another area for improvement would be the haikus themselves, since they are usually senseless, I’d like to make them more concrete.