# Plotting a graph with beginShape() gives low resolution and gaps

**URL:** <https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535>\
**Category:** Coding Questions\
**Created:** [November 19, 2020, 3:51pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535 "2020-11-19T15:51:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alphydan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alphydan/32/536_2.png) [@alphydan](https://discourse.processing.org/u/alphydan)\
**Post date:** [November 19, 2020, 3:51pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535/1 "2020-11-19T15:51:30Z")

</div>

Using `p5.js`, I have some data from a .csv file (in this case 1200 points) which I’m trying to plot.  
To do so, I have placed the points inside a `beginShape() ... endShape()` object. Here is a screenshot of part of the result:  
 ![graph1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/76039ea6a7bf8d10f4cbb8ec425c77bc97daff80.png)  
It seems to have gaps in the line, and very low resolution. Zooming in with the browser still shows that:

![graph_zoomed](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b0ecdd1b67994f8d4b829b2047982be866d65ec6.png)  
I would like it to be a continuous line with high resolution. Here are some things I’ve tried:

- `createCanvas()` using options `displayWidth` or `windowWidth`
- tested it in different screens with different resolution
- changed `strokeWeight()`
- use `vertex()` or `curveVertex()`
- stretch or shrink x-axis (in the code below, mapping the `r` in vertices to `r/2` or `2r`

Here’s the part which defines the curve:

```auto
beginShape(LINES)
     for (let r = 0; r < nr_points; r++) {
      vertex(r, all_points[r][1]);
      // curveVertex(r, all_points[r][1]);
     }
endShape();

```

What should I try next? Or is there a different strategy that I’m missing?  
(context note: If possible, I would prefer not to use a standard plotting library, like matplotlib or such, because the graph is part of an artistic context which needs a lot of tweaking)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 19, 2020, 5:40pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535/2 "2020-11-19T17:40:52Z")

</div>

Have you tried curveVertex()?

> **[reference | p5.js](https://p5js.org/reference/#/p5/curveVertex)**

---

<div class="post-metadata">

**Author:** ![alphydan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alphydan/32/536_2.png) [@alphydan](https://discourse.processing.org/u/alphydan)\
**Post date:** [November 19, 2020, 5:49pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535/3 "2020-11-19T17:49:18Z")

</div>

Thank you @tony, but yes. It’s one of the things I mentioned I tried (see original question).  
I just tried removing `LINE` in `beginShape(LINE)` and that seems to have gotten rid of the gaps.

```auto
fill(0); // fill the curve
    stroke(225);
    strokeWeight(1);
    beginShape()
     for (let r = 0; r < nr_points; r++) {
      curveVertex(curve_bounds[0]+r, all_points[r][1]);
     }
     endShape();

```

Is the resolution just a matter of making `createCanvas` very big by hand? I just found [this discussion](https://stackoverflow.com/questions/55211647/how-do-i-save-a-p5-js-canvas-as-a-very-large-png) on `createGraphics()` … so I think I’ll try that next.

---

<div class="post-metadata">

**Author:** ![Vako](https://avatars.discourse-cdn.com/v4/letter/v/a9adbd/32.png) [@Vako](https://discourse.processing.org/u/Vako)\
**Post date:** [November 19, 2020, 7:11pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535/4 "2020-11-19T19:11:24Z")

</div>

As far as I know the paremeter LINE for the beginShape what it does is makes non-continuous straight lines, meaning every two vertices are a line, if you want a continuous curve line you don’t need to put a parameter  
For the resolution I’m not really sure, I’d like to guess it depends on the points

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [November 19, 2020, 9:44pm UTC](https://discourse.processing.org/t/plotting-a-graph-with-beginshape-gives-low-resolution-and-gaps/25535/5 "2020-11-19T21:44:56Z")

</div>

Oops, sorry, didn’t see the commented out code. Hope you figure it out!