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

p5.js Coding Questions
1

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
It seems to have gaps in the line, and very low resolution. Zooming in with the browser still shows that:

graph_zoomed
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:

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)

2

Have you tried curveVertex()?

3

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.

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 on createGraphics() … so I think I’ll try that next.

4

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

2 Likes
5

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