I am drawing a spectrum graph, like the one from fft example. Code looks bit like below and draws fine:
for (let i = 0; i < data.getRowCount() / 1; i++) {
let x = p.map(i, 0, data.getRowCount() / 1, 0, p.width);
let y = p.map(
data.getNum(i, "db"),
0,
100,
p.height,
0
);
p.vertex(x, y);
}
While showing the spectrum, how do i draw the two lines x and y and also show the scale on the graph. I want to show x values like 0, 10, 20, 30, etc. same for y.
Also a side question, the above draw is super slow when data.getRowCount is a big number. Is the any tips on drawing the spectrum for many points and still have a smooth performance.
let x = p.map(0, 0, data.getRowCount() , 0, p.width);
let y = p.map(
-4,
0,
100,
p.height,
0
);
line(x,y, p.width, y);
for the numbers
for (let i = 0; i < data.getRowCount() ; i+=10) {
let x = p.map(i, 0, data.getRowCount(), 0, p.width);
let y = p.map(
-4,
0,
100,
p.height,
0
);
line(x,y,
x,y+6);
}
or something like this.
The speed
You could do the calculation in setup() and store everything in an int array[] and draw from this. Maybe faster.
Doing the calculation in setup did improved the performance. A bit.
But the line approach makes line dotted at some places, so not that good rendering with line.
With vertex, it looks more smooth. Even with calculation in setup, i think it is still not that smooth. I will try to put everything in a github repo, so its easy for others to take a look.
