# Where to Start? Generating Meshes from an Image

Hi everyone,
I took a look at the OF tutorials, and I’m trying to understand how to do this https://openframeworks.cc/ofBook/chapters/generativemesh.html
in Processing.
It’s not essential for this first step to make a 3D mesh, I just like the way that the image look like,
with this kind of “image processing”
here what I mean: https://openframeworks.cc/ofBook/images/generativemesh/images/StarLinesFirstMeshSmall.png

I suppose that I need to use the HE_Mesh library, or maybe, openGL/GLSL directly or maybe I just need to work with vertex/beginShape(LINES) etc…?

Where can I find the right mesh choice in HE_Mesh?
Where can I choose the primitive tipe ?

If you could guide me would be awesome.

I looked at the he_mesh examples, but there are too many irons in the fire.

thanks
R_Colors

2 Likes

Hi, that’s very interesting project!
Thank you for sharing!

This code work with lines, not the mesh
after following the tutorial, i got this

tried to convert it into processing.
except for the color

``````PImage image;
ArrayList<PVector> vertices = new ArrayList<PVector>();
void setup() {
size(800, 800);
background(0);
noFill();
stroke(255, 100, 0);

//beginShape();
float intensityThreshold = 255.0;
int w = image.width;
int h = image.height;
for (int x=0; x<w; ++x) {
for (int y=0; y<h; ++y) {
color c = image.get(x, y);
float intensity = brightness(c);
if (intensity >= intensityThreshold) {
}
}
}
//endShape();
float num = 0;
float connectionDistance = 15;
int numVerts = vertices.size();
stroke(255 ,100, 0, 50);
println(numVerts * numVerts);
for (int a=0; a<numVerts; ++a) {
PVector verta = vertices.get(a);
for (int b=a+1; b<numVerts; ++b) {
PVector vertb = vertices.get(b);
float distance = dist(verta.x, verta.y, vertb.x, vertb.y);//abs(verta.sub(vertb).mag());
if (distance <= connectionDistance) {
// In OF_PRIMITIVE_LINES, every pair of vertices or indices will be
// connected to form a line
line(verta.x, verta.y, vertb.x, vertb.y);
}
}
num += numVerts - 1;
//println((num / sq(numVerts) * 100) + "%");
}
}
``````

for the color, you need to research on how to draw gradient colored line

4 Likes

Really thank you!
looks super nice!

I added a simple function to make the background interpolated in radial way.and I’m working on
the code finded here to make gradient colored lines.

``````// computationally killer like...

for(int y = 0; y < height; y++){
for( int x = 0; x < width; x++){
float distFromCent = dist(x,y, width/2, height/2);
stroke(450-distFromCent,0,100);

point(x,y);
}
}
}
``````

I’m tring to adapt this code… extracting the colors from the pixel.arrays

``````float x1, y1, x2, y2;
color a, b;

void setup() {
size(600, 600);
noStroke();
a = color(255, 0, 0);
b = color(0, 255, 0);
reset();
}

void draw() {
background(0);
gradientLine(x1, x2, y1, y2, a, b);
}

void mousePressed() {
reset();
}

void gradientLine(float x1, float y1, float x2, float y2, color a, color b) {
float deltaX = x2-x1;
float deltaY = y2-y1;
float tStep = 1.0/dist(x1, y1, x2, y2);
for (float t = 0.0; t < 1.0; t += tStep) {
fill(lerpColor(a, b, t));
ellipse(x1+t*deltaX,  y1+t*deltaY, 3, 3);
}
}

void reset() {
x1 = random(width);
y1 = random(height);
x2 = random(width);
y2 = random(height);
}
``````

``````// grad lines https://forum.processing.org/two/discussion/5620/how-to-draw-a-gradient-colored-line
PImage image;
ArrayList<PVector> vertices = new ArrayList<PVector>();
void setup() {
size(800, 800);
//background(0);

// noFill();
//stroke(255, 100, 0);
int loc = 0;

//beginShape();
float intensityThreshold = 255.0;
int w = image.width;
int h = image.height;
color c = color(0);
color c1 = color(0);
color c2 = color(0);
for (int x=0; x<w; ++x) {
for (int y=0; y<h; ++y) {
c = image.get(x, y);
float intensity = brightness(c);
if (intensity >= intensityThreshold) {

}
}
}

//endShape();

//Color from image
// you can use  c = image.get(x, y); as well
//  for (int x=0; x<w; ++x) {
//  for (int y=0; y<h-1; ++y) {

//     loc = x + y*image.width;
//    // Color according to the image
//    c1 = image.pixels[loc];
//    c2 = image.pixels[loc+1];

//  }
//}
//

float num = 0;
float connectionDistance = 15;
int numVerts = vertices.size();
// stroke(c);
//  stroke(255 ,100, 0, 50);
println(numVerts * numVerts);
for (int a=0; a<numVerts; ++a) {
PVector verta = vertices.get(a);
for (int b=a+1; b<numVerts; ++b) {
PVector vertb = vertices.get(b);
float distance = dist(verta.x, verta.y, vertb.x, vertb.y);//abs(verta.sub(vertb).mag());
if (distance <= connectionDistance) {
// In OF_PRIMITIVE_LINES, every pair of vertices or indices will be
// connected to form a line
// fixed colors to debug it

gradientLine(verta.x, verta.y, vertb.x, vertb.y,color(255, 0, 0,50),color(0, 255, 0,50));
}

}
num += numVerts - 1;
//println((num / sq(numVerts) * 100) + "%");
}

}

void draw(){if(key == 's')saveFrame("a"+".png");}

void gradientLine(float x1, float y1, float x2, float y2, color a, color b) {
float deltaX = x2-x1;
float deltaY = y2-y1;
float tStep = 1.0/dist(x1, y1, x2, y2);
for (float t = 0.0; t < 1.0; t += tStep) {
fill(lerpColor(a, b, t));
ellipse(x1+t*deltaX,  y1+t*deltaY, 0.1, 0.1);
}
}

for(int y = 0; y < height; y++){
for( int x = 0; x < width; x++){
float distFromCent = dist(x,y, width/2, height/2);
stroke(450-distFromCent,0,100);

point(x,y);
}
}

}

``````

with fixed gradientLine setted to get the color from the vertices.

``````PImage image;
ArrayList<PVector> vertices = new ArrayList<PVector>();
void setup() {
size(800, 800);
// background(126);

int loc = 0;

//beginShape();
float intensityThreshold = 255.0;
int w = image.width;
int h = image.height;
color c = color(0);
for (int x=0; x<w; ++x) {
for (int y=0; y<h; ++y) {
c = image.get(x, y);
float intensity = brightness(c);
if (intensity >= intensityThreshold) {

}
}
}

//endShape();

float num = 0;
float connectionDistance = 15;
int numVerts = vertices.size();

println(numVerts * numVerts);
for (int a=0; a<numVerts; ++a) {
PVector verta = vertices.get(a);
for (int b=a+1; b<numVerts; ++b) {
PVector vertb = vertices.get(b);
float distance = dist(verta.x, verta.y, vertb.x, vertb.y);//abs(verta.sub(vertb).mag());
if (distance <= connectionDistance) {
gradientLine(verta.x, verta.y, vertb.x, vertb.y,image.get((int)verta.x, (int)verta.y),image.get((int)vertb.x, (int)vertb.y));
}

}
num += numVerts - 1;
//println((num / sq(numVerts) * 100) + "%");
}

}

void draw(){}

void gradientLine(float x1, float y1, float x2, float y2, color a, color b) {
float deltaX = x2-x1;
float deltaY = y2-y1;
float tStep = 1.0/dist(x1, y1, x2, y2);
noStroke();
for (float t = 0.0; t < 1.0; t += tStep) {
fill(lerpColor(a, b, t));
ellipse(x1+t*deltaX,  y1+t*deltaY, 1, 1);
}
}

for(int y = 0; y < height; y++){
for( int x = 0; x < width; x++){
float distFromCent = dist(x,y, width/2, height/2);
stroke(300-distFromCent,300-distFromCent,300-distFromCent,200);
point(x,y);
}
}
}

void keyPressed(){
if(key == 's')saveFrame("a"+".png");
}
``````
2 Likes

It would run faster if you use Quadtree for distance threshold checking. And then remove vertices that are not connected atleast to one other vertex.

1 Like

I’m looking at those links to try to understand what is this “mystic” quadtree :