Where should I start from if I am new in programming (music visualizer)

Sheldon96

I need to create a music visualizer using Processing, where should I start if I want to learn how to code for creating a music visualizer? Is there any tutorial that teaches step by step on how to start?

jeremydouglass

@Sheldon96 -- If you are new, start with the introduction and the basic tutorials, then once you have gotten the hang of creating a basic sketch, drawing a shape, using a color, moving or animating something (all things you will need for your visualizer), try the Sound tutorial, which teaches you a lot about music visualization and has a bunch of great examples. You definitely, definitely want to play around with introductory sketches first, though.

kfrajer

Here is a relevant post:

https://forum.processing.org/two/discussion/18683/which-book-should-i-start-with-for-learning-processing/p1

Kf

Sheldon96

Thanks Jeremy,

What about the ddf and minim? What does that mean? I tried to copy other peoples example and apparently there is many errors. Please help me

Thanks kf for your reply too.

Sheldon96

And also Jeremy, do i need to look on the text tutorials? If yes can you suggest me which one do I need for my music visualization?

jeremydouglass

@Sheldon -- I see that your minim question was already answered.

Re: text tutorials -- what kind of music visualization do you want to make -- will it have text in it? There are so many kinds.

All tutorials help, but just start with the most basic basics, then try those Sound tutorial examples. If they don't make sense, go back to a few more Examples or look up terms you don't get in the Reference.

Sheldon96

Hi Jeremy,

I'm trying to make a music visualizer that shows emotion depending on the beat/fft of the song. Are you able to help me with that?

jeremydouglass

shows emotion

What does that mean? It draws a smiley-face / frowny-face? It draws a redder or bluer background? It draws (lines / shapes) that move faster or slower?

Don't just describe your overall aesthetic goal -- describe concretely what you are trying to draw. Then people will be able to help, pointing you to things in the reference that help you do the kind of drawing you describe.

Sheldon96

What I mean is when a song that has high frequency it means happy(Dont really know how frequency and beat works) and the round face that i plan to create will smile. And when the song is slow or sentimental, the emotion shows a sad/crying face. I'm just planning to make a simple round smiley face that will show emotions. Thanks for the reply Jeremy.

Sheldon96

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer player;
AudioMetaData meta;
BeatDetect beat;


background(#9C69D3);
size(640, 360);
fill(#2FCB38);
ellipse(320, 180, 300, 300);

fill(#149CC4);
ellipse(270, 120, 60, 60);

fill(#DAFC03);
ellipse(370, 120, 90, 90);

fill(0);
stroke(0);
 arc(320, 180, 200, 200, 0, PI);
 arc(320, 250, 180, 160, -PI, 0);

So far I have only done all these.

jeremydouglass

Thank you for sharing your work!

Because your drawing will change over time, you need a setup() and draw(), and you need to put your background and drawing commands inside draw(). See the intro Tutorials on Processing.org if you need examples.

Then add an if() and else statement, and draw two different arcs -- a sad arc and a happy arc. To start out with, don't make the if() dependent on frequency. Just use "if(keyPressed)" and test with your spacebar.

Once you have that working, THEN add frequency analysis into a variable each draw, and check it with if.

Sheldon96

Thanks Jeremy for the reply! Did some editing and found some tutorials so I decided to edit some in it. How do I make the white line to become the mouth of the smiley face?(No idea whats the name of the white line)

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer groove;
AudioMetaData meta;
BeatDetect beat;
float yoff = 0.0;

void setup()
{

size(640, 360, P3D);

minim = new Minim(this);
groove = minim.loadFile("Marshmello - Alone.mp3", 2048);
groove.play();
beat = new BeatDetect();
ellipseMode(CENTER);

}
void draw() 
{
background(#9C69D3);
beat.detect(groove.mix);
stroke(255);

  for(int i = 0; i < groove.bufferSize() - 1; i++)
  {
    line(i, 50  + groove.left.get(i)*50,  i+1, 50  + groove.left.get(i+1)*50);

  }
fill(#2FCB38);
ellipse(320, 180, 300, 300);

fill(#149CC4);
ellipse(270, 120, 60, 60);

fill(#DAFC03);
ellipse(370, 120, 90, 90);

if(keyPressed)
{
fill(#2FCB38);
stroke(0);
arc(320, 250, 180, 160, -PI, 0);
}
else {
  fill(#2FCB38);
stroke(0);
 arc(320, 180, 200, 200, 0, PI);
}

fill(#1F0BDB);
beginShape();
 float xoff = 0;
  for (float x = 0; x <= width; x += 10) {
    float y = map(noise(xoff, yoff), 10, 1, 0, 300);
    vertex(x, y); 
    xoff += 0.10;
  }
  yoff += 0.10;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

jeremydouglass

Please edit your previous posts (gear icon) and format your code with highlight, CTRL+o.

This will help others read and test the code so that they can offer feedback.

Sheldon96

Haha Sorry !

jeremydouglass

For your mouths, read the reference page for arc(). Use stroke() and fill() before arc to change the colors used for the outside stroke line and inside full color. ... Wait, you are doing that. What is your question?

Sheldon96

What I mean is how do I make my mouth move like the white line that is moving on the forehead of the smiley face??

jeremydouglass

See how the groove is the name of your audio source, and how the white lines (line 31 of your code) is using information from groove.left.get() to draw?

Try using that same sound data while positioning your arc. There are many things you could try:

• arc(320, 180, 200, 200, 0, PI * 2 * groove.left.get(0), CHORD);
• arc(320, 180 + (50 * groove.left.get(0)), 200, 200, 0, PI, CHORD);
• arc(320 + (50 * groove.left.get(0)), 180, 200, 200, 0, PI, CHORD);

If none of them work, maybe you should try something other than a line! If the changes are too "jittery", you also might want to consider using some other source of information -- for example, the volume -- or smoothing / averaging the values over time so that your drawing changes slowly, even when the sound changes quickly.

Sheldon96

I dont get what you mean by this "the volume -- or smoothing / averaging the values over time" Jeremy. Sorry my English is not that good. And how do I make my drawings change slowly when the sound changes quickly?

jeremydouglass

Try this:

1. look up lerp()
2. create a new variable, float slowChange
3. each draw loop, use lerp() to mix a little bit of the new groove.left.get(0) value into slowChange. Set the amount (amt) how sensitive you want.
4. use slowChange in your drawing instead of groove.left

Update every draw:

slowChange = lerp(slowChange, groove.left.get(0), 0.1);

And use to draw:

arc(320, 180 + (50 * slowChange), 200, 200, 0, PI, CHORD);

So if groove.left jumps up and down from highest to lowest, slowChange will move, but more slowly:

groove.left: 0,   1,   0,   1,   1,   1,   0
slowChange:  0.5, 0.6, 0.5, 0.6, 0.7, 0.8, 0.7

Sheldon96

Dont get what you mean.. Can you edit it inside my code and show me please?

Sheldon96

Hey Jeremy, is it possible for me to make the eyes move too?

jeremydouglass

Why don't you post your latest code -- show what you have working so far.

How do you want the eyes to move? What makes them move, how?

Sheldon96

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer groove;
AudioMetaData meta;
BeatDetect beat;
float yoff = 0.0;
float slowChange;

void setup()
{

size(640, 360, P3D);

minim = new Minim(this);
groove = minim.loadFile("Marshmello - Alone.mp3", 2048);
groove.play();
beat = new BeatDetect();
ellipseMode(CENTER);

}
void draw() 
{
background(#9C69D3);
beat.detect(groove.mix);
stroke(255);

  for(int i = 0; i < groove.bufferSize() - 1; i++)
  {
   arc(320, 180 + (50 * groove.left.get(5)), 300, 200, 0, PI, CHORD);

  }
fill(#2FCB38);
ellipse(320, 180, 300, 300);

fill(#149CC4);
ellipse(270, 120, 60, 60);

fill(#DAFC03);
ellipse(370, 120, 90, 90);

if(keyPressed)
{
fill(#2FCB38);
stroke(0);

arc(320 + (50 * groove.right.get(0)), 320, 250, 200, 0, -PI, CHORD);
}
else {
  fill(#2FCB38);
stroke(0);

}

fill(#1F0BDB);
beginShape();
 float xoff = 0;
  for (float x = 0; x <= width; x += 10) {
    float y = map(noise(xoff, yoff), 10, 1, 0, 300);
    vertex(x, y); 
    xoff += 0.10;
  }
  yoff += 0.10;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);
}

I have only done all these so far.. Is it possible for the eyes to move with the beat too? and maybe change to a sad face when the beat is slow or something