Sound based project, implementing UI

Hello. I’m creating a project; currently, it takes in a song and shows a Rainbow-style circle in 3D. Here’s the code:
ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup() {

	ofSetFrameRate(60);
	ofBackground(0);
	ofSetWindowTitle("Rainbow sound circle");

	ofEnableDepthTest();

	this->sound.load("Race_Car.mp3");
	this->sound.play();

	this->n_bands_to_get = 64;

	for (int j = 0; j < this->n_bands_to_get; j++) {
		this->fft_smoothed.push_back(0);
	}

	this->light.setPosition(ofVec3f(0, 0, 1024));
	this->light.enable();
}

//--------------------------------------------------------------
void ofApp::update() {

	ofSoundUpdate();
	float* val = ofSoundGetSpectrum(this->n_bands_to_get);

	for (int i = 0; i < this->n_bands_to_get; i++) {

		this->fft_smoothed[i] *= 0.96f;
		if (this->fft_smoothed[i] < val[i]) {

			this->fft_smoothed[i] = val[i];
		}
	}

	log.push_back(this->fft_smoothed);
	if (log.size() > 10) {

		this->log.erase(this->log.begin());
	}
}

//--------------------------------------------------------------
void ofApp::draw() {

	this->cam.begin();

	ofSetColor(200);
	
	if (this->sound.getIsPlaying()) {

		float radius = 80;

		for (int l = this->log.size() - 1; l > -1; l--)
		{
			for (int i = 0; i < this->n_bands_to_get; i++) {

				float deg = i * (360.f / this->n_bands_to_get);
				float height = this->log[l][i] * 50 * i / 3;

				float x = radius * cos(deg * DEG_TO_RAD);
				float y = radius * sin(deg * DEG_TO_RAD);
				ofVec3f point(x, y, height / 2);

				ofColor line_color;
				line_color.setHsb(255 - deg / 360 * 255, 255, 255);
				ofSetColor(line_color);

				ofDrawBox(point, 5, 5, height);
			}

			radius += 8;
		}
	}

	this->cam.end();
}

ofApp.h

pragma once

#include "ofMain.h"

class ofApp : public ofBaseApp {

public:
	void setup();
	void update();
	void draw();

	void keyPressed(int key) {};
	void keyReleased(int key) {};
	void mouseMoved(int x, int y) {};
	void mouseDragged(int x, int y, int button) {};
	void mousePressed(int x, int y, int button) {};
	void mouseReleased(int x, int y, int button) {};
	void windowResized(int w, int h) {};
	void dragEvent(ofDragInfo dragInfo) {};
	void gotMessage(ofMessage msg) {};

	ofEasyCam cam;
	ofLight light;
	ofSoundPlayer sound;

	vector<float> fft_smoothed;
	vector<vector<float>> log;
	int n_bands_to_get;
};

Currently, I’m trying to do as follows:

  • when the project starts, it should ask the user to choose a song file from the PC;
  • I’d like to implement an UI, to make it more interactive for the user, but I’d like to hear some suggestions

Thanks in advance! I really need some help!

what kind of parameters do you need in the UI?
I’m working on this UI nowadays, using in different projects

Actually, I was looking for suggestione about which parameters could I work on with an UI in my project…maybe the radius? The speed?

You can use ofSystemLoadDialog() to offer the user to pick a local file.

@wyz92 here you can see some audio widgets using ImGui: