Parametric Design with Processing

ModelBuilder2

An Introduction to ModelBuilderMK2

1. Import the library by clicking on Sketch>Import Library.

   import the library
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   

   ---

2. Add the following instance variables:

   UVertex v, vDelta;
   float angleDelta;
   

   ---

3. Create a setup() method. Inside the method:
   1. Set the size
      
      

      ---

   2. Set v to be a new UVertex at the center of the sketch.

       v=new UVertex(width/2, height/2);

      
      
      

      ---

   3. Set the vDelta variable to be a random UVertex point. To move at a higher speed, provide larger values:

        vDelta=new UVertex (random(1,3), 0);
      

      ---

   4. Rotate the point 360°:

      vDelta.rot(random(TWO_PI));

      ---

   5. Set angleDelta:

      angleDelta=radians(random(0.5, 1.5));

   ---

4. Create a draw method:

   void draw(){
     
     
   }
   

   ---

5. import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertex v, vDelta;
   float angleDelta;
   
   void setup() {
     size(600, 600);
     v=new UVertex(width/2, height/2);
     //to move at higher speed, provide larger values
     vDelta=new UVertex (random(1, 3), 0);
     vDelta.rot(random(TWO_PI));
   
     angleDelta=radians(random(0.5, 1.5));
     if(random(100)<50){
       angleDelta=- angleDelta;
     }
   }
   void draw() {
     //add vDelta to v
     v.add(vDelta);
     vDelta.rot(angleDelta);
     ellipse(v.x,v.y,50,50);
     
   }
   

Complete program

import unlekker.mb2.geo.*;
import unlekker.mb2.util.*;
import ec.util.*;

UVertex v, vDelta;
float angleDelta;

void setup() {
  size(600, 600);
  v=new UVertex(width/2, height/2);
  //to move at higher speed, provide larger values
  vDelta=new UVertex (random(1, 3), 0);
  vDelta.rot(random(TWO_PI));

  angleDelta=radians(random(0.5, 1.5));
  if(random(100)<50){
    angleDelta=- angleDelta;
  }
}
void draw() {
  //add vDelta to v
  v.add(vDelta);
  vDelta.rot(angleDelta);
  ellipse(v.x,v.y,50,50);
  stroke(255,0,0);
  line(v.x,v.y, v.x+vDelta.x*20, v.y+vDelta.y*20);
  if(frameCount%100==0){
    newRotation();
  }
  if(v.x<0 ){
    v.x=width;
  }
    if(v.x>width ){
    v.x=0;
  }
   if(v.y<0 ){
    v.y=height;
  }
    if(v.y>height ){
    v.y=0;
  }
}
void newRotation(){
  angleDelta=radians(random(0.5, 1.5));
  if(random(100)<50){
    angleDelta=- angleDelta;
  }
  vDelta.norm(random(1,3));
}

Using an array of UVertexLists

• Use the build() method to start building your model.
  
• When you work in 3D you need a way to navigate. With ModelBuilderMK2 you use UNav3D
  
• Create your models using OpenGL
  
• UMB is the base class for all the functions in ModelBuilderMK2 this object allows you to set a reference to PApplet
  
• To draw a vertex list you can just call draw()

1. Here is the basic skeleton:

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl,vl2;
   UNav3D nav;
   
   void setup(){
     size(600,600,OPENGL);
     //initialize UMB with a reference to this sketch
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
     
   }
   void draw()(){
     
     
   }
   void build(){
     
   }

   
   
   

   ---

2. ModelBuilderMK2 also supports Operator chaining

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl,vl2;
   UNav3D nav;
   
   void setup(){
     size(600,600,OPENGL);
     //initialize UMB with a reference to this sketch
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
     
   }
   void draw(){
     background(0);
     translate(width/2,height/2);
     nav.doTransforms();
     stroke(255,255,0);
     noFill();
       vl.draw();
     
     stroke(0,0,255);
      vl2.draw();
   }
   void build(){
     vl=new UVertexList();
     int n=36;
     for (int i=0;i<n;i++){
       float a =map(i, 0, n, 0, TWO_PI);
       
       vl.add(new UVertex(100,0).rotZ(a));
       
     }
     //adds a copy of the first vertex to the end of the list
     vl.close();
     
     vl2=vl.copy().scale(2);
   
   }

   
   
   

   ---

3. Adding a third dimension, some randomization and triangleFan
   

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl,vl2;
   UNav3D nav;
   UGeo fan, quadstrip;
   
   void setup(){
     size(600,600,OPENGL);
     //initialize UMB with a reference to this sketch
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
     
   }
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();
     stroke(255,255,0);
   fill(255,25,25,100);
      // vl.draw();
     fan.draw();
     stroke(0,0,255);
     fill(25,25,255,100);
     // vl2.draw();
      quadstrip.draw();
   }
   void build(){
     vl=new UVertexList();
     int n=36;
     for (int i=0;i<n;i++){
       float a =map(i, 0, n, 0, TWO_PI);
       
       vl.add(new UVertex(random(100,150),0).rotZ(a));
       
     }
     //adds a copy of the first vertex to the end of the list
     vl.close();
     
     vl2=vl.copy().scale(2).translate(0,0,100);
     //will calculater the centroid
   fan=new UGeo().triangleFan(vl);
   
   quadstrip=new UGeo().quadstrip(vl,vl2);
   }
   

   
   
   

   ---

Cylinders

1. Creating a cylinder:

   //create quadstrip between two vertex lists
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   
   UVertexList vl, vl2;
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();// do camera transformations
    // vl.draw();
     //vl2.draw();
     
     geo.draw();
     
     
     
   }
   void build(){
   int n=18;
   vl=new UVertexList();
   for(int i=0;i<n;i++){
     float deg=map(i, 0, n-1, 0, TWO_PI);
     vl.add(new UVertex(100,0,0).rotY(deg));
     
   }
   vl2=vl.copy().translate(0,-200,0);
   vl.translate(0,200,0);
   //this will connect them
   geo=new UGeo().quadstrip(vl,vl2);
   }
   

   
   
   

   ---

2. Closing the form:

   //create quadstrip between two vertex lists
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   
   UVertexList vl, vl2;
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();// do camera transformations
    // vl.draw();
     //vl2.draw();
     
     geo.draw();
     
     
     
   }
   void build(){
   int n=18;
   vl=new UVertexList();
   for(int i=0;i<n;i++){
     float deg=map(i, 0, n-1, 0, TWO_PI);
     vl.add(new UVertex(100,0,0).rotY(deg));
     
   }
   vl2=vl.copy().translate(0,-200,0);
   vl.translate(0,200,0);
   //this will connect them
   geo=new UGeo().quadstrip(vl,vl2);
   geo.triangleFan(vl);
   geo.triangleFan(vl2);
   }
    

   
   
   

   ---

3. Adding Normals

   //create quadstrip between two vertex lists
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   
   UVertexList vl, vl2;
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();// do camera transformations
    // vl.draw();
     //vl2.draw();
     stroke(0);
     geo.draw();
     stroke(255,0,0);
     geo.drawNormals(25);
     
     
     
   }
   void build(){
   int n=18;
   vl=new UVertexList();
   for(int i=0;i<n;i++){
     float deg=-map(i, 0, n-1, 0, TWO_PI);
     vl.add(new UVertex(100,0,0).rotY(deg));
     
   }
   vl2=vl.copy().translate(0,-200,0);
   vl.translate(0,200,0);
   //this will connect them
   geo=new UGeo().quadstrip(vl,vl2);
   //reverse
   geo.triangleFan(vl, true);
   geo.triangleFan(vl2);
   }
    

   
   
   

   ---

4. Hiding and showing normals (and saving as an STL):

   //create a more complex form
   //save model and picture of the models
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   ArrayList<UVertexList>stack;
   
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();
     stroke(0);
     
     geo.draw();
     stroke(255,0,0);
     if(mousePressed)geo.drawNormals(25);
     }
   void build() {
   
     int n=10;
     float h=400;
     stack=new ArrayList<UVertexList>();
     int nPts=36;
   
     for (int i=0;i<n;i++) {
       UVertexList vl=new UVertexList();
       for (int j=0;j<nPts;j++) {
         float deg=map(j, 0, nPts, 0, TWO_PI);
         //create a cylinder
         vl.add(new UVertex(100, 0).rotY(deg));
       }
       float y=map(i, 0, n-1, -h*0.5, h*0.5);
       //adding the vl to stack, but translate it first and then close it
       //close adda a copy of first point
       stack.add(vl.translate(0, y, 0).close());
     }
     geo =new UGeo().quadstrip(stack);
     geo.triangleFan(stack.get(stack.size()-1));
     geo.triangleFan(stack.get(0), true);
   }
   void keyPressed(){
     if(key=='s'||key=='S'){
       //will give the name of the name of the sketch
       //reference to this sketch
       String filename=this.getClass().getSimpleName();
       //path and prefix
       filename=UFile.nextFile(sketchPath,filename); 
       saveFrame(filename.substring(0, filename.length()-4)+"-###.png");
       geo.writeSTL(filename.substring(0, filename.length()-4)+"-###.stl");
       
     }
     
   }
   

   
   
   

   ---

5. Making a vase:

   //create a more complex form
   //save model and picture of the models
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   ArrayList<UVertexList>stack;
   
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();
     stroke(0);
     
     geo.draw();
     stroke(255,0,0);
     if(mousePressed)geo.drawNormals(25);
   }
   void build() {
   
     int n=10;
     float h=400;
     stack=new ArrayList<UVertexList>();
     int nPts=36;
   
     for (int i=0;i<n;i++) {
       UVertexList vl=new UVertexList();
       float t=map(i,0, n-1, 0,1);
       //t=0 to 1
       float m=shaper(t);
       for (int j=0;j<nPts;j++) {
         float deg=map(j, 0, nPts, 0, TWO_PI);
         //create a cylinder
         vl.add(new UVertex(m*100, 0).rotY(deg));
       }
       float y=map(i, 0, n-1, -h*0.5, h*0.5);
       //adding the vl to stack, but translate it first and then close it
       //close adda a copy of first point
       stack.add(vl.translate(0, y, 0).close());
     }
     geo =new UGeo().quadstrip(stack);
     geo.triangleFan(stack.get(stack.size()-1));
     geo.triangleFan(stack.get(0), true);
   }
   float shaper(float t){
   
     //takes a parameter and returns a multiploer for the shape
     
     //can use it in many functions
     //in this case we are using it to create a wavy outline
     return 1+0.5*sin(t*TWO_PI);
   }
   void keyPressed(){
     if(key=='s'||key=='S'){
       //will give the name of the name of the sketch
       //reference to this sketch
       String filename=this.getClass().getSimpleName();
       //path and prefix
       filename=UFile.nextFile(sketchPath,filename); 
       saveFrame(filename.substring(0, filename.length()-4)+"-###.png");
       geo.writeSTL(filename.substring(0, filename.length()-4)+"-###.stl");
     
     }
     
   }

   ---

6. A more complex vase:

   //create a more complex form
   //save model and picture of the models
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   ArrayList<UVertexList>stack;
   
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();
     stroke(0);
     
     geo.draw();
     stroke(255,0,0);
     if(mousePressed)geo.drawNormals(25);
   }
   void build() {
   
     int n=20;
     float h=400;
     stack=new ArrayList<UVertexList>();
     int nPts=36;
   
     for (int i=0;i<n;i++) {
       UVertexList vl=new UVertexList();
       float t=map(i,0, n-1, 0,1);
       //t=0 to 1
       float m=shaper(t);
       for (int j=0;j<nPts;j++) {
         float deg=map(j, 0, nPts, 0, TWO_PI);
         //create a cylinder
         vl.add(new UVertex(m*100, 0).rotY(deg));
       }
       float y=map(i, 0, n-1, -h*0.5, h*0.5);
       //adding the vl to stack, but translate it first and then close it
       //close adda a copy of first point
       stack.add(vl.translate(0, y, 0).close());
     }
     geo =new UGeo().quadstrip(stack);
     geo.triangleFan(stack.get(stack.size()-1));
     geo.triangleFan(stack.get(0), true);
   }
   //function to calculate outline
   float shaper(float t){
   
     //takes a parameter and returns a multiploer for the shape
     
     //can use it in many functions
     //in this case we are using it to create a wavy outline
     //return 1+0.5*sin(t*TWO_PI);
     //0.5 to 1.5
   //return random(0.5, 1);
     //return 1+random(0.3, 0.5)*-sin(t*TWO_PI);
     //more bulges
     return 1+random(0.3, 0.5)*-sin(random(1,2)*t*TWO_PI);
     
     
   }
   void keyPressed(){
     if (key=='r'){
       
       build();
     }if(key=='s'||key=='S'){
       //will give the name of the name of the sketch
       //reference to this sketch
       String filename=this.getClass().getSimpleName();
       //path and prefix
       filename=UFile.nextFile(sketchPath,filename); 
       saveFrame(filename.substring(0, filename.length()-4)+"-###.png");
       geo.writeSTL(filename.substring(0, filename.length()-4)+"-###.stl");
    
     }
     
   }

   ---

7. Parametric:

   import controlP5.*;
   
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   
   ArrayList<UVertexList> stack;
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     UMB.setPApplet(this);
     nav=new UNav3D();
   
     initGUI();
     build();
   }
   
   void draw() {
     background(0);
   
     pushMatrix();
     lights();
     translate(width/2, height/2);
     nav.doTransforms();
   
     stroke(0);
     geo.draw(); 
   
     stroke(255, 0, 0);
     if (mousePressed) geo.drawNormals(25);
     
     popMatrix();
   }
   
   
   void keyPressed() {
     if (key==' ') build();
   
     if (key=='s') saveModel();
   }
   
   float bez[];
   
   
   void build() {
     // initialize a random 1D bezier
     bez=new float[] {
       a,b,c,d
     };
       
     
     int n=steps; // number of stacked edges
     
     stack=new ArrayList<UVertexList>();
     
     int npts=stepsCircle;
     
     // build the outside edges
     for(int i=0; i<n; i++) {
       UVertexList vl=new UVertexList();
       
       float t=map(i, 0,n-1, 0,1);
       float m=shaper(t);
       
       for(int j=0; j<npts; j++) {
         float deg=map(j, 0,npts, 0,TWO_PI);
         
         // apply multiplier "m" to a constant radius
   //      vl.add(new UVertex(rad*m,0).rotY(deg));
   
         vl.add(new UVertex(random(0.5,1)*rad,0).rotY(deg));
       }
       
       // calculate the Y translation
       float y=map(i, 0,n-1, -h*0.5,h*0.5);
       stack.add(vl.translate(0,y,0));
     }
     
     // build the inside edges of our "vase"
     for(int i=n-1; i>0; i--) {
       float t=map(i, 0,n-1, 0,1);
       float m=shaper(t);
       UVertexList vl=stack.get(i).copy();
       
       for(UVertex tmp : vl) {
         float vy=tmp.y;
         tmp.y=0;
         tmp.norm(tmp.mag()*0.5);
         tmp.y=vy;
       }
       
       stack.add(vl);    
     }
     
     for(UVertexList tmp : stack) tmp.close();
   
     // creates quadstrips for all vertex lists in stack
     geo=new UGeo().quadstrip(stack);
     
     // caps top and bottom with triangle fans
     geo.triangleFan(stack.get(stack.size()-1)); 
     geo.triangleFan(stack.get(0),true);
   }
   
   // shaping function
   // takes a parameter "t" and returns a multiplier
   // for the shape
   float shaper(float t) {
     
     // calculate the point "t" on a 1D bezier
     return bezierPoint(bez[0],bez[1],bez[2],bez[3], t);
     
   //  return 1+0.5*sin(t*TWO_PI);
   //  return random(0.5,1.5);
   //  return 1+random(0.3,0.5)*sin(t*4*TWO_PI);
   
   
   }
   float a,b,c,d;
   int steps;
   int stepsCircle;
   float rad;
   float h;
   
   ControlP5 cp;
   
   void initGUI() {
     cp=new ControlP5(this);
     
     cp.begin(5,5); // begin group of controllers at XY=5,5
     
     cp.addSlider("steps").setRange(4,30).linebreak();
     cp.addSlider("stepsCircle").setRange(4,30).linebreak();
     
     cp.addSlider("a").setRange(0.5,3).linebreak();
     cp.addSlider("b").setRange(0.2,3).linebreak();
     cp.addSlider("c").setRange(0.2,3).linebreak();
     cp.addSlider("d").setRange(0.5,3).linebreak();
   
     cp.addSlider("rad").setRange(50,200).linebreak();
     cp.addSlider("h").setRange(200,600).linebreak();
   
     cp.addButton("rebuild");
     cp.addButton("randomize").linebreak();
     cp.addButton("saveModel");
     cp.end();
   }
   
   // rebuild() is called when the "rebuild" button is pressed
   void rebuild() {
     build();
   }
   
   void randomize() {
     
     ((Slider)cp.controller("a")).setValue(random(0.5,3));
     ((Slider)cp.controller("b")).setValue(random(0.5,3));
     ((Slider)cp.controller("c")).setValue(random(0.5,3));
     ((Slider)cp.controller("d")).setValue(random(0.5,3));
     build();
   }
   
   void saveModel() {
       String filename=this.getClass().getSimpleName();
   
       // UFile.nextFilename requires a path, a prefix and an extension
       filename=UFile.nextFile(sketchPath, filename, "png");
   
       saveFrame(filename);
       geo.writeSTL(
       filename.substring(0, filename.length()-4)+".stl");
     }

   ---

8. Open at both ends:

     import controlP5.*;
   
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   
   ArrayList<UVertexList> stack;
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     UMB.setPApplet(this);
     nav=new UNav3D();
   
     initGUI();
     build();
   }
   
   void draw() {
     background(0);
   
     pushMatrix();
     lights();
     translate(width/2, height/2);
     nav.doTransforms();
   
     stroke(0);
     geo.draw(); 
   
     stroke(255, 0, 0);
     if (mousePressed) geo.drawNormals(25);
     
     popMatrix();
   }
   
   
   void keyPressed() {
     if (key==' ') build();
   
     if (key=='s') saveModel();
   }
   
   float bez[];
   
   
   void build() {
     // initialize a random 1D bezier
     bez=new float[] {
       a,b,c,d
     };
       
     
     int n=steps; // number of stacked edges
     
     stack=new ArrayList<UVertexList>();
     
     int npts=stepsCircle;
     
     // build the outside edges
     for(int i=0; i<n; i++) {
       UVertexList vl=new UVertexList();
       
       float t=map(i, 0,n-1, 0,1);
       float m=shaper(t);
       
       for(int j=0; j<npts; j++) {
         float deg=map(j, 0,npts, 0,TWO_PI);
         
         // apply multiplier "m" to a constant radius
   //      vl.add(new UVertex(rad*m,0).rotY(deg));
   
         vl.add(new UVertex(random(0.5,1)*rad,0).rotY(deg));
       }
       
       // calculate the Y translation
       float y=map(i, 0,n-1, -h*0.5,h*0.5);
       stack.add(vl.translate(0,y,0));
     }
     
     // build the inside edges of our "vase"
     for(int i=n-1; i>-1; i--) {
       float t=map(i, 0,n-1, 0,1);
       float m=shaper(t);
       UVertexList vl=stack.get(i).copy();
       
       for(UVertex tmp : vl) {
         float vy=tmp.y;
         tmp.y=0;
         tmp.norm(tmp.mag()*0.5);
         tmp.y=vy;
       }
       
       stack.add(vl);    
     }
     
     // add copy of the first vertex list to the end
     // so that it becomes a solid loop
     stack.add(stack.get(0));
     
     for(UVertexList tmp : stack) tmp.close();
   
     // creates quadstrips for all vertex lists in stack
     geo=new UGeo().quadstrip(stack);
     
     // caps top and bottom with triangle fans
   //  geo.triangleFan(stack.get(stack.size()-1)); 
   //  geo.triangleFan(stack.get(0),true);
   }
   
   // shaping function
   // takes a parameter "t" and returns a multiplier
   // for the shape
   float shaper(float t) {
     
     // calculate the point "t" on a 1D bezier
     return bezierPoint(bez[0],bez[1],bez[2],bez[3], t);
     
   //  return 1+0.5*sin(t*TWO_PI);
   //  return random(0.5,1.5);
   //  return 1+random(0.3,0.5)*sin(t*4*TWO_PI);
   
   
   }float a,b,c,d;
   int steps;
   int stepsCircle;
   float rad;
   float h;
   
   ControlP5 cp;
   
   void initGUI() {
     cp=new ControlP5(this);
     
     cp.begin(5,5); // begin group of controllers at XY=5,5
     
     cp.addSlider("steps").setRange(4,30).linebreak();
     cp.addSlider("stepsCircle").setRange(4,30).linebreak();
     
     cp.addSlider("a").setRange(0.5,3).linebreak();
     cp.addSlider("b").setRange(0.2,3).linebreak();
     cp.addSlider("c").setRange(0.2,3).linebreak();
     cp.addSlider("d").setRange(0.5,3).linebreak();
   
     cp.addSlider("rad").setRange(50,200).linebreak();
     cp.addSlider("h").setRange(200,600).linebreak();
   
     cp.addButton("rebuild");
     cp.addButton("randomize").linebreak();
     cp.addButton("saveModel");
     cp.end();
   }
   
   // rebuild() is called when the "rebuild" button is pressed
   void rebuild() {
     build();
   }
   
   void randomize() {
     
     ((Slider)cp.controller("a")).setValue(random(0.5,3));
     ((Slider)cp.controller("b")).setValue(random(0.5,3));
     ((Slider)cp.controller("c")).setValue(random(0.5,3));
     ((Slider)cp.controller("d")).setValue(random(0.5,3));
     build();
   }
   
   void saveModel() {
       String filename=this.getClass().getSimpleName();
   
       // UFile.nextFilename requires a path, a prefix and an extension
       filename=UFile.nextFile(sketchPath, filename, "png");
   
       saveFrame(filename);
       geo.writeSTL(
       filename.substring(0, filename.length()-4)+".stl");
     }
     

   ---

9. A more complex form

   
   
   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   ArrayList<UVertexList>stack;
   
   UGeo geo;
   UNav3D nav;
   
   void setup() {
     size(600, 600, P3D);
     
     // initialize UMB
     UMB.setPApplet(this);
     nav=new UNav3D();
     build();
   }
   
   void draw(){
     background(0);
     translate(width/2,height/2);
     lights();
     nav.doTransforms();
     stroke(0);
     
     geo.draw();
     stroke(255,0,0);
     if(mousePressed)geo.drawNormals(25);
   }
   void build(){
     
     int n=10;
     float h=100;
     stack=new ArrayList<UVertexList>();
     int nPts=36;
     
     for(int i=0;i<n;i++){
      UVertexList vl=new UVertexList();
      for(int j=0;j<nPts;j++){
        float deg=map(j,0, nPts,0,TWO_PI);
        vl.add(new UVertex(random(100,150), 0).rotY(deg));
        
      }
      float y=map(i,0, n-1,-h, h);
      //adding the vl to stack, but translate it first and then close it
      //close adda a copy of first point
      stack.add(vl.translate(0,y,0).close());
      
     }
     geo =new UGeo().quadstrip(stack);
     geo.triangleFan(stack.get(stack.size()-1));
     geo.triangleFan(stack.get(0), true);
      
   }
     void keyPressed(){
     if(key=='s'||key=='S'){
       //will give the name of the name of the sketch
       //reference to this sketch
       String filename=this.getClass().getSimpleName();
       //path and prefix
       filename=UFile.nextFile(sketchPath,filename); 
       saveFrame(filename.substring(0, filename.length()-4)+"-###.png");
       geo.writeSTL(filename.substring(0, filename.length()-4)+"-###.stl");
       
       
       
     }
     
   }
   

   
   
   

   ---

import unlekker.mb2.geo.*;
import unlekker.mb2.util.*;
import ec.util.*;

UVertexList pts;
UGeo geo;
UNav3D nav;

void setup() {
  size(600,600,OPENGL);
  UMB.setPApplet(this);
  nav=new UNav3D();
  
  build();
}

void draw() {
  background(0);
  translate(width/2,height/2);
  lights();
  nav.doTransforms();
  
//  for(UVertex v:pts) UMB.pellipse(v, 10);
  
  stroke(255);
  if(mousePressed) {
    noStroke();
    for(UFace f:geo.getF()) {
      UVertex v[]=f.getV();
      beginShape(TRIANGLE);

      fill(v[0].col);
      UMB.pvertex(v[0]);
      fill(v[1].col);
      UMB.pvertex(v[1]);
      fill(v[2].col);
      UMB.pvertex(v[2]);
      
      endShape();
    }
    
  }
  else {
    
    geo.draw();
  }
}

void keyPressed() {
  if(key!=CODED) {
    build();
  }
}

void build() {
  int n=(int)random(100,300);
  buildColor();
  
  pts=new UVertexList();
  while(pts.size()<n) {
    UVertex pt=new UVertex(random(50,300),0);
    pt.z=random(-100,100);
    pt.z=noise(pt.x*0.1,pt.y*0.1)*100;
    
    pts.add(pt.rot(random(TWO_PI)));
  }
  
  
  geo=new UGeo().triangulation(pts);
  for(UFace f : geo.getF()) f.setColor(randomColor());
  geo.enable(UMB.COLORFACE);

  // assign colors to vertices
  for(UVertex v : geo.getV()) v.setColor(randomColor());
  
}
ArrayList<Integer> colList;

void buildColor() {
  colList=new ArrayList<Integer>();
  
  int[] grad=new int[] {
    color(0,0,120), color(255,255,0),
    color(255), color(0,150,200),
    color(255), color(120,0,255)
  };
  
  int ng=grad.length/2;
  for(int i=0; i<ng; i++) {
    int num=(int)random(3,9);
    for(int j=0; j<num; j++) {
      float t=map(j, 0,num-1, 0,1);
      int theCol=lerpColor(grad[i*2],grad[i*2+1], t);
      colList.add(theCol);
    }
  }
  
  println(colList.size());
  for(int c:colList) println(UMB.hex(c));
}

int randomColor() {
  return colList.get((int)random(colList.size()));
}





}

int randomColor(){
return colList.get((int)


}

1. Import Modelbuilder and OpenGL libraries.
   
   

   ---

2. Create setup() and draw() methods.
   
   

   ---

3. Create an instance variable to hold an array of UVertexLists. This array variable will be of type UVertexList. Name the array vl
   
   To create an array use this syntax:

   UVertexList[] vl;

   
   

   ---

4. Add an instance variable of type UNav3D named nav.
   
   

   ---

5. Add an instance variable of type UGeometry. Name the variable geo.
   
   

   ---

6. Create a method named build(). This method will not return anything (void).
   
   

   ---

7. Inside the method:
   1. Initialize the array of UVertexLists to hold 12 elements by setting the array variable to UVertexList.getVertexLists(12)
      
      

      ---

   2. You want to add 3 vertex points that will determine the x and y offsets

      //give it an x and y offset
      vl[0].add(200,0,0);
      vl[0].add(random(50,200), random (10, 190),0);
      vl[0].add(200,200,0);
        

      
      
   3. Now you are going to iterate over the array of UVertexLists starting at 1 and continuing until the variable is less than or equal to vl.length-1
      
      

      ---

   4. Inside the loop. add this next line of code which copies the first 3 points into the list

      vl[i]=new UVertexList(vl[0]);
      

      
      
   5. This next line of code moves the points all the way around the Y axis:

      vl[i].rotateY(map(i, 0, vl.length-1, 0, TWO_PI));
      

      
      
   6. Outside of the loop initialize the geo instance by setting it to new UGeometry()
      

      ---

   7. In order to connect all the points, you need to call quadStrip(vl) on the geo instance.
      

   ---

8. Navigate to the setup() method:
   1. Set the size of the sketch and the renderer you want to use.
      
      

      ---

   2. Call your build() method.
      
      

      ---

   3. Initialize nav by setting it to new UNav3D(this)
      
      

      ---

   4. You want to center the 3D space:

      nav.setTranslation(width/2, height/2, 0);

      
      

      ---

9. Inside the draw() method:
   1. Update the background.
      
      

      ---

   2. Add lights.
      
      

      ---

   3. Set the stroke.
      
      

      ---

   4. Call doTransforms() on nav
      
      

      ---

   5. Set the fill color and pass in a low alpha value for transparency.
      
      

      ---

   6. Call draw() on geo with a reference to self:

      geo.draw(this);

      
      

      ---

10. Save and test.
    
    

    ---

11. Add another random point to the first array in the UVertexList array. This will create a line with four points.
    
    

    ---

12. Save and test.
    
    

    ---

13. Navigate back to build() and add this line of code to connect the last vertex list with the first.

      geo.quadStrip(vl[vl.length-1], vl[0]);
      

    
    

    ---

14. Now you need to add a top and a top to close the shape: You'll use a triangle fan and you can extract a new vertex list from the vertex list array: Outside of the loop:

    //defines edge of the bottom
    UVertexList top=UVertexList.extractFromArray(0, vl);
    

    
    

    ---

15. This is the method definition for UGeometry triangleFan(UVertexList vl,boolean useCentroid,boolean reverseOrder)
    
    This code connects the vertex points, but doesn't close the mesh.
    
    You may need to reverse the true and false parameters later, but try to create a triangleFan after the line that created the first quadStrip:

    geo.triangleFan(top, true, false);

    
    

    ---

16. Add this line of code to close the vertex list by adding a copy of the first vertex.

    bottom.close();

    
    

    ---

17. Save and test.
    

    ---

18. Extract a new vertex list from the vertex list array to define the bottom edge. The parameters this time are vl[0].n-1, vl
    
    

    ---

19. Create a triangleFan for the bottom.
    
    

    ---

20. Close the bottom by closing the vertex list by adding a copy of the first vertex.
    
    

    ---

21. Add geo.writeSTL(this, "test.stl"); at end of build() to create an stl file.
    
    

    ---

22. Open NetFabb Studio Basic, Meshlab or an application of your choice and open the stl file to check the mesh.
    
    

    ---

23. If you see something like this in NetFabb:
    
    you'll need to go back to your sketch and switch the true and falses in either your geo.triangleFan(top or geo.triangleFan(bottom statement. You want something like this:
    
    
    

    ---

24. Save and test.
    
    

    ---

Adding a GUI

1. Navigate to the line of code that creates an stl and comment it out.
   
   

   ---

2. Import the controlP5 library. This library allow you to create GUI elements. The modelbuilder library has been written with convenience functions to make building your gui even easier.
   
   

   ---

3. Create an instance variable of type USimpleGUI. Name it gui.
   

   ---

4. Create an instance variable of type int. Name it meshRes. This variable will control the resolution of the mesh. In the original sketch this value was the number of elements in your UVertexList array or 12.
   
   

   ---

5. Create an instance variables to hold your x and y vertices for the first, second, third and fourth points in your UVertexList. You could name them firstX, firstY secondX, secondY, thirdX, thirdY, fourthX, fourthY for clarity.
   
   

   ---

6. Create an instance variable of type boolean. Name it doRebuild. This will help control when you want to update the sketch.
   
   

   ---

7. Navigate to the draw() method and surround the doTransforms(), fill() and geo.draw(this) statements with calls to pushMatrix() and popMatrix().
   
   

   ---

8. Create a conditional to test if doRebuild is true. If the condition is met, call build() and set doRebuild to false.
   
   

   ---

9. Create a new method called initGUI(). This method does not return anything (void).
   
   

   ---

10. Inside the initGUI() method
    1. Initialize the instance of gui by setting it to new USimpleGUI(this).
       
       

       ---

    2. Set meshRes to 12.
       
       

       ---

    3. Set the other variables:

       firstX=50;
       firstY=0;
       secondX=50;
       secondY=10;
       thirdX=50;
       thirdY=10;
       fourthX=50;
       fourthY=200;

       
       
       

       ---

    4. Add a slider to the gui instance by calling addSlider("Label", value, min, max) on the instance of gui. Set the Label to "meshRes" and set the value to meshRes. Set the min to 4 and the max to 50.
       
       

       ---

    5. Add another slider to the instance of gui. Call it "firstX" and set the value to firstX. Set the min to 50 and the max to 200
       
       

       ---

    6. Add another slider to the instance of gui. Call it "firstY" and set the value to firstY. Set the min to -150 and the max to 9
       
       

       ---

    7. Add another slider to the instance of gui. Call it "secondX" and set the value to secondX. Set the min to 50 and the max to 200
       
       

       ---

    8. Add another slider to the instance of gui. Call it "secondY" and set the value to secondY. Set the min to 10 and the max to 190
       
       

       ---

    9. Continue for all x and y points. Just remember that the fourthY should range between 191 and something above 200.
       
       

       ---

11. Create a new method called controlEvent. This method does not return anything, but takes ControlEvent ev as a parameter.
    
    

    ---

12. Inside the method set doRebuild to true.
    
    

    ---

13. Navigate to the build() method and replace the random numbers with the appropriate variables
    
    

    ---

14. Navigate to the setup() method and add
    • initGUI(); before build()
    • nav.setGUI(gui);
    
    
    

    ---

15. Navigate to the draw() method and call draw() on the instance of your gui object.
    
    

    ---

16. Save and test
    
    

    ---

Saving STL

1. Navigate to the initGUI() method. Inside the method add a button to the GUI. The syntax for adding a button is this:

    gui.addButton("button/method_name);

   Name your button saveSTL
   
   

   ---

2. Create a saveSTL() method.
   
   

   ---

3. Inside the method add this code so that every time you click on the button you will create an stl file with a unique name.

   geo.writeSTL(this, 
       UIO.getIncrementalFilename(
         this.getClass().getSimpleName()+" ###.stl",
         sketchPath)
       );
       

   
   

   ---

4. Save and test.
   

   ---

5. Add a fifth point to the UVertexList().
   

   ---

map()

1. In the example below there are 100 random points of data that are drawn to the sketch:

    float val[];
   
   void setup() {
     size(400, 400);
     val=new float[100];
     //create the data
     for (int i=0;i<val.length;i++) {
       val[i]=random(100);
     }
   }
   
   void draw() {
     background(0);
     noFill();
     stroke(255);
     //draw the data
     beginShape();
     for (int i=0;i<val.length-1;i++) {
       vertex(i, val[i]);
     }
     endShape();
   }
   

   While this works, it would be better to scale the data to the size you need. That's where map() comes in:

   float val[];
   void setup() {
     size(400, 400);
     val=new float[100];
     for (int i=0;i<val.length;i++) {
       val[i]=random(100);
     }
   }
   void draw() {
     background(0);
     noFill();
     stroke(255);
     //this is our data
     beginShape();
     for (int i=0;i<val.length;i++) {
       //want to map to cover the entire screen
       float x=map(i, 0, val.length-1, 0, width-1);
       float y=map(val[i], 0, 100, 0, height-1);
       vertex(x, y);
     }
   
   
   
     endShape();
   }
   void drawValues(float data[], float w, float h) {
     float maxVal=max(data);
     int n=data.length;
     beginShape();
     for (int i=0;i<n;i++) {
       float x=map(i, 0, n-1, 0, w);
       float y=map(data[i], 0, maxVal, 0, h);
       vertex(x, y);
     }
     endShape();
   }
   
   

   
   
   

   ---

2. Now map the data so that the chart exists inside a shape that is 40 pixels from each edge.
   
   

   ---

3. Add 2 horizontal lines. One at the top of the data and one at the bottom
   
   

   ---

4. What if you want to see the data displayed radially?

   float val[];
   void setup() {
     size(400, 400);
     val=new float[100];
     for (int i=0;i<val.length;i++) {
       val[i]=random(100);
     }
   }
   void draw() {
     background(0);
     noFill();
     stroke(255, 255, 0);
     translate(width/2, height-200);
     drawValuesRadial(val, 80, 150);
   }
   
   void drawValuesRadial(float data[], float rInner, float rOuter) {
     float maxVal=max(data);
     int n=data.length;
     float x, y, angle, r;
     //x and y become angle and coordinates
     ellipse(0, 0, rInner*2, rInner*2);
     ellipse(0, 0, rOuter*2, rOuter*2);
   
     stroke(255, 255, 0);
     beginShape();
     for (int i=0;i<n;i++) {
       angle=map(i, 0, n-1, 0, radians(360));//TWO_PI
       r=map(data[i], 0, maxVal, rInner, rOuter);
   
       x=cos(angle)*r;
       y=sin(angle)*r;
       vertex(x, y);
       line(x, y, x*0.5, y*0.5);
     }
     endShape();
   }
   
   

5. You can also bring in real data and describe it in 3D
   Download this file and add it to your sketch.

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl;
   
   UGeo geo;
   UNav3D nav;
   
   void setup(){
    size(600,600,P3D);
    UMB.setPApplet(this);
    nav=new UNav3D();
    importData("google2008.csv");
    build();
   }
   
   
   void draw(){
     background(0);
     
   stroke(255);
     noFill();
     translate(width/2, height/2);
     lights();
       nav.doTransforms();
     vl.draw();
   }
   
   void build(){
     //take csv values and map it to a circle
     vl=new UVertexList();
     for(int i=0;i<val.length;i++){
       float deg=map(i,0, val.length, 0, TWO_PI);
       vl.add(new UVertex(250,val[i]*450).rotY(deg));
     }
     //geo=new UGeo();
   }
   float maxVal;
   float val[];
   void importData(String filename){
     Table data=loadTable(filename, "header");
     //get the float values from column 4
     val=data.getFloatColumn(4);
     //get the max val
     maxVal=max(val);
     //normalize values
     
     for(int i=0; i<val.length;i++){
       val[i]=val[i]/maxVal;
     }
     
   }

6. Make it solid:

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl;
   
   UGeo geo;
   UNav3D nav;
   
   void setup(){
    size(600,600,P3D);
    UMB.setPApplet(this);
    nav=new UNav3D();
    importData("google2008.csv");
    build();
   }
   
   
   void draw(){
     background(0);
     
   stroke(255);
   fill(255,255,0);
     translate(width/2, height/2);
     lights();
       nav.doTransforms();
    geo.draw();
   }
   void build(){
     //take csv values and map it to a circle
     vl=new UVertexList();
     for(int i=0;i<val.length;i++){
       float deg=map(i,0, val.length, 0, TWO_PI);
       vl.add(new UVertex(150,val[i]*150).rotY(deg));
     }
     
   geo=new UGeo().quadstrip(vl, vl.copy().scale(1,0,1));
   }
   float maxVal;
   float val[];
   void importData(String filename){
     Table data=loadTable(filename, "header");
     //get the float values from column 4
     val=data.getFloatColumn(4);
     //get the max val
     maxVal=max(val);
     //normalize values
     
     for(int i=0; i<val.length;i++){
       val[i]=val[i]/maxVal;
     }
     
   }
   

   ---

7. And then:

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UVertexList vl;
   
   UGeo geo;
   UNav3D nav;
   
   void setup(){
    size(600,600,P3D);
    UMB.setPApplet(this);
    nav=new UNav3D();
    importData("google2008.csv");
    build();
   }
   
   
   void draw(){
     background(0);
     noStroke();
   fill(255,255,0);
     translate(width/2, height/2);
     lights();
       nav.doTransforms();
    geo.draw();
   }
   void build(){
     //take csv values and map it to a circle
     vl=new UVertexList();
     for(int i=0;i<val.length;i++){
       float deg=map(i,0, val.length, 0, TWO_PI);
       vl.add(new UVertex(150,val[i]*150).rotY(deg));
     }
     float m=0.7;
     
   geo=new UGeo().quadstrip(vl, vl.copy().scale(m,0,m));
   }
   float maxVal;
   float val[];
   void importData(String filename){
     Table data=loadTable(filename, "header");
     //get the float values from column 4
     val=data.getFloatColumn(4);
     //get the max val
     maxVal=max(val);
     //normalize values
     
     for(int i=0; i<val.length;i++){
       val[i]=val[i]/maxVal;
     }
     
   }
   

   
   
8. And in 3D:

   import unlekker.mb2.geo.*;
   import unlekker.mb2.util.*;
   import ec.util.*;
   
   UNav3D nav;
   
   ArrayList<Float> values;
   float minVal, maxVal;
   String filename="aapl2008.csv";
   
   UGeo dataGeo;
   
   public void setup() {
     size(800, 600,P3D);
   
     // set PApplet reference
     UMB.setPApplet(this);
     nav=new UNav3D();
     
     importData();
     build();
   }
   
   public void draw() {
     background(0);
     drawCredit();
   
     lights();
     translate(width/2, height/2);
     nav.doTransforms();
     fill(255);
     noStroke();
   
     dataGeo.draw();
   }
   void build() {
       UVertexList vl=new UVertexList();
       
       int cnt=0;
       float h=200;
        
       // create a vertex list representing the input data   
       for(float theVal : values) {
         // map all values to radial XZ positions, with Y given by value
         vl.add(new UVertex(200,-h*theVal).
             rotY(map(cnt,0,values.size(), 0,TWO_PI)));
         
         cnt++;
       }
       
       // multipliers to create a conical shape  
       float m=0.4f;
       float m2=0.6f;
       
       // vertex lists representing the inner and outer circles,
       // created by copying "vl" and scaling it in XZ by a multiplier.
       // by scaling Y by zero we constrain the vertices to the base plane.
       UVertexList circleInner=vl.copy().scale(m,0,m);
       UVertexList circleOuter=vl.copy().scale(m2,0,m2);
   
       // create quadstrips between the edges     
       dataGeo=new UGeo().quadstrip(circleInner,vl);
       dataGeo.quadstrip(vl, circleOuter);
       dataGeo.quadstrip(circleOuter,circleInner);
       
       // add a single face at start and end of the three edges to
       // cap the geometry, making it solid
       dataGeo.addFace(circleOuter.first(),circleInner.first(), vl.first());
       dataGeo.addFace(circleInner.last(),circleOuter.last(),vl.last());
       
   //    // reverse the last face to fix th
   //    dataGeo.getF().get(dataGeo.sizeF()-1).reverse();
       
       // export the STL
       dataGeo.writeSTL(sketchPath+"/"+UFile.noExt(filename)+".stl");
       
       
     }
     void importData() {
     Table data;
     data=loadTable(filename, "header");
   
     // get all the values from column id=4, the closing price
     float [] val=data.getFloatColumn(4);
     for (float theVal : val) maxVal=max(maxVal, theVal);
     minVal=min(val);
     maxVal=max(val);
   
     println(val.length+" "+minVal+" "+maxVal);
   
     // fill an ArrayList with normalized values
     values=new ArrayList<Float>();
     for (float theVal : val) {
       values.add(theVal/maxVal); // normalize
     }
   }
   void keyPressed() {
     build();
   }
   
   void drawCredit() {
     fill(255);
     textAlign(RIGHT);
     text(UMB.version(), width-5, 15);
     textAlign(LEFT);
     text(this.getClass().getSimpleName(), 5, 15);
     
     String dataStr=filename+" | "+
       values.size()+" values ["+
       nf(minVal,0,2)+" > "+nf(maxVal,0,2)+"]";
     text(dataStr, 5, height-5);
   }

Terrain Builder

1. Open Processing and create a new sketch.
   
   

   ---

2. Import Modelbuilder and OpenGL libraries.
   
   

   ---

3. Create setup() and draw() methods.
   
   

   ---

4. Create an instance variable to hold an array of UVertexlists. This variable will be of type UVertexList. Name the array variable vl.
   
   To create an array use this syntax:

   UVertexList[] vl;

   
   

   ---

5. Add an instance variable of type UNav3D. Name the variable nav.
   
   

   ---

6. Add an instance variable of type UGeometry. Name the variable geo.
   
   

   ---

7. Navigate to the setup() method:
   1. Set the size of your sketch and select the renderer you want to use.
      
      

      ---

   2. Call your build() method.
      
      

      ---

   3. Initialize nav by setting it to new UNav3D(this).
      
      

      ---

   4. You want to center the 3D space:

      nav.setTranslation(width/2, height/2, 0);

      
      

      ---

8. Inside the draw() method:
   1. Update the background.
      
      

      ---

   2. Add lights.
      
      

      ---

   3. Set the stroke.
      
      

      ---

   4. Set the fill.
      
      

      ---

   5. Call doTransforms() on nav so you can manipulate 3D space.
      
      

      ---

   6. Call draw() on geo and pass the method a reference to self:

      geo.draw(this);

      
      

      ---

9. Create a method named build(). This method does not return anything (void)
   
   

   ---

10. Inside the build() method:
    1. Initialize the array of UVertexLists to hold 20 elements. You can do this by setting the array variable to UVertexList.getVertexLists(20).
       
       

       ---

    2. Now you want to create a for loop to iterate over the UVertexList array.
       
       

       ---

    3. Inside the loop you just constructed, create a nested loop that iterates over the UVertexList array again.
       
       

       ---

    4. Inside the inner loop you want to add an x, y and z value to each element in the array (vl[i]).
       The first point will be map(outer_loop_var, 0,vl.length-1, -1,1),
       the second point will be a random number between 0.2 and 1
       and the third point will be map(inner_loop_var, 0,vl.length-1, -1,1)
       
       The x will take the outer loop variable and map it, changing the min of 0 and the max of the 11 to a new min of -1 and a new max of 1.
       The y will be a random number between .2 and 1.
       The z will take the inner loop variable and map it, changing the min of 0 and the max of the 11 to a new min of -1 and a new max of 1.
       
       

       ---

    5. Initialize the geo instance by setting it to new UGeometry().
       

       ---

    6. In order to connect all the points, call quadStrip(vl) on the instance of geo.
       
       
    7. If you ran this now, you wouldn't see anything. Why?
       
       

       ---

    8. Call setDimensions(600) on the instance of geo. The parameter is the number in millimeters that you want width and length of the terrain to be.
       
       

       ---

11. Save and test.
    
    

    ---

Adding a GUI

1. Open the terrain sketch.
   
   

   ---

2. Import the controlP5 library.
   
   

   ---

3. Create an instance variable of type USimpleGUI. Name it gui.
   

   ---

4. Create an instance variable of type int. Name it meshRes. This variable will control the resolution of the mesh. In the original terrain sketch this value was the number of elements in your UVertexList array.
   
   

   ---

5. Create an instance variable of type float. Name it noiseStep. This will control the randomness of the form. Set it to 0.1.
   
   

   ---

6. Create an instance variable of type boolean. Name it doRebuild. This will help control when you want to update the sketch.
   
   

   ---

7. Navigate to the draw() method and surround the doTransforms(), fill() and geo.draw(this) statements with calls to pushMatrix() and popMatrix().
   
   

   ---

8. Create a conditional to test if doRebuild is true. If the condition is met, call build() and set doRebuild to false.
   
   

   ---

9. Create a new method called initGUI(). This method does not return anything (void).
   
   

   ---

10. Inside the initGUI() method
    1. Initialize the instance of gui by setting it to new USimpleGUI(this).
       
       

       ---

    2. Set meshRes to 20.
       
       

       ---

    3. Add a slider to the gui instance by calling addSlider("Label", value, min, max) on the instance of gui. Set the Label to "meshRes" and set the value to meshRes. Set the min to 4 and the max to 50.
       
       

       ---

    4. Add another slider to the instance of gui. Call it "noiseStep" and set the value to noiseStep. Set the min to 0.001 and the max to 0.5
       
       

       ---

11. Create a new method called controlEvent. This method does not return anything, but takes ControlEvent ev as a parameter.
    
    

    ---

12. Inside the method set doRebuild to true.
    
    

    ---

13. Navigate to the setup() method and add
    • initGUI();
    • nav.setGUI(gui);
    
    
    

    ---

14. Navigate to the build() method.
    
    

    ---

15. Instead of hard-coding the number of elements in the array set this value to meshRes.
    
    

    ---

16. Navigate to inside the inner loop of your nested loops and before you add points add this line:

    float y=noise((float)outer_loop_var*noiseStep,(float)inner_loop_var*noiseStep); 
    

    
    

    ---

17. Add y to the second point.
    

    ---

18. Navigate to the draw() method and call draw() on the instance of your gui object.
    
    

    ---

19. Save and test.
    
    

    ---

Making the terrain solid

1. Open the terrain sketch.
   
   

   ---

2. Navigate to the setup() method and call setRotation() on the instance nav and pass it PI,0,0
   
   

   ---

3. Move build() to the end of the draw() method.
   
   

   ---

4. Navigate to the build() method
   
   

   ---

5. You want to build the left edge of the terrain mesh. To do that, place this block of code before geo.setDimensions(600);:

     UVertexList bottom=new UVertexList(vl[0]);
     for(int i=0; i<bottom.n; i++){
     	bottom.v[i].y=0;
     }
     // create edge as a quadstrip between bottom and 
     // the first edge of the terrain
     geo.quadStrip(bottom, vl[0]);

   
   

   ---

6. This will build the right edge:

      // right edge
     bottom=new UVertexList(vl[meshRes-1]);
     for(int i=0; i<bottom.n; i++){
       bottom.v[i].y=0;
     }
     // reverse order to get correct face normals
     geo.quadStrip(vl[meshRes-1], bottom);

   
   

   ---

7. This will build the front wall:

   // get edge using extractFromArray() to get 
   // all the first points of the vertex lists.
   // this is the front edge
     UVertexList top=UVertexList.extractFromArray(0, vl);
     bottom=new UVertexList(top);
     for(int i=0; i<bottom.n; i++){
         bottom.v[i].y=0;
     }
     geo.quadStrip(top, bottom);
     

   
   

   ---

8. This will build the back wall:

   // get edge using extractFromArray() to get 
   // all the first points of the vertex lists.
   // this is the front edge
    top=UVertexList.extractFromArray(meshRes-1, vl);
     bottom=new UVertexList(top);
     for(int i=0; i<bottom.n; i++) {
       bottom.v[i].y=0;
     }
      geo.quadStrip(bottom, top);
     

   
   

   ---

9. To create the ground plane you need to use UVec3:

    // create ground plane as quad.
     // use new UVec3(vl[0].v[0]).scale(1,0,1)
     // to get a copy of the vertex with y=0
     geo.beginShape(QUAD_STRIP);
     geo.vertex(
       new UVec3(vl[0].v[0]).mult(1,0,1));
     geo.vertex(
       new UVec3(vl[0].v[meshRes-1]).mult(1,0,1));
     geo.vertex(
       new UVec3(vl[meshRes-1].v[0]).mult(1,0,1));
     //
     geo.vertex(
       new UVec3(vl[meshRes-1].v[meshRes-1]).mult(1,0,1));
     geo.endShape();
     

   
   
   
   

   ---

10. Navigate to the initGUI() method. Inside the method add a button to the GUI. The syntax for adding a button is this:

     gui.addButton("button/method_name);

    Name your button saveSTL
    
    

    ---

11. Create a saveSTL() method.
    
    

    ---

12. Inside the method add this code so that every time you click on the button you will create an stl file with a unique name.

    geo.writeSTL(this, 
        UIO.getIncrementalFilename(
          this.getClass().getSimpleName()+" ###.stl",
          sketchPath)
        );
        

    
    

    ---

13. Save and test.
    

    ---

14. You'll need to repair this mesh. I suggest using NetFabb
    

    ---

Images and Terrain Builder

1. Open the Terrain Builder sketch from the previous tutorial.
   
   

   ---

2. Find a suitable image to work with and add the file to your sketch.
   
   
   

   ---

3. Create an instance variable of type float. Name the variable yScale
   
   

   ---

4. Add another instance variable. This time of type PImage and name the variable img.
   
   

   ---

5. Navigate to the initGUI() method.
   
   

   ---

6. Inside the initGUI() method
   1. Comment out the slider and statements in the build() method that deal with noise.
      
      

      ---

   2. Set yScale to 0.05
      
      

      ---

   3. Add a slider to scale the Y axis. The syntax for adding a slider is this:

       gui.addSlider("slider name", value, min, max);

      Name your slider yScale. Set the value to yScale, set min to 0.02 and max to .1.
      
      

      ---

   4. Change meshRes to 50
      
      

      ---

   5. Change the meshRes slider values to range between 50 and 200.
      
      

      ---

7. Navigate to the setup() method and load the image:

   img=loadImage("name_of_image.png");

   
   
   

   ---

8. Change the setRotation() to PI/2,0,0
   
   

   ---

9. Navigate to the build() method
   
   

   ---

10. Inside the nested loop comment out anything to do with noiseStep
    
    

    ---

11. Now you are going calculate y as pixel brightness. Create a variable named y that is of type float. Set the variable to

    1-(float)brightness(img.get(
              (int)map(i, 0,vl.length-1, 0,img.width-1),
              (int)map(j, 0,vl.length-1, img.height-1,0)))/255

    
    
    

    ---

12. Set y to itself multiplied by yScale.
    
    

    ---

13. Modify the statement where you add the points to the UVertexList:

    vl[i].add(
            map(i, 0,vl.length-1, -1,1),
            y,
            map(j, 0,vl.length-1, -1,1)
          );
    

    
    

    ---

14. Change the fill() to a gray , background() to black and stroke() to noStroke().
    

    ---

15. Save and test.
    
    

    ---

Standards

Saving STL files

1. Create a saveSTL() method that does not return anything and does not take any arguments.
   
   

   ---

2. Inside the method add this code so that every time you click on the button you will create an stl file with a unique name.

   String filename=this.getClass().getSimpleName();
       //path and prefix
       filename=UFile.nextFile(sketchPath,filename); 
       saveFrame(filename.substring(0, filename.length()-4)+"-###.png");
       geo.writeSTL(filename.substring(0, filename.length()-4)+"-###.stl");
       
       

   
   

   ---

Projects

Algorithms

Toolbar

Art & Code

Encoding compositional logic into the generator

Objects

Arrays

Reading List

• Getting Started with Processing
• Form+Code in Design, Art, and Architecture
• Processing: A Programming Handbook for Visual Designers and Artists

Saving STL files

1. Create a saveSTL() method that does not return anything and does not take any arguments.
   
   

   ---

2. Inside the method add this code so that every time you click on the button you will create an stl file with a unique name.

   geo.writeSTL(this, 
       UIO.getIncrementalFilename(
         this.getClass().getSimpleName()+" ###.stl",
         sketchPath)
       );
       

   
   

   ---