Deleting lines from a mesh

Hi ,
i’m trying to figure out a why or how not to not get this horizontal lines when i create a mesh from a image or if i can delete them


the code for generating the mesh

	for(unsigned int k = 0; k < info.files.size(); k++){
			images[k].load(info.files[k]);
			mesh.clear();
      

			imageW = images[k].getWidth();
			imageH = images[k].getHeight();

			offsets.clear();
			spacing = 25 ;
   

				for (int y = 0; y < imageH; y=y+spacing)
				{
					for (int x = 0; x < imageW ; x =x+spacing)
					{
						//ofColor c =images[k].getColor((imageW-4)-x,(imageH-4)-y);
            ofColor c =images[k].getColor(x,y);
            float la = c.getSaturation();
            
            
						float brightness = ofMap(c.getBrightness(), 0, 255,0.0, 255);
						float intesity = ofMap( c.getLightness(),0,255,0.0,255,true);
            
								ofPoint pos(x  -imageW/2, y  -imageH /2, - brightness);
								mesh.addColor(images[k].getColor(x * 1, y * 1));
                mesh.addVertex(pos);
								offsets.push_back(ofPoint(pos));
					}
				}

     numVerts = mesh.getNumVertices();  
     
      
       int cols = imageW/spacing;
       int rows = imageH/spacing;
       for (int y = 0; y < rows; y++)
        {
          for (int x = 0; x < cols; x++)
          {
            mesh.addIndex(x+y*cols);
            mesh.addIndex((x+1)+y*cols);
            mesh.addIndex(x+(y+1)*cols);

            mesh.addIndex((x+1)+y*cols);
            mesh.addIndex((x+1)+(y+1)*cols);
            mesh.addIndex(x+(y+1)*cols);

          }
        }
      
       
  
		 } 
	}

Hi,
I assume you draw the mesh with mesh.draw() (instead of mesh.drawWireframe()).
The horizontal lines you see come from indices that connect the last vertex of a row with the first one of the next row.
Hopefully the code below makes clear how to avoid this.
It joins vertices to a line (row) in this manner: [0,1][1,2][2,3], so I translated this to: “double each vertex when it’s not the first or last of a row”.
Edit: a more elegant way might be to double the indices, and not the vertices…

ofMesh m;
ofEasyCam cam; // Camera to better understand the mesh, and for zooming

//--------------------------------------------------------------
void ofApp::setup(){
    m.setMode(OF_PRIMITIVE_LINES);
    m.setupIndicesAuto();
    
    int num = 3;
    for(int y=0; y<num; y++){
        for(int x=0; x<num; x++){
            if(x != 0 && x != num-1){ // Check if vertex is not first or last of the row
                m.addVertex(glm::vec3(x,y,0));
                m.addVertex(glm::vec3(x,y,0));
            } else{
                m.addVertex(glm::vec3(x,y,0));
            }
        }
    }
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    ofSetColor(255);
    cam.begin();
        m.draw();
    cam.end();
}

hey @Jildert yes i didn’t put it as drawWireframe just draw, i try to implement your code but now i get the images distorted in the mesh so i think i might be confuses , should i replace num with my spacing variable or the image width? because i am getting the image width and height to generate the mesh like this

        imageW = images[k].getWidth();
	imageH = images[k].getHeight();

	spacing = 15;
  
				for (int y = 0; y < imageH; y=y+spacing)
				{
					for (int x = 0; x < imageW ; x =x+spacing)
					{
                                          ofColor c =images[k].getColor(x,y);
       
						float brightness = ofMap(c.getBrightness(), 0, 255, -0.0, 255);
				
            
            
								ofPoint pos(x  -imageW/2, y  -imageH /2, - brightness);
								mesh.addColor(images[k].getColor(x * 1, y * 1));
                                                               if(x != 0 && x != spacing -1){ 
                mesh.addVertex(pos);
                mesh.addVertex(pos);
            } else{
                mesh.addVertex(pos);
            }
               
               
							 offsets.push_back(ofPoint(pos));
					}
				}

Sorry for abstracting too much :wink: Yes, num replaces width.

Does this work?

imageW = images[k].getWidth();
imageH = images[k].getHeight();

spacing = 15;

for (int y = 0; y < imageH; y++){
    for (int x = 0; x < imageW ; x++){
        ofColor c =images[k].getColor(x,y);
        float brightness = ofMap(c.getBrightness(), 0, 255, -0.0, 255);
        
        ofPoint pos((x*spacing)  -imageW/2, (y*spacing)  -imageH /2, - brightness);
        
       if(x != 0 && x != imageW -1){
           mesh.addVertex(pos);
           mesh.addColor(images[k].getColor(x * 1, y * 1));
           
           mesh.addVertex(pos);
           mesh.addColor(images[k].getColor(x * 1, y * 1));
        } else{
            mesh.addVertex(pos);
            mesh.addColor(images[k].getColor(x * 1, y * 1));
        }
         offsets.push_back(ofPoint(pos));
    }
}

not really jejejej

1 Like

However, it looks cool.
And strange, since this works here.

float imageW = 200;
float imageH = 200;

float spacing = 15;

for (int y = 0; y < imageH; y++){
    for (int x = 0; x < imageW ; x++){
        float brightness = ofRandom(10);
        ofPoint pos((x*spacing)  -imageW/2, (y*spacing)  -imageH /2, - brightness);
       if(x != 0 && x != imageW -1){
           mesh.addVertex(pos);
           mesh.addVertex(pos);
        } else{
            mesh.addVertex(pos);
        }
    }
}

I’ve removed the stuff that I don’t have access to (the images / colors).

Have you called?

    mesh.setMode(OF_PRIMITIVE_LINES);
    mesh.setupIndicesAuto();

And otherwise just post the hole thing?

Aaaaha, after looking at your initial pictures I see I went a bit far with the horizontal-thing, by only generating horizontal lines. That’s not what you’re after, right?

    float imageWidth = 100;
    float imageHeight = 100;
    
    float spacing = 10;
    
    m = ofMesh::plane(imageWidth, imageHeight, spacing, spacing); // Play around with these values to get what you need
    
    for(int i=0; i<m.getNumVertices(); i++){ // Add Z-offset to vertices
        m.setVertex(i, m.getVertex(i) + glm::vec3(0,0,ofRandom(10)));
    }
    
    m.setMode(OF_PRIMITIVE_LINES);
    m.clearIndices();
    for(int y=0; y<spacing; y++){ // Connect everything to horizontal rows
        for(int x = 0; x<spacing; x++){
            if(x!= 0 && x != spacing-1){
                m.addIndex((y*spacing)+x);
                m.addIndex((y*spacing)+x);
            } else{
                m.addIndex((y*spacing)+x);
            }
        }
    }
    for(int y=0; y<spacing; y++){ // Connect each vertex of each row to the aligned vertex a row above
        for(int x = 0; x<spacing; x++){
            if(y != spacing-1){
                m.addIndex((y*spacing)+x);
                m.addIndex(((y+1)*spacing)+x);
            }
        }
    }

examples/shader/08_displacementMap may also be interesting here

yeah im not after that i’m more after my first image
here is the complete cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
  ofEnableSmoothing();
  ofSetWindowShape(1500,900);
  ofBackground(10,18,15);
  ofSetVerticalSync(true);
  mesh.setMode(OF_PRIMITIVE_LINES);
  mesh.enableColors();
	mesh.enableIndices();
	glEnable(GL_LINE_SMOOTH);

	cam.setDistance(1000);
	cam.setVFlip(true);

  this->gui.setup();
  gui.setTheme(new MyTheme());
  this->guiVisible = true;
  
    //save config
    XML_load_app(init, XML_path);
        init.add(amount);

}
//--------------------------------------------------------------
void ofApp::update(){
 

	for (int i = 0; i < numVerts; i++)
	{
      ofPoint vert = mesh.getVertex(i);
      ofPoint off =offsets[i];

      vert.z = off.z * amount;
      mesh.setVertex(i,vert); 
  }
  ofSetLineWidth(lineWidth);
}
//--------------------------------------------------------------
void ofApp::draw(){
  

	ofEnableDepthTest();
		cam.begin();
    //cam.enableOrtho();
    ofRotateY(180);
			mesh.drawWireframe();		
    //cam.disableOrtho();
		cam.end();
	ofDisableDepthTest();


    
// Gui
	this->mouseOverGui = false;
	if (this->guiVisible)
	{
		this->mouseOverGui = this->imGui();
	}
	if (this->mouseOverGui)
	{
		this->cam.disableMouseInput();
	}
	else
	{
		this->cam.enableMouseInput();
	}

}

//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo info){
   
   if( info.files.size() > 0 ){
		dragPt = info.position;
		
		images.assign( info.files.size(), ofImage() );
		for(unsigned int k = 0; k < info.files.size(); k++){
			images[k].load(info.files[k]);
			mesh.clear();
      

			imageW = images[k].getWidth();
			imageH = images[k].getHeight();

			offsets.clear();
			spacing = 15;
      int num =3;
   
				for (int y = 0; y < imageH; y=y+spacing)
				{
					for (int x = 0; x < imageW ; x =x+spacing)
					{
						//ofColor c =images[k].getColor((imageW-4)-x,(imageH-4)-y);
            ofColor c =images[k].getColor(x,y);
            float la = c.getSaturation();
            
            
						float brightness = ofMap(c.getBrightness(), 0, 255, -0.0, 255);
						float intesity = ofMap( c.getLightness(),0,255,0.0,255,true);
            
            
								ofPoint pos(x  -imageW/2, y  -imageH /2, - brightness);
                
								 mesh.addColor(images[k].getColor(x * 1, y * 1));
               
               mesh.addVertex(pos);
							 offsets.push_back(ofPoint(pos));
					}
				}

     numVerts = mesh.getNumVertices();  
     
      float connectionDistance = 25;
      //int numVerts = mesh.getNumVertices();
      for (int a=0; a<numVerts; a++) {
          ofVec3f verta = mesh.getVertex(a);
          for (int b=a+1; b<numVerts;b++) {
              ofVec3f vertb = mesh.getVertex(b);
              float distance = verta.distance(vertb);
              if (distance <= connectionDistance) {

                  // In OF_PRIMITIVE_LINES, every pair of vertices or indices will be
                  // connected to form a line
                  mesh.addIndex(a);
                  mesh.addIndex(b);
               }
          }
      } 
     
       
       int cols = imageW/spacing;
       int rows = imageH/spacing;
       for (int y = 0; y < rows; y++)
        {
          ofPoint verta =mesh.getVertex(y);
          for (int x = 0; x < cols; x++)
          {
            ofPoint vertb = mesh.getVertex(x);
            if(x != 0 && x != cols -1){
              mesh.addIndex(x);
              mesh.addIndex(y);
            }
            // mesh.addIndex(x+y*cols);
            // mesh.addIndex((x+1)+y*cols);
            // mesh.addIndex(x+(y+1)*cols);

            // mesh.addIndex((x+1)+y*cols);
            // mesh.addIndex((x+1)+(y+1)*cols);
            // mesh.addIndex(x+(y+1)*cols);
            

          }
        }
      
       
  
		 } 
	}
	
 
}

ill try this

1 Like

So i been trying to implement this but no luck basically i want to get something that looks like this

Could you perhaps specify what’s not working?

The modifications to my code to get the image you supplied would be:

for(int y=1; y<spacing-1; y++){ // Connect everything to horizontal rows (excepte first and last)
        for(int x = 0; x<spacing; x++){
            if(x!= 0 && x != spacing-1){
                m.addIndex((y*spacing)+x);
                m.addIndex((y*spacing)+x);
            } else{
                m.addIndex((y*spacing)+x);
            }
        }
    }
    for(int y=0; y<spacing; y++){ // Connect each vertex of each row to the aligned vertex a row above (except first (L) and last (R))
        for(int x = 1; x<spacing-1; x++){
            if(y != spacing-1){
                m.addIndex((y*spacing)+x);
                m.addIndex(((y+1)*spacing)+x);
            }
        }
    }

i get this lines from left to right


Hi,
Apologies for not trying your code first, before making suggestions.
Your code works here, and doesn’t show horizontal lines!
In ofApp.h I’ve guessed:

ofMesh mesh;
ofEasyCam cam;
int numVerts = 0;
vector<ofPoint> offsets;
float amount = 2;
vector<ofImage> images;

And ofApp.cpp (I’ve commented some (GUI) stuff):

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    ofEnableSmoothing();
    ofSetWindowShape(1500,900);
    ofBackground(10,18,15);
    ofSetVerticalSync(true);
    mesh.setMode(OF_PRIMITIVE_LINES);
    mesh.enableColors();
    mesh.enableIndices();
    glEnable(GL_LINE_SMOOTH);

    cam.setDistance(1000);
    cam.setVFlip(true);

//  this->gui.setup();
//  gui.setTheme(new MyTheme());
//  this->guiVisible = true;
  
    //save config
    
//    XML_load_app(init, XML_path);
//        init.add(amount);

}

//--------------------------------------------------------------
void ofApp::update(){
    for (int i = 0; i < numVerts; i++)
    {
      ofPoint vert = mesh.getVertex(i);
      ofPoint off = offsets[i];

      vert.z = off.z * amount;
      mesh.setVertex(i,vert);
  }
  ofSetLineWidth(1.0);
}
//--------------------------------------------------------------
void ofApp::draw(){
    ofEnableDepthTest();
    cam.begin();
    //cam.enableOrtho();
        ofRotateY(180);
//            mesh.drawWireframe();
        mesh.draw();
    //cam.disableOrtho();
    cam.end();
    ofDisableDepthTest();
    
// Gui
//    this->mouseOverGui = false;
//    if (this->guiVisible)
//    {
//        this->mouseOverGui = this->imGui();
//    }
//    if (this->mouseOverGui)
//    {
//        this->cam.disableMouseInput();
//    }
//    else
//    {
//        this->cam.enableMouseInput();
//    }

}

//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo info){
   if( info.files.size() > 0 ){
//        dragPt = info.position;
        
        images.assign( info.files.size(), ofImage() );
        for(unsigned int k = 0; k < info.files.size(); k++){
            images[k].load(info.files[k]);
            mesh.clear();
      

            float imageW = images[k].getWidth();
            float imageH = images[k].getHeight();

            offsets.clear();
            float spacing = 15;
      int num =3;
   
                for (int y = 0; y < imageH; y=y+spacing)
                {
                    for (int x = 0; x < imageW ; x =x+spacing)
                    {
                        //ofColor c =images[k].getColor((imageW-4)-x,(imageH-4)-y);
            ofColor c =images[k].getColor(x,y);
            float la = c.getSaturation();
            
            
                        float brightness = ofMap(c.getBrightness(), 0, 255, -0.0, 255);
                        float intesity = ofMap( c.getLightness(),0,255,0.0,255,true);
            
            
                                ofPoint pos(x  -imageW/2, y  -imageH /2, - brightness);
                
                                 mesh.addColor(images[k].getColor(x * 1, y * 1));
               
               mesh.addVertex(pos);
                             offsets.push_back(ofPoint(pos));
                    }
                }

            numVerts = mesh.getNumVertices();
     
      float connectionDistance = 25;
      //int numVerts = mesh.getNumVertices();
      for (int a=0; a<numVerts; a++) {
          ofVec3f verta = mesh.getVertex(a);
          for (int b=a+1; b<numVerts;b++) {
              ofVec3f vertb = mesh.getVertex(b);
              float distance = verta.distance(vertb);
              if (distance <= connectionDistance) {

                  // In OF_PRIMITIVE_LINES, every pair of vertices or indices will be
                  // connected to form a line
                  mesh.addIndex(a);
                  mesh.addIndex(b);
               }
          }
      }
       
//       int cols = imageW/spacing;
//       int rows = imageH/spacing;
//       for (int y = 0; y < rows; y++)
//        {
//          ofPoint verta =mesh.getVertex(y);
//          for (int x = 0; x < cols; x++)
//          {
//            ofPoint vertb = mesh.getVertex(x);
//            if(x != 0 && x != cols -1){
//              mesh.addIndex(x);
//              mesh.addIndex(y);
//            }
//            // mesh.addIndex(x+y*cols);
//            // mesh.addIndex((x+1)+y*cols);
//            // mesh.addIndex(x+(y+1)*cols);
//
//            // mesh.addIndex((x+1)+y*cols);
//            // mesh.addIndex((x+1)+(y+1)*cols);
//            // mesh.addIndex(x+(y+1)*cols);
//          }
//        }
         }
    }
}

I’m on OSX 10.15.7, of_v20201026_osx_release.
I’ve tested with RGB .png

Wow, these look stunning! :star_struck:

1 Like