# How to add color for 3d terrain

**URL:** <https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548>\
**Category:** Coding Questions\
**Created:** [March 15, 2021, 5:46pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548 "2021-03-15T17:46:47Z")\
**Posts on this page:** 18\
**Page:** 2

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 20, 2021, 11:34am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/21 "2021-03-20T11:34:49Z")

</div>

Update to:

> [@How to add color for 3d terrain](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/3):
>
> Hello, Take a look at this example: [RGBCube \ Examples \ Processing.org](https://processing.org/examples/rgbcube.html) Think about how to apply this to the [terrain code](https://thecodingtrain.com/CodingChallenges/011-perlinnoiseterrain.html). Consider mapping colors to one of the axes and apply that to a vertex. Other references for color: [Color \ Processing.org](https://processing.org/tutorials/color/)[color() \ Language (API) \ Processing 3+](https://processing.org/reference/color_.html)[colorMode() \ Language (API) \ Processing 3+](https://processing.org/reference/colorMode_.html)slight_smile Update: I followed my initial vision and tried this: HSB colorMode was used. Have fun!

This is what I added to the terrain code:

```auto
    colorMode(HSB, 100, 100, 100); // In setup()

    // In body of code:
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      
      float z = terrain[x][y]; 
      fill(z+20, 100, 100);    
      vertex(x*scl, y*scl, z);
      
      float z1 = terrain[x][y+1];
      fill(z1+20, 100, 100);        
      vertex(x*scl, (y+1)*scl, z1);
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();

```

The z values were used to change the hue.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48fe549d0fd0646c8a07ec1fd31bbd916292a85e.jpeg)

`:)`

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 20, 2021, 1:34pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/22 "2021-03-20T13:34:32Z")

</div>

All of the following should be able to provide you with a good understanding of how to add color to your sketch. However it feels like you may be looking for something else however i cannot tell by your comments what this is. If the post answer your question please let me know if not please decribe the problem you are looking to solve.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 20, 2021, 2:39pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/23 "2021-03-20T14:39:05Z")

</div>

@[glv](https://discourse.processing.org/u/glv)  
hi thanks for hints

@paulgoux

see [glv](https://discourse.processing.org/u/glv) idea about the color

```auto
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/IKB1hWWedMk

int cols, rows;
int scl = 20;
int w = 2000;
int h = 1600;

float flying = 0;

float[][] terrain;

void setup() {
  size(600, 600, P3D);
  cols = w / scl;
  rows = h/ scl;
  terrain = new float[cols][rows];
 colorMode(HSB, 100, 100, 100);
}

void draw() {

  flying -= 0.1;

  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x/2][y/2] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }

  background(0);
// stroke(255);
  //noFill();
//noStroke();
  translate(width/2, height/2+50);
  rotateX(PI/3);
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
   // beginShape(TRIANGLE_STRIP);
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      
      float z = terrain[x][y]; 
      fill(z+20, 100, 100);    
      vertex(x*scl, y*scl, z);
      
      float z1 = terrain[x][y+1];
      fill(z1+20, 100, 100);        
      vertex(x*scl, (y+1)*scl, z1);
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();
  }
}

```

the result as this

 ![Untitled 73](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38e3ae484ccb94db0df062077e4722019eb23312.jpeg)

i cleared what i need on the photo

i need other way than this

```auto
if(terrain[x][y]<60)c = color(0,0,255);
      if(terrain[x][y]>60)c = color(189, 189, 23);

```

i need to select the X Y and color it

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 20, 2021, 3:01pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/24 "2021-03-20T15:01:22Z")

</div>

@jafal

You are in complete control of your code. `:)`

```auto
// In body of code:
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      
      float hue = 0; 
      
      float z = terrain[x][y]; 
      
      if (x>cols/2 && y>rows/2)
        hue = 60;
      else
        hue = z;
      fill(hue, 100, 100);    
      vertex(x*scl, y*scl, z);
      
      float z1 = terrain[x][y+1];
      fill(hue, 100, 100);        
      vertex(x*scl, (y+1)*scl, z1);
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();

```

I also added `lights()` at the start of `draw()`.

You can also modify the other elements of the HSB color.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/de6f16745b8066ab9a378c1e352a3bcd2b1319bb.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 20, 2021, 3:32pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/25 "2021-03-20T15:32:00Z")

</div>

@[glv](https://discourse.processing.org/u/glv)

hi

just idea came to me now i see that its suitable for now divide the x y of grid into blocks then terrain the wanted block with selected color i am going to give it try ❤ ❤ ❤

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 20, 2021, 5:34pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/26 "2021-03-20T17:34:38Z")

</div>

@ [glv](https://discourse.processing.org/u/glv)

just awesome  
Now, a quarter of the grid has a color independent of the rest of the grid

 ![Untitled 74](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3b60e5b6764784f3349407f416d07366ac044c75.jpeg)

 ![Untitled 75](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f330a4a0db94d38f11a4d68d85f4e11d9bb3f9d.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 20, 2021, 10:30pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/27 "2021-03-20T22:30:03Z")

</div>

> [@jafal](#):
>
> @ [glv](https://discourse.processing.org/u/glv)

hi

i can now control the color of the grid as blocks

```auto

      if ( x>44 && x<51 && y>rows/2)
        hue = 60;
      else
        hue = z;
    fill(hue, 100, 110);    
      
      if ( x>52 && x<59 && y>rows/2)
        hue = 20;
      fill(hue, 100, 110);  
     if ( x>61 && x<71 && y>rows/2)
        hue = 40;
     
      fill(hue, 100, 110);  
     if ( x>31 && x<41 && y>rows/2)
        hue = 90;
     
      fill(hue, 100, 110);  
      if ( x>71 && x<77 && y>rows/2)
        hue = 10;
     
      fill(hue, 100, 110);  
     if ( x>63 && x<85 && y>1&& y<38 )
        hue = 25;
     
      fill(hue, 100, 110);   
     
     
        if ( x>51 && x<61 && y>1&& y<38 )
        hue = 75;
     
      fill(hue, 100, 110);
      
      

```

 ![Untitled 76](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8a1e447102adf390407d55086fff43bcb6a6135c.jpeg)

 ![Untitled 77](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b847f13172606ca1a4fc0e650ec52bcc0a6146d0.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 20, 2021, 10:42pm UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/28 "2021-03-20T22:42:58Z")

</div>

> [@jafal](#):
>
> @ [glv](https://discourse.processing.org/u/glv)

hi  
my question now how to make the colored block has gradient Z color because When terrain is gained  
The colors of the blocks from top to bottom remain the same

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 7:25am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/29 "2021-03-27T07:25:51Z")

</div>

> [@glv](#):
>
> You are in complete control of your code. `:)`

hi

yes you are true now i am in complete control 😃

 ![Untitled 97](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/33937940a280ef054cb993a6f0796d2ee8210596.jpeg)

 ![Untitled 88](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/33e96f94c9b59b79b65cf041964f80a63bf334f9.jpeg)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 27, 2021, 7:45am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/30 "2021-03-27T07:45:18Z")

</div>

Try things with even more complexity. This is 2d but the im sure you should be able to convert it to 3d. Anyways play around with the commented functions.

```auto

int total = 1000;
float x,y,radius = 100;
PVector pos;
void setup(){
  size(400,400);
  pos = new PVector(width/2,height/2);
};

void draw(){
  background(255);
  //radius = 
  for(int i=0;i<total;i++){
    
    float angle = ((2*PI)/total)*i;
    int osc = 4;
    float offset = 0;
    //offset = cos(angle);
    //offset = sin(angle);
    //offset = tan(angle);
    //offset = 1/cos(angle);
    //offset = 1/sin(angle);
    //offset = 1/tan(angle);
    
    //offset = sin(angle*osc);
    //offset = tan(angle*osc);
    //offset = 1/cos(angle*osc);
    //offset = 1/sin(angle*osc);
    //offset = 1/tan(angle*osc);
    float func = 0;
    
    func = sin((angle+offset)*osc);
    //func = cos((angle+offset)*osc);
    //func = tan((angle+offset)*osc);
    
    //func = sin(angle+offset*osc);
    //func = cos(angle+offset*osc);
    //func = tan(angle+offset*osc);
    
    //func = sin((angle+offset)*osc)*cos((angle+offset)*osc);
    //func = sin((angle+offset)*osc)*cos(angle+offset*osc);
    //func = sin((angle+offset)*osc)*cos(angle+offset*osc);
    //func = sin((angle+offset)*osc)*cos(angle+offset*osc);
    //func = sin((angle+offset)*osc)*cos(angle+offset*osc);
    //func = sin((angle+offset)*osc)*cos(angle+offset*osc);
    x = pos.x+radius * cos(angle)*func;
    y = pos.y+radius * sin(angle)*func;
    stroke(0);
    strokeWeight(1);
    point(x,y);
  }
};

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 7:58am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/31 "2021-03-27T07:58:16Z")

</div>

@[paulgoux](https://discourse.processing.org/u/paulgoux)

thanks for you i am going to try you sketch  
now i can have multi colors and z heights in the same grid and not random and with out noise

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 7:59am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/32 "2021-03-27T07:59:42Z")

</div>

![Untitled 101](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/53b9cc68f422b5306544c6e0c1d2da96911d79d4.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 8:00am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/33 "2021-03-27T08:00:51Z")

</div>

![Untitled 99](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/820bf292db0246306c8d6476a642169ba2dfeb59.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 8:03am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/34 "2021-03-27T08:03:04Z")

</div>

> [@jafal](#):
>
> @[paulgoux](https://discourse.processing.org/u/paulgoux)

see how colors interference

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 27, 2021, 8:06am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/35 "2021-03-27T08:06:33Z")

</div>

Now to code desmos from scratch

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 8:13am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/36 "2021-03-27T08:13:09Z")

</div>

yes sure but i am totally new for java and my experience close to zero but i can learn what i insist to learn with assist of good people here ❤

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 27, 2021, 8:26am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/37 "2021-03-27T08:26:47Z")

</div>

A little bit of brain food

[![](https://img.youtube.com/vi/NcftEcsgUeE/maxresdefault.jpg "SimpSymm - procedural modeling algorithm") ](https://www.youtube.com/watch?v=NcftEcsgUeE)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 27, 2021, 8:33am UTC](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548/38 "2021-03-27T08:33:59Z")

</div>

nice and warm food 😄

i do own 3d printer it could print complex shape

[Previous page](https://discourse.processing.org/t/how-to-add-color-for-3d-terrain/28548.md?page=1)