How To Make a 3D-Paper Model from a Heightfield in Processing

Nikolaus Gradwohl2010-03-07T15:41:00+00:00

I just wrote a little processing sketch that takes a height field like this

heightfield

calculates a pdf containing something like this

example

which can be cut out and sticked together to a 3d model like this

finished model

Here is the code i used to render the heightfield and generate the pdf. The pdf will be stored in the sketchfolder in and named output.pdf

/**
A paper model generator written by <a href='https://www.local-guru.net/blog/'>Guru</a>
*/
import processing.pdf.*;

void setup() {
  size(296,210);
  noLoop();
}

void draw() {
  // Generate heightfield 
  for( int x = 0; x< width; x++) {
    for( int y = 0; y < width; y++) {
      stroke( 128 + 100 * sin( map(x,0,width, 0, TWO_PI)) * sin(map(y,0,height,0,TWO_PI)));
      point(x,y);
    }
  }

  // Generate pdf 
  PGraphicsPDF pdf = (PGraphicsPDF) createGraphics(296, 210, PDF, "output.pdf");
  pdf.beginDraw();
  pdf.background(255);

  for ( int i =1; i < 5; i++ ) {
    int y = height / 10 * i;
    pdf.line( 1, height/5 * i, width, height/5 * i );
    for( int j = 1; j < 11; j++) {
       int x1 = (j - 1 ) * width/10;
       int x2 = j * width/10 -1 ;
       float v1 = brightness(get(x1, y));
       float v2 = brightness(get(x2, y));

       pdf.line( x1, height/5 * i + map(v1,0,255,0,height/5), x2, height/5 * i +  map(v2,0,255,0,height/5) ); 

       pdf.line( x1, height/5 * i , x1, height/5 * i + map(v1,0,255,0,height/5)/2 ); 
    }
  }

  pdf.nextPage();
  for ( int i =0; i < 5; i++ ) {
    int y = height / 10 * (i+5);
    pdf.line( 0, height/5 * i, width, height/5 * i );
    for( int j = 1; j < 11; j++) {
       int x1 = (j - 1 ) * width/10;
       int x2 = j * width/10 -1 ;
       float v1 = brightness(get(x1, y));
       float v2 = brightness(get(x2, y));

       pdf.line( x1, height/5 * i + map(v1,0,255,0,height/5), x2, height/5 * i +  map(v2,0,255,0,height/5) ); 

       pdf.line( x1, height/5 * i , x1, height/5 * i + map(v1,0,255,0,height/5)/2 ); 
    } 
  }

  pdf.nextPage();
  for ( int i =1; i < 5; i++ ) {
    int x = width/ 10 * i;
    pdf.line( width/5 * i, 0, width/5 * i, height );

    for( int j = 1; j < 11; j++) {
       int y1 = (j - 1 ) * height/10;
       int y2 = j * height/10 -1 ;
       float v1 = brightness(get(x, y1));
       float v2 = brightness(get(x, y2));

       pdf.line( width/5 * i + map(v1,0,255,0,height/5),y1, width/5 * i +  map(v2,0,255,0,height/5), y2 ); 

       pdf.line( width/5 * i + map(v1,0,255,0,height/5),y1, width/5 * i + map(v1,0,255,0,height/5)/2,y1 ); 
    } 
  }

  pdf.nextPage();
  for ( int i =0; i < 5; i++ ) {
    int x = width/ 10 * (i+5);
    pdf.line( width/5 * i, 0, width/5 * i, height );

    for( int j = 1; j < 11; j++) {
       int y1 = (j - 1 ) * height/10;
       int y2 = j * height/10 -1 ;
       float v1 = brightness(get(x, y1));
       float v2 = brightness(get(x, y2));

       pdf.line( width/5 * i + map(v1,0,255,0,height/5),y1, width/5 * i +  map(v2,0,255,0,height/5), y2 ); 

       pdf.line( width/5 * i + map(v1,0,255,0,height/5),y1, width/5 * i + map(v1,0,255,0,height/5)/2,y1 ); 
    } 
  }

  pdf.dispose();
  pdf.endDraw();
}
Tweet This! submit to reddit Digg! Tags: | 4 comments | no trackbacks

See also:

3D mushrooms in processing
foggy wood with recursive trees
isometric labyrinth
mesh made from hexagonal prism - another toxiclib experiment
Simulating papercut pictures with processing

Trackbacks

Comments

Leave a response

  1. subpxiel 2010-03-07T17:15:24+00:00

    Simple yet effective. I like the photo of the completed 3D model. :o)

  2. naus3a 2010-03-09T09:04:07+00:00

    really cool... I think I'll play with this a lot!

  3. Beppe 2010-04-05T15:42:44+00:00

    Hi, great work! It's not completely clear to me how you assemble the parts. For example, in this case you get a pdf with 4 pieces, you actually need to duplicate it. What if you need to make more complex shapes? Moreover, can you please let me know what's exactly the format of the input?

    Many thanks!

  4. pierrecharland@hotmail.com 2011-02-22T15:02:01+00:00

    I'm looking for a Processing program to convert a heightfield into contour lines. If you know about that please let me know. Thanks

Leave a comment