# How to show xy coordinate scale itself

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.

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.

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.

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

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.

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