# How to show xy coordinate scale itself

**URL:** <https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383>\
**Category:** Coding Questions\
**Created:** [May 28, 2020, 8:27pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383 "2020-05-28T20:27:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![suvir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/suvir/32/9357_2.png) [@suvir](https://discourse.processing.org/u/suvir)\
**Post date:** [May 28, 2020, 8:27pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383/1 "2020-05-28T20:27:01Z")

</div>

I am drawing a spectrum graph, like the one from fft example. Code looks bit like below and draws fine:

```auto
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/#/](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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 4:02pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383/2 "2020-05-29T16:02:08Z")

</div>

**the lines**

use command line

```auto
      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**

```auto
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**

> [@suvir](#):
>
> Is the any tips on drawing the spectrum for many points and still have a smooth performance.

You could do the calculation in setup() and store everything in an int array and draw from this. Maybe faster.

---

<div class="post-metadata">

**Author:** ![suvir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/suvir/32/9357_2.png) [@suvir](https://discourse.processing.org/u/suvir)\
**Post date:** [May 29, 2020, 8:30pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383/3 "2020-05-29T20:30:35Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3cb5556e02a450ec2fd28bd3a37ea706537d64d3.png)

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

---

<div class="post-metadata">

**Author:** ![suvir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/suvir/32/9357_2.png) [@suvir](https://discourse.processing.org/u/suvir)\
**Post date:** [May 29, 2020, 8:33pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383/4 "2020-05-29T20:33:03Z")

</div>

![canvas3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27f86f118abafd6fdcafb0b727f44dcee96afa71.png)

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 29, 2020, 9:30pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383/5 "2020-05-29T21:30:03Z")

</div>

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