How to show xy coordinate scale itself

p5.js Coding Questions
1

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.

For example, i want to make an x-y plane with values on scale like 100k, 200k, etc as shown here : https://chart-studio.plotly.com/~Emmanouil/20/frequency-spectrum/#/

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.

2

the lines

use command line

      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.

3

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.

canvas1
canvas11920×1440 84 KB

Above is the pic made from line. With vertex i think the graph looks more smooth.

4

canvas3
canvas31920×1440 46.5 KB

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.

5

I didn’t disagree with vertex.

Even with vertex you can pre-calc the values. Maybe as float.

My lines were referring to the x/y coordinates scale.

Regards, Chrisir