How to draw a continuous line from a set of consecutive points?

Contributed Library Questions

nardove

How to draw a continuous line from a set of consecutive points?

in Contributed Library Questions • 2 years ago

Hi,

I have a grid of points[m x n] and need to draw a series of horizontal lines, but all I get is a dash line pattern,

I am using the GLGraphics library, here is a code snippet

points = new GLModel(this, totalPoints, LINES, GLModel.DYNAMIC);
points.initColors();
points.beginUpdateVertices();
// for (int i = 0; i < totalPoints; i++) points.updateVertex( i, pointsPos[i].x, pointsPos[i].y, pointsPos[i].z );
for (int i = 0; i < GRID_ROWS; i++) {
for (int j = 0; j < GRID_COLUMS; j++) {
int n = i + j * GRID_ROWS;
System.out.println("n(" + n + "): " + n % 2);
points.updateVertex(n, pointsPos[n].x, pointsPos[n].y, pointsPos[n].z);
}
}
points.endUpdateVertices();

I try to use LINE_STRIP or LINE_LOOP but these constants are not valid parameters to the GLModel constructor, and I have no idea how to set this up.

Any help will be much appreciated

- rS

Replies(16)

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Solve one problem but got into another, I manage to get my lines but now they connect each other

Change the code to:

points = new GLModel(this, totalPoints, GLModel.LINE_STRIP, GLModel.DYNAMIC);

I need to remove the connecting yellow lines, any ideas?

- rS

kooogy

Re: Re: How to draw a continuous line from a set of consecutive points?

2 years ago

remove your inner loop (for columns) entirely, you don't need it.

then for each line just connect the first point on the line to the last point on the line.

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Thanks kooogy but that wont work, I each line is a series of horizontal vertices, if you look at my first image at the beginning of the topic you will see what I mean

kooogy

Re: Re: How to draw a continuous line from a set of consecutive points?

2 years ago

and what i'm saying is join v0 with v7, v8 to v15 etc

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Sorry my illustration is not explaining my problem accurately enough, as you can see from the image the lines are build from a set of consecutive points but each horizontal line is connected by one end and that is what I am trying to avoid so I can eliminate the diadiagonal lines from the back

I calculate the points by building a simple grid

gridSpaceX = GRID_WIDTH / GRID_ROWS;
gridSpaceY = GRID_HEIGHT / GRID_COLUMS;
gridCenterX = ((GRID_ROWS - 1) * gridSpaceX) / 2;
gridCenterY = ((GRID_COLUMS - 1) * gridSpaceY) / 2;
for ( int i = 0; i < GRID_ROWS; i++ ) {
for ( int j = 0; j < GRID_COLUMS; j++ ) {
int offset = i + j * GRID_ROWS;
float x = i * gridSpaceX;
float y = j * gridSpaceY;
float z = 0.0f;
Vec3D pv = new Vec3D();
pv.x = x;
pv.y = y;
pv.z = z;
pointsPos[offset] = pv;
}
}
totalPoints = GRID_ROWS * GRID_COLUMS;

and them I take that data and draw a LINE_STRIP, but I have no idea how to eliminate the connecting diagonal line

points = new GLModel( this, totalPoints, GLModel.LINE_STRIP, GLModel.DYNAMIC );
points.beginUpdateVertices();
for (int i = 0; i < totalPoints; i++) points.updateVertex( i, pointsPos[i].x, pointsPos[i].y, pointsPos[i].z );
points.endUpdateVertices();

Cheers

- rS

cedrickie..

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

what if you put the creation of the linestrips in the "j" loop, by doing that you create different lines without connections.

like that in processing syntax :

for(int x =0; x<resX-1; x++) {
for(int y =0; y<resY-1; y++) {
beginShape();
vertex(x*meshSize,y*meshSize );
vertex((x+1)*meshSize,y*meshSize );
endShape(CLOSE);
}
}

andres

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

The problem of using LINE_STRIP in a single GLModel objects is that all the vertices will be understood as belonging to the same strip. The only way to break up strips is to put them in separate GLModels, which could impact performance.

When setting the model geometry to LINES, then the points are always taken in pairs to generate independent lines. From the first post, I'd say that some vertex duplication could solve the problem. For example, if the first line ends at vertex v4, then the creating a GLModel with the following vertices: v0, v1, v1, v2, v2, v3, v3, v4, v5, v6, v6, v7... should result in the desired horizontal lines without the connecting diagonals. I think this is more efficient than creating separated GLModels for each strip.

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Hi Andres,

Still trying to sort this out following your suggestion but is not working,

Here is the code:

points = new GLModel( this, totalPoints, LINES, GLModel.DYNAMIC );
points.beginUpdateVertices();
for ( int i = 0; i < totalPoints-GRID_COLUMS; i++ ) {
int n = i % (GRID_ROWS-1);
int m = (i + n) - ((n + 1) * 2) + 2;
int k = (m / (GRID_ROWS-1));
int a = i + k;
int b = (i + k) + 1;
System.out.println( i + " - " + a + "," + b + " - " + k );
//points.updateVertex( i, pointsPos[i].x, pointsPos[i].y, pointsPos[i].z );
points.updateVertex( a, pointsPos[a].x, pointsPos[a].y, pointsPos[a].z );
points.updateVertex( b, pointsPos[b].x, pointsPos[b].y, pointsPos[b].z );
}
points.endUpdateVertices();

A little messy but I get this results

0 - 0,1 - 0

1 - 1,2 - 0

2 - 2,3 - 0

3 - 3,4 - 0

4 - 5,6 - 1

5 - 6,7 - 1

6 - 7,8 - 1

7 - 8,9 - 1

8 - 10,11 - 2

9 - 11,12 - 2

10 - 12,13 - 2

11 - 13,14 - 2

12 - 15,16 - 3

...

Any ideas?

- rS

andres

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

I think you need to create a GLModel with a size of GRID_ROWS * 2 * (GRID_COLUMS - 1), and specify the vertices that are shared between line segments twice.

kooogy

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

for (int i = 0; i < GRID_ROWS; i++) {
for (int j = 0; j < GRID_COLUMNS - 1; j++) { // NB the -1 here
int a = i * GRID_COLUMNS + j; // i've also fixed the spelling of COLUMNS 8)
int b = a + 1;
points.updateVertex(a, pointsPos[a].x, pointsPos[a].y, pointsPos[a].z);
points.updateVertex(b, pointsPos[b].x, pointsPos[b].y, pointsPos[b].z);
}
}

try this. should draw v0-v1, v1-v2, v2-v3 etc but not the diagonal.

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Thanks everybody for all the help I really appreciate it, unfortunately still not working

@kooogy using your method I get the following indices and the exact same image as I previously post

0,1

1,2

3,4

4,5

6,7

7,8

9,10

10,11

12,13

13,14

looks like is skipping on step, 0,1 1,2 jumps to 3,4 4,5 ... if I change it to

for (int i = 0; i < GRID_ROWS - 1; i++) {
for (int j = 0; j < GRID_COLUMNS; j++) {
int a = i + j * GRID_ROWS;
int b = a + 1;
System.out.println( a + "," + b );
points.updateVertex(a, pointsPos[a].x, pointsPos[a].y, pointsPos[a].z);
points.updateVertex(b, pointsPos[b].x, pointsPos[b].y, pointsPos[b].z);
}
}

I get the right indices but still the same results

@Andres at the moment I am working with GRID_ROWS = 5 and GRID_COLUMNS = 3 for a totalPoints = 15, following your suggestion GRID_ROWS * 2 * (GRID_COLUMS - 1) I get totalPoints = 20 that is +5 points, I also dont get how to "specify the vertices that are shared" is there a special method to update the vertices for this?

- rS

kooogy

Re: Re: How to draw a continuous line from a set of consecutive points?

2 years ago

ok, i've not used points.updateVertex before and missed that the first argument is the index. in which case you need another variable:

int count = 0;
for (int i = 0; i < GRID_ROWS; i++) {
for (int j = 0; j < GRID_COLUMNS - 1; j++) { // NB the -1 here
int a = i * GRID_COLUMNS + j; // i've also fixed the spelling of COLUMNS 8)
int b = a + 1;
points.updateVertex(count++, pointsPos[a].x, pointsPos[a].y, pointsPos[a].z);
points.updateVertex(count++, pointsPos[b].x, pointsPos[b].y, pointsPos[b].z);
}
}

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

@Andres to answer my previous question do I need to use this constructor and pass the indices array {0, 1, 1, 2, 2, 3, 3, 4, 5, 6, 6, 7, ... } for the vertArray parameter?

GLModel(processing.core.PApplet parent, float[] vertArray, int mode, int usage)

I cant test this until I get home, but I got a feeling this may be what I need

- rS

andres

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

Yes you could use indices, this in fact would be the most efficient way because then you don't need to duplicate vertex data in the model.

Without using indices, you could do something like this:

import processing.opengl.*;
import codeanticode.glgraphics.*;
float GRID_WIDTH = 400;
int GRID_ROWS = 10;
float GRID_HEIGHT = 400;
int GRID_COLUMS = 10;
GLModel points;
void setup() {
size(400, 400, GLConstants.GLGRAPHICS);
float gridSpaceX = GRID_WIDTH / GRID_ROWS;
float gridSpaceY = GRID_HEIGHT / GRID_COLUMS;
float gridCenterX = ((GRID_ROWS - 1) * gridSpaceX) / 2;
float gridCenterY = ((GRID_COLUMS - 1) * gridSpaceY) / 2;
PVector pointsPos[] = new PVector[GRID_ROWS * GRID_COLUMS];
for (int i = 0; i < GRID_ROWS; i++ ) {
for (int j = 0; j < GRID_COLUMS; j++) {
int offset = i + j * GRID_ROWS;
float x = i * gridSpaceX;
float y = j * gridSpaceY;
float z = 0.0f;
PVector pv = new PVector(x, y, z);
pointsPos[offset] = pv;
}
}
int totalPoints = GRID_ROWS * 2 * (GRID_COLUMS - 1);
points = new GLModel(this, totalPoints, LINES, GLModel.DYNAMIC);
points.initColors();
points.beginUpdateColors();
for (int i = 0; i < totalPoints; i++) points.updateColor(i, 255, 255, 225);
points.endUpdateColors();
points.beginUpdateVertices();
int n = 0;
for (int i = 1; i < GRID_ROWS; i++) {
for (int j = 0; j < GRID_COLUMS; j++) {
int n0 = (i - 1) + j * GRID_ROWS;
int n1 = i + j * GRID_ROWS;
points.updateVertex(n, pointsPos[n0].x, pointsPos[n0].y, pointsPos[n0].z);
n++;
points.updateVertex(n, pointsPos[n1].x, pointsPos[n1].y, pointsPos[n1].z);
n++;
}
}
points.endUpdateVertices();
}
void draw() {
GLGraphics renderer = (GLGraphics)g;
renderer.beginGL();
background(0);
renderer.model(points);
renderer.endGL();
}

nardove

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

@Andres thanks a lot that works but only for a n x n set is does not work for m x n but that is fine I have enough to work this out by my self, on another note will you be able to provide a simple example on using indices?

Thanks

- rS

andres

Re: How to draw a continuous line from a set of consecutive points?

2 years ago

This is the version using indices:

import processing.opengl.*;
import codeanticode.glgraphics.*;
float GRID_WIDTH = 400;
int GRID_ROWS = 10;
float GRID_HEIGHT = 400;
int GRID_COLUMS = 10;
GLModel points;
void setup() {
size(400, 400, GLConstants.GLGRAPHICS);
float gridSpaceX = GRID_WIDTH / GRID_ROWS;
float gridSpaceY = GRID_HEIGHT / GRID_COLUMS;
float gridCenterX = ((GRID_ROWS - 1) * gridSpaceX) / 2;
float gridCenterY = ((GRID_COLUMS - 1) * gridSpaceY) / 2;
PVector pointsPos[] = new PVector[GRID_ROWS * GRID_COLUMS];
for (int i = 0; i < GRID_ROWS; i++ ) {
for (int j = 0; j < GRID_COLUMS; j++) {
int offset = i + j * GRID_ROWS;
float x = i * gridSpaceX;
float y = j * gridSpaceY;
float z = 0.0f;
PVector pv = new PVector(x, y, z);
pointsPos[offset] = pv;
}
}
int totalPoints = GRID_ROWS * GRID_COLUMS;
points = new GLModel(this, totalPoints, LINES, GLModel.DYNAMIC);
points.initColors();
points.beginUpdateColors();
for (int i = 0; i < totalPoints; i++) points.updateColor(i, 255, 255, 225);
points.endUpdateColors();
points.beginUpdateVertices();
for (int i = 0; i < totalPoints; i++) points.updateVertex(i, pointsPos[i].x, pointsPos[i].y, pointsPos[i].z);
points.endUpdateVertices();
int totalIndices = GRID_ROWS * 2 * (GRID_COLUMS - 1);
int indices[] = new int[totalIndices];
int n = 0;
for (int i = 1; i < GRID_ROWS; i++) {
for (int j = 0; j < GRID_COLUMS; j++) {
indices[n++] = (i - 1) + j * GRID_ROWS;
indices[n++] = i + j * GRID_ROWS;
}
}
points.initIndices(totalIndices);
points.updateIndices(indices);
}
void draw() {
GLGraphics renderer = (GLGraphics)g;
renderer.beginGL();
background(0);
renderer.model(points);
renderer.endGL();
}

Top Reply