Contour Line maps from Heightmap - Processing Forum

Loading...

Processing Forum

Programming Questions

cedrickiefer

cedrickie..

Contour Line maps from Heightmap

in Programming Questions • 3 years ago

hey there, i am working on a little project atm and got a question about generating some contour line map out of a heightmap.

Creating a regular mesh, out of a heightmap, is pretty easy but i actually need a contour line map.
Something like this http://www.google.com/images?hl=de&q=contour line maps&um=1&ie=UTF-8&source=og&sa=N&tab=wi&biw=1704&bih=846

Any idea how to start here? or any existing algorithms/ways to achieve this effect out of a height map?
Thanks!

i probably should add that i need it 3d in the end. so the lines should be able to be drawn in 3d. pixelmanipulation of the heightmap or anything similar is probably not an option then.

1

Replies(29)

kooogy

Re: Contour Line maps from Heightmap

3 years ago

am guessing here...

you need to choose what heights you want to join together and then iterate through the pairs of adjacent grid points looking for those where one is above your target height and the other is below. then work out the point along that line (linear interpolation?) where the height = your required height. and then join all those points together - connect each to its nearest neighbour as long as it's within a given range.

> i probably should add that i need it 3d in the end. so the lines should be able to be drawn in 3d

this isn't a problem, your new points will have 3 dimensions anyway.

might be a good weekend project...

kooogy

Re: Re: Contour Line maps from Heightmap

3 years ago

i appear to have "invented" the Level Curve Tracing Algorithm, or one of them. and only 40 years late...

http://mysite.verizon.net/~vze2vrva/thesis.html

lots of other links if you search for 'contour algorithm'. lots of other links on how to do this in the various math and cad packages, which aren't useful.

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

3 years ago

i found another code by Paul Bourke, he described a contouring algorithm called CONREC in 1987. Sounds like this is the way to go : http://local.wasp.uwa.edu.au/~pbourke/papers/conrec/

i found another implementation for Cocoah http://apptree.net/conrec.htm

not sure if i understood how to translate it to processing though. if anybody is willing to give some hints here. Your help is appreciated

kooogy

Re: Re: Contour Line maps from Heightmap

3 years ago

er, there's a java version linked to at the top of that page, "Conrec.java by Bradley White".

oh, i see it doesn't matter 8)

jegb

Re: Re: Contour Line maps from Heightmap

2 years ago

Hei! I stomped on that one few months back, had this problem rounding in my head for few months (contour lines).
I never got the time / energy to get on it. Now that you shared the solution using blobDetection, I have that one solved. Thanks a lot!

when I started to think about the solution, it came around the idea of instead of a height map with B/W image, to use a mesh and section it by parallel planes at equal intervals. Then I started working a bit with Hemesh lib but I am sure there is a lot of work on that.

Do you have an idea how would work to cut a mesh with a plane ? toxiclibs may be good place to start, but you have any other ideas?

thanks in advance!

cedrickiefer

cedrickie..

Re: Re: Contour Line maps from Heightmap

2 years ago

check this out http://www.openprocessing.org/visuals/?visualID=27228

toxmeister

toxmeister

Re: Contour Line maps from Heightmap

3 years ago

You could just use V3ga's old blob tracking library, which does exactly this, only it was intended for a different usage context: instead of finding elevation contours it's finding areas of bright pixels... but it should be easy enough for you to create a grayscale image of your map data and then find blobs at different thresholds...

http://v3ga.net/processing/BlobDetection/

cedrickiefer

cedrickie..

Re: Re: Contour Line maps from Heightmap

3 years ago

hey toxi, thanks for the hint.
sounds like a good idea. i will give it a try

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

3 years ago

wonderful, this was really easy. great idea to use the blob detection for this purpose.

toxmeister

toxmeister

Re: Re: Contour Line maps from Heightmap

3 years ago

Looking great, Cedric! That's the beauty of digital data, you can repurpose it in infinite ways... only often we're not that aware of it...

kooogy

Re: Contour Line maps from Heightmap

3 years ago

that does look good.

can you post the data you used so i can use it for testing?

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

3 years ago

what do you mean by data. the height image as source to test with your code?

kooogy

Re: Re: Contour Line maps from Heightmap

3 years ago

yeah, just the height map data (if you can)

have been using 3d sine waves and have got the crossing points sorted, looks ok. not sure how to go about drawing contours in a way that'll work for less geometric data... am also surprised (although i shouldn't be) at how many crossings there are and my 'draw a line to nearest neighbour' is O((n^2) / 2)

as an aside: first time i've used peasycam and it's great.

kooogy

Re: Re: Contour Line maps from Heightmap

3 years ago

import peasy.*;
// acd 2010 contours
static final int GRID = 30;
static final int HGRID = (GRID / 2);
static final int MAG = 20;
static final int ZMAG = 50;
static final int HEIGHTS = 11;
PeasyCam cam;
float[][] points = new float[GRID][GRID];
ArrayList[] crossings = new ArrayList[HEIGHTS];
void setup() {
size(700, 700, P3D);
cam = new PeasyCam(this, MAG * GRID / 2, MAG * GRID / 2, 0, 500);
for (int y = 0 ; y < GRID ; y++) {
for (int x = 0 ; x < GRID ; x++) {
points[x][y] = ZMAG * sin(dist(x, y, HGRID, HGRID)); // [-50, 50]
}
}
// find all crossings
for (int h = -50, i = 0 ; h <= 50 ; h += 10, i++) {
findCrossings(h, i);
}
sphereDetail(5); // turn down sphere detail or it crawls
frameRate(15);
}
void findCrossings(float hght, int index) {
crossings[index] = new ArrayList();
PVector p;
for (int x = 0 ; x < GRID - 1 ; x++) {
for (int y = 0 ; y < GRID - 1 ; y++) {
p = crossing(hght, x, y, x, y + 1);
if (p != null) {
crossings[index].add(p);
}
p = crossing(hght, x, y, x + 1, y);
if (p != null) {
crossings[index].add(p);
}
}
}
println("Crossings[" + index + "(" + hght + ")]: " + crossings[index].size());
}
// does this line cross the height? if so add a point
PVector crossing(float hght, int x0, int y0, int x1, int y1) {
if (points[x0][y0] == hght) {
return new PVector(x0, y0, hght);
}
if ((points[x0][y0] < hght && points[x1][y1] > hght) ||
(points[x0][y0] > hght && points[x1][y1] < hght))
{
// find where line crosses height
float i = (hght - points[x0][y0]) / (points[x1][y1] - points[x0][y0]);
float newX = x0 + i * (x1 - x0);
float newY = y0 + i * (y1 - y0);
return new PVector(newX, newY, hght);
}
return null;
}
void draw() {
background(255);
/*
// draw lines
for (int y = 0 ; y < GRID - 1 ; y++) {
for (int x = 0 ; x < GRID - 1 ; x++) {
line(MAG * x, MAG * y, points[x][y], MAG * x, MAG * (y + 1), points[x][y + 1]);
line(MAG * (x + 1), MAG * y, points[x + 1][y], MAG * x, MAG * y, points[x][y]);
}
}
// draw last edges
for (int y = 0 ; y < GRID - 1 ; y++) {
line(MAG * (GRID - 1), MAG * y, points[GRID - 1][y], MAG * (GRID - 1), MAG * (y + 1), points[GRID - 1][y + 1]);
}
for (int x = 0 ; x < GRID - 1 ; x++) {
line(MAG * (x + 1), MAG * (GRID - 1), points[x + 1][GRID - 1], MAG * x, MAG * (GRID - 1), points[x][GRID - 1]);
}
*/
// plot points
colorMode(HSB, 256);
noStroke();
for (int h = 0 ; h < HEIGHTS ; h++) {
fill(h * 256 / HEIGHTS, 128, 256);
for (int i = 0 ; i < crossings[h].size() ; i++) {
plot((PVector)(crossings[h].get(i)));
}
}
stroke(0);
colorMode(RGB);
noLoop();
}
// try to reduce cpu usage by not redrawing when nothing's moved. bit jerky.
void mouseDragged() {
redraw();
}
// plot a sphere at given position
void plot(PVector p) {
pushMatrix();
translate(MAG * p.x, MAG * p.y, p.z);
sphere(2);
popMatrix();
}

kooogy

Re: Contour Line maps from Heightmap

3 years ago

ok, bit redundant now, i know but i've changed my program to use conrec mentioned above and here's the result.

mmmm, crinkly...

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

3 years ago

just in case you still needed. this is the source image i used to test it. nothing special

kooogy

Re: Re: Contour Line maps from Heightmap

3 years ago

some errors here, specifically the squares. were a lot more if i used 0 as a slice

nazarioa

Re: Re: Contour Line maps from Heightmap

2 years ago

Hi cedrick, i'm new to processing and i know you posted this a while ago, but i'm very interested in your work. how did you insert the heightmap source image into your code. Please explain so i may learn from you on how to go about doing this to other projects, i'm working on a countour map using blobDetection but i'm have a horrible time. i keep getting an error message saying (the function setTreshold(float) does not exist when the code get to

( theBlobDetection[i].setThreshold(i/levels);) may be you can help me with this here is my source code you may have seened it before. i would accept and help or comments please help.

if you can help me please contact me at nazarioa2004@yahoo.com, i thank you so much, here is the code

import blobDetection.*;
import peasy.*;
PeasyCam cam;

PImage img;
float levels = 35;                      // number of contours
float factor = 1;                       // scale factor
float elevation = 55;                   // total height of the 3d model
float colorStart = 0;                  // Starting degree of color range in HSB Mode (0-360)
float colorRange = 100;                // color range / can also be negative

// Array of BlobDetection Instances

BlobDetection[] theBlobDetection = new BlobDetection[int(levels)];

void setup() { size(1000,800,P3D);
img = loadImage("3.gif"); // heightmap (about 250x250px)
cam = new PeasyCam(this,200);
colorMode(HSB,360,100,100);

//Computing Blobs with different thresholds

for (int i=0 ; i<levels ; i++) {
theBlobDetection[i] = new BlobDetection(img.width, img.height);
theBlobDetection[i].setThreshold(i/levels);
theBlobDetection[i].computeBlobs(img.pixels);
}
}

void draw() {
background(0);
translate(-img.width*factor/2,-img.height*factor/2);

for (int i=0 ; i<levels ; i++) {
translate(0,0,elevation/levels);
drawContours(i);
}
}

void drawContours(int i)
{ Blob b;
EdgeVertex eA,eB;

for (int n=0 ;
n<theBlobDetection[i].getBlobNb() ; n++) {
b=theBlobDetection[i].getBlob(n);
if (b!=null) {
    stroke((i/levels*colorRange)+colorStart,100,100);      // coloring the contours

    for (int m=0;m<b.getEdgeNb();m++) {
      eA = b.getEdgeVertexA(m);
      eB = b.getEdgeVertexB(m);
      if (eA !=null && eB !=null)
      line(
      eA.x*img.width*factor, eA.y*img.height*factor,
      eB.x*img.width*factor, eB.y*img.height*factor
      );
      }
    }
}
}

owaunandrew

owaunandr..

Re: Contour Line maps from Heightmap

3 years ago

Here is a link on local-guru's blog

http://www.local-guru.net/blog/2010/03/28/generating-3d-objects-from-heightfields

http://www.local-guru.net/blog/2010/03/07/how-to-make-a-3d-paper-model-from-a-heightfield-in-processing

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

3 years ago

thx for the links but it is actually something different.
creating a mesh from a bw image is actually not that hard. i really like his papermodel code though

owaunandrew

owaunandr..

Re: Contour Line maps from Heightmap

3 years ago

I like converting images to grayscale, however if you use the red color value of an image pixel you can use that for brightness without having to convert it to grayscale first.

toxmeister

toxmeister

Re: Re: Contour Line maps from Heightmap

3 years ago

Taking the red channel as main luminance indicator is not quite correct. Our eyes are far more sensitive to shades of green than red (about twice as sensitive actually)

luminance = 0.3*red + 0.59*green + 0.11*blue

joshuakoomen

joshuakoo..

Re: Contour Line maps from Heightmap

3 years ago

Nice results Cedrickiefer! Is there a chance you'll be sharing the code you used? I really would like to play around with it, if possible.

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

2 years ago

this took a while. Really sorry for the delay but i finally did a tutorial about creating contour maps as well as creating the needed heightmaps. https://forum.processing.org/topic/creating-contour-maps

reid.harward

reid.harw..

Re: Contour Line maps from Heightmap

2 years ago

I've been attempting to get this to work, but can't seem to install the blob tracking library it uses. I looked in the blobDetection folder after placing it in my libraries folder and noticed that there was no .jar file in the folder. Does this matter? Is there another step that is necessary to install this blob tracking library?

cedrickiefer

cedrickie..

Re: Contour Line maps from Heightmap

2 years ago

i uploaded the version i am using here:
https://www.dropbox.com/s/jo4a4jw4pz4au53/blobDetection.rar

alphachap

Re: Re: Contour Line maps from Heightmap

2 years ago

I downloaded the blobDetection.rar file.

But I don't know about .rar files.

What should I do with it?

Can it be used in Processing?

reid.harward

reid.harw..

Re: Contour Line maps from Heightmap

2 years ago

I got it working with the version you uploaded! Thanks.

PhiLho

PhiLho

Re: Contour Line maps from Heightmap

2 years ago

@alphachap: rar files are archives, you can open them with any free good archive manager, like 7-Zip.

Top Reply