Recitation #7: Neopixel Music Visualization

Task1:

At task 1, I followed the guidance to connect the NeoPixel Led strip to your Arduino and download the FastLED library. Then I test the NeoPixels to make sure they are working correctly, and they turn out to work correctly.

 

Task2:

Task3:

Step1: I downloaded the Processing sketch on the webpage. Then I download the song “Yesterday” on QQ music, and put it into the file “data”. Then I ran the code, and it worked very well. The circle changed its size with the volume of the song. Here is my documentation :

Step2&4:

In step 4, I make the color of the pattern change by the volume of the music.

Here is my Arduino code:

/* This is a code example for Arduino, to be used on Recitation 7
You need to have installed SerialRecord and FastLED libraries.
It requires NeoPixel WS2812 at pin 3
Interaction Lab
IMA NYU Shanghai
2022 Fall
*/

#include “SerialRecord.h”
#include <FastLED.h>

#define NUM_LEDS 60 // How many leds in your strip?
#define DATA_PIN 3 // Which pin are you connecting Arduino to Data In?
CRGB leds[NUM_LEDS];

// Change this number to the number of values you want to receive
SerialRecord reader(4);

void setup() {
Serial.begin(9600);
FastLED.addLeds<NEOPIXEL, DATA_PIN>(leds, NUM_LEDS); // Initialize
FastLED.setBrightness(10); // BEWARE: external power for full (255)
//further info at https://learn.adafruit.com/adafruit-neopixel-uberguide/powering-neopixels
}

void loop() {
if (reader.read()) {
int n = reader[0];
int r = reader[1];
int g = reader[2];
int b = reader[3];

leds[reader[0]] = CRGB(reader[1], reader[2], reader[3]); // Prepare the color information using CRGB( Red, Green, Blue
FastLED.show(); // Pass the information of color to the LED
}
}

Here is my processing code:

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

import processing.sound.*;

SoundFile sample;
Amplitude analysis;

int W;         //width of the tiles
int NUM = 60;  //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile



void setup() {
  size(800, 650);
 
  
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 4);
  serialRecord.logToCanvas(false);
  rectMode(CENTER);
  
  
  
   // load and play a sound file in a loop
  sample = new SoundFile(this, "Yesterday.mp3");
  sample.loop();

  // create the Amplitude analysis object
  analysis = new Amplitude(this);
  // analyze the playing sound file
  analysis.input(sample);
  
}

void draw() {
  println(analysis.analyze());
  background(#A3D4E3);
  noStroke();
   // analyze the audio for its volume level
   
    float volume = analysis.analyze();
 // volume is a number between 0.0 and 1.0
  // map the volume value to a useful scale
  float diameter = map(volume, 0, 1, 0, width);
  // draw a circle based on the microphone amplitude (volume)
 

 float x = map(volume, 0, 1, 0, 255);
 float y = map(1-volume, 0, 1, 0, 255);
 float z = map(abs(0.5-volume), 0, 1, 0, 255);
 fill(x,y,z);


  

 
 
  rectMode(CENTER);
  rect(width/2, height/2, diameter, diameter);
  
 
  int n = floor(map(volume,0,1,0,60));
    r[n] = floor(random(255));
    g[n] = floor(random(255));
    b[n] = floor(random(255));

    serialRecord.values[0] = n;     // which pixel we change (0-59)
    serialRecord.values[1] = r[n];  // how much red (0-255)
    serialRecord.values[2] = g[n];  // how much green (0-255)
    serialRecord.values[3] = b[n];  // how much blue (0-255)
    serialRecord.send();            // send it!
}

 

Step3:

In this step, I want to use millis to let all the light become one color at a specific period, I tried but the pattern in the screen that processing made become inconstantly, I don’t know what is the problem with my code, can you help me?

This is my code:

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

import processing.sound.*;

SoundFile sample;
Amplitude analysis;

int W;         //width of the tiles
int NUM = 60;  //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile



void setup() {
  size(800, 650);


  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 4);
  serialRecord.logToCanvas(false);
  rectMode(CENTER);



  // load and play a sound file in a loop
  sample = new SoundFile(this, "Yesterday.mp3");
  sample.loop();

  // create the Amplitude analysis object
  analysis = new Amplitude(this);
  // analyze the playing sound file
  analysis.input(sample);
}

void draw() {
  println(analysis.analyze());
  background(#A3D4E3);
  noStroke();
  // analyze the audio for its volume level

  float volume = analysis.analyze();
  // volume is a number between 0.0 and 1.0
  // map the volume value to a useful scale
  float diameter = map(volume, 0, 1, 0, width);
  // draw a circle based on the microphone amplitude (volume)


  float x = map(volume, 0, 1, 0, 255);
  float y = map(1-volume, 0, 1, 0, 255);
  float z = map(abs(0.5-volume), 0, 1, 0, 255);
  fill(x, y, z);






  rectMode(CENTER);
  rect(width/2, height/2, diameter, diameter);

  long t = millis();
  if (t < 10000) {
    int n = floor(map(volume, 0, 1, 0, 60));
    r[n] = floor(random(255));
    g[n] = floor(random(255));
    b[n] = floor(random(255));

    serialRecord.values[0] = n;     // which pixel we change (0-59)
    serialRecord.values[1] = r[n];  // how much red (0-255)
    serialRecord.values[2] = g[n];  // how much green (0-255)
    serialRecord.values[3] = b[n];  // how much blue (0-255)
    serialRecord.send();            // send it!
    
  } else if (t>= 10000) {
    pinkChange();
  }
}


void pinkChange(){
  for(int n = 0; n< 60; n++){
    r[n] = floor(246);
    g[n] = floor(191);
    b[n] = floor(255);
    
    serialRecord.values[0] = n;     // which pixel we change (0-59)
    serialRecord.values[1] = r[n];  // how much red (0-255)
    serialRecord.values[2] = g[n];  // how much green (0-255)
    serialRecord.values[3] = b[n];  // how much blue (0-255)
    serialRecord.send();   // send it!
    }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *