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

**URL:** <https://discourse.processing.org/t/making-a-pgraphics-filled-with-points-grade-of-white-is-based-on-the-amplitude-and-texture-that-to-the-ever-evolving-arc/21561>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [June 4, 2020, 3:21pm UTC](https://discourse.processing.org/t/making-a-pgraphics-filled-with-points-grade-of-white-is-based-on-the-amplitude-and-texture-that-to-the-ever-evolving-arc/21561 "2020-06-04T15:21:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![inzn](https://avatars.discourse-cdn.com/v4/letter/i/e19adc/32.png) [@inzn](https://discourse.processing.org/u/inzn)\
**Post date:** [June 4, 2020, 3:21pm UTC](https://discourse.processing.org/t/making-a-pgraphics-filled-with-points-grade-of-white-is-based-on-the-amplitude-and-texture-that-to-the-ever-evolving-arc/21561/1 "2020-06-04T15:21:18Z")

</div>

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](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](https://discourse.processing.org/t/creating-circular-spectrogram/6502)

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 6, 2020, 5:41pm UTC](https://discourse.processing.org/t/making-a-pgraphics-filled-with-points-grade-of-white-is-based-on-the-amplitude-and-texture-that-to-the-ever-evolving-arc/21561/2 "2020-06-06T17:41:08Z")

</div>

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:

> [@How to close a PShape with 2 arcs and two lines](https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287/14):
>
> There are a few gotchas, so consult their reference pages carefully. Be careful about how you include the minimum number of points per curve-type points to get an effect, and lead and follow with the needed extra points – e.g. with a control points for curveVertex, and leading with a normal point for bezierVertex. “The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve.” [https://processing.org/reference/curveVertex\_.html](https://processing.org/reference/curveVertex_.html) You ca…

---

<div class="post-metadata">

**Author:** ![inzn](https://avatars.discourse-cdn.com/v4/letter/i/e19adc/32.png) [@inzn](https://discourse.processing.org/u/inzn)\
**Post date:** [June 6, 2020, 7:13pm UTC](https://discourse.processing.org/t/making-a-pgraphics-filled-with-points-grade-of-white-is-based-on-the-amplitude-and-texture-that-to-the-ever-evolving-arc/21561/3 "2020-06-06T19:13:04Z")

</div>

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