Making a PGraphics filled with points (grade of white is based on the amplitude) and texture that to the ever evolving arc

Processing Libraries
1

I’m working on an audio visualisation that’s basically supposed to be a circular spectrogram. I have a graph that shows the frequency already and an arc, that evolves based on the time passed. Now I would like to fill the arc with white points based on the amplitude of each frequency, much like here: https://vimeo.com/27135957. Apparently, I need to make a PGraphics that is filled with points, which change from white to black based on the amplitude. Then I need to texture the arc with this graphic. Does anyone know how to do this?

Basically, what I’m working on is related to this: Creating Circular Spectrogram

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer song;
FFT fft;
PGraphics pg;
PShape arc;

float deg = 90;
float rad = radians(deg);

void setup()
{
  size(1000, 1000);

  minim = new Minim(this);
  song = minim.loadFile("Anthology.mp3");
  song.play();

  fft = new FFT(song.bufferSize(), song.sampleRate());

  pg = createGraphics(width, height);
}

void draw()
{
  background(0);
  fft.forward(song.mix);

  for (int i = 0; i < fft.specSize(); i++)
  {
    pushMatrix();
    stroke(255);
    line(i, height, i, height - fft.getBand(i)*0.5);
    popMatrix();
    println(fft.getBand(i));

    //Map Amplitude to 0 → 255, fill with points and color them
    float brightness = map(fft.getBand(i), -1, 1, 0, 255);
    pg.beginDraw();
    pg.endDraw();

    fill(255, 255, 255,);
    noStroke();
    float evolution = radians(map(song.position(), 0, song.length(), 90, 450));

    //Put PGraphics as texture on the arc
    texture(pg);
    arc(height/2, height/2, height-100, height-100, rad, evolution, PIE);
  }
}
1 Like
2

There are several problems here. I would suggest breaking your sketch down into small parts, then working back up.

  1. You are playing music.
  2. You are drawing a small live histogram at the bottom of the screen.
  3. BUT, you aren’t drawing each value a a dot of varying brightness arranged in a line, you are instead drawing a 2D area of pure white histogram lines.
  4. ALSO you aren’t drawing that to the PGraphics for texture – you beginDraw and endDraw, and there are no draw commands in there.
  5. ALSO, you aren’t drawing the PGraphics texture onto the arc at all – the PGraphics is empty, but even if it was not empty then still texturing an arc doesn’t work that way.

I’d suggest starting out by just drawing your texture to the main canvas. A collection of bright dots, a line at a time, that sweeps across the canvas in a rectangle. No PGraphics, no arc.

Once you get that working, draw that onto a PGraphics instead, and display it on the main canvas with image(pg,0,0).

Once you get that working, THEN try to texture the arc with it.

When you get to the arc step, you may find this past discussion helpful:

2 Likes
3

Thanks for the reply! That’s in fact very helpful, I’ll try everything you suggested!!

1 Like