# Color lines for terrain/landscape generation

**URL:** <https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422>\
**Category:** Coding Questions\
**Created:** [October 25, 2022, 10:49am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422 "2022-10-25T10:49:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 25, 2022, 10:49am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/1 "2022-10-25T10:49:35Z")

</div>

Hi there and sorry if this has been answered before. I really looked on posts and solutions, but i am still so new to porcessing.  
I just signed in to ask for help.

I followed this great tutorial as a starting point: (the famous Perlin/Terrain generation):

> **[3D Terrain Generation with Perlin Noise in Processing](https://thecodingtrain.com/challenges/11-3d-terrain-generation-with-perlin-noise/)**
>
> In this coding challenge, I create a 3D procedural terrain using Perlin Noise and the beginShape() function in Processing.

99% of the code it’s from the tutorial, o si just tried to understand it a bit and play with some variables there (adjusting colors, angles, rotation).

What i’d like to archieve is to “draw” the lines from “far to close” in an increasing color (green 35 to 240, for example), but i keep stuck at getting it vertically (from the left) and the first line i’ts on the brightest color.

This part is for the cl (color) to increase with the nested loops:

for (int y = 0; y \< rows - 1; y++) {  
beginShape(TRIANGLE\_STRIP);

```
if (cl <= 240);
cl = 35;

for (int x = 0; x < cols; x++) {
  vertex(x * scl, y * scl, terrain[x][y]);
  vertex(x * scl, (y+1) * scl, terrain[x][y+1]);

  stroke(0, cl, 0);
  cl += 4;
}
endShape();

```

I’m sure there is something wrogn there, but i can’t find it…

This is what i’m getting:

 ![ea047329212c70bc1a781b15b74651a5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/5/e5af6fa2fc66dc4058cc1509fe4afd8a14df6454.png)

Thanks in advance,

Carles

---

<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:** [October 25, 2022, 11:35am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/2 "2022-10-25T11:35:19Z")

</div>

Hello @crv74,

Try applying the stroke _before_ the inner loop; y is rows so you will be changing the color for each row.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/b/ebc60cf0c27e41c00a4664b6b12e6f3424cfb3c2.png)

Related topic:  
[https://discourse.processing.org/t/generative-terrain-customization/39396/2](https://discourse.processing.org/t/generative-terrain-customization/39396/2)

`:)`

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 25, 2022, 11:55am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/3 "2022-10-25T11:55:42Z")

</div>

Hi glv,

i readed that post, and several more, but i must be dumb or something…

If i put the stroke in any place out of where i showed, i get either an error or a green BG only…

If you can hint me a bit more, i’ll appreciate it. Because this is driving me nuts.

Not working for me:

> for(int y = 0; y \< rows - 1; y++) {  
> beginShape(TRIANGLE\_STRIP);
> 
> ```
> stroke(0,cl,0);
> cl += 4;
> if (cl <= 240); cl = 35;
>     
> for(int x = 0; x < cols; x++) {
> vertex(x * scl, y * scl, terrain[x][y]);
> vertex(x * scl, (y+1) * scl, terrain[x][y+1]);
> 
> }
> endShape();
> 
> ```

This gets where i “want”… but on the wrong _side_…

```auto
  translate(width/2, height/2);
  rotateX(PI/3);
  //rotateZ(yoff/3);
  translate(-w/2, -h/2);

  for (int y = 0; y < rows - 1; y++) {
    beginShape(TRIANGLE_STRIP);
    if (cl > 240);
    cl = 35;

    for (int x = 0; x < cols; x++) {
      stroke(0, cl, 0);
      vertex(x * scl, y * scl, terrain[x][y]);
      vertex(x * scl, (y+1) * scl, terrain[x][y+1]);

      cl += 3;
    }
    endShape();

```

Thanks!

Carles

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [October 25, 2022, 12:47pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/4 "2022-10-25T12:47:38Z")

</div>

The following piece of code:

> [@crv74](#):
>
> ```auto
> if (cl > 240);
> cl = 35;
> 
> ```

is equivalent to:

```auto
if (cl > 240) {
  //nothing happens! :(
}
cl = 35;

```

Does solving that bring you a step closer?

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 25, 2022, 1:06pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/5 "2022-10-25T13:06:14Z")

</div>

Thanks, but no.

And my head is about to explode… I leave it untill tomorrow.

Really appreciate it but i can’t figure it out.

Carles

p.s. I assume that since i started with this tutorial but i know nearly nothing of Processing i’m missing a lot of basics that could help me.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [October 25, 2022, 1:49pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/6 "2022-10-25T13:49:20Z")

</div>

No worries, that frustration is part of programming. Especially in the beginning.

What you could try tomorrow is to simplify your problem first, and then work your way back up towards the tutorial. Take it one step at the time and gradually extends the complexity of your sketch. For instance:

1. Draw a simple, rectangular grid using two separate `for` loops (without `PShape`). So one draws the x-axis, the other the y-axis.
2. Add a color transition to one axis
3. Replace the drawing technique of step 1 with `PShape`
4. Draw a rectangular grid using a nested `for` loop
5. ?

Hope that helps!

---

<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:** [October 26, 2022, 10:40am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/7 "2022-10-26T10:40:53Z")

</div>

Hello @crv74,

> [@crv74](#):
>
> And my head is about to explode… I leave it untill tomorrow.
> 
> Really appreciate it but i can’t figure it out.

I will often solve problems by walking away and coming back fresh.

There is a _Troubleshooting_ link on this page that specifically discussed the _Semicolons_ as one of the _Common Problems_:

[https://processing.org/download](https://processing.org/download)

`:)`

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 26, 2022, 12:41pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/8 "2022-10-26T12:41:17Z")

</div>

Good afternoon.

> [@Tiemen](#):
>
> - Draw a simple, rectangular grid using two separate `for` loops (without `PShape`). So one draws the x-axis, the other the y-axis.
> - Add a color transition to one axis
> - Replace the drawing technique of step 1 with `PShape`
> - Draw a rectangular grid using a nested `for` loop
> - ?

1- Archieved  
2- Archieved  
3- lost…

What i learned:  
I can define the “stroke” previous the “line” argument.  
I can reuse the xpos/ypos variable in the for/loop so i can sort of control the deep-ness of the lines…

```auto
void setup() {
  size(440, 440);
}
void draw() {
  background(250);
  translate(20, 20);

  for (int y = 0; y < 10; y++) {
    float ypos = y * 20;
    stroke(255,ypos,0);
    line(0, ypos, width - 260, ypos);

     for (int x = 0; x < 10; x++) {
       float xpos = x * 20;
       stroke(xpos,255,0);
       line(xpos, 0, xpos, height - 260);
   }
  }
}

```

Were i’m lost:  
I don’t know where to apply it on the Grid/perlin generator…

I reply myself with the solution:

```auto
  for (int y = 0; y < rows - 1; y++) {
    beginShape(TRIANGLE_STRIP);

    for (int x = 0; x < cols; x++) {
      stroke(0, 35+y*3, 0);
      vertex(x * scl, y * scl, terrain[x][y]);
      vertex(x * scl, (y+1) * scl, terrain[x][y+1]);
      cl += 4;
    }
    endShape();
  }
}

```

Fun thing is that i can add the y but not the x…

If the is a better aprroach taht some one wants to share good, if not, this works for me!

MANY Thanks to everyone involved 😉

 ![ca31a4f5bf05e23b9c6ae7a294332e76](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/4/b48ba6026de650e37c2e93ffd209183b6cf00f85.png)

---

<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:** [October 26, 2022, 2:18pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/9 "2022-10-26T14:18:20Z")

</div>

Hello @crv74,

Another approach:

```auto
size(400, 400, P3D);

int rows = 21;
int cols = 21;
int scl = 20;
int cl = 0;

background(0);

strokeWeight(2);
noFill();

for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);

    int col = y*255/19;
    println(col);
    stroke(col);

    for (int x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, 0);
      vertex(x*scl, (y+1) * scl, 0);
    }
    endShape();
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/d/9daa135b8c50cb7a5576d14268947913cf3ae725.png)

`:)`

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 26, 2022, 2:21pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/10 "2022-10-26T14:21:57Z")

</div>

I have lots to learn and so few time…  
High IQ in here! 😉

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [October 26, 2022, 3:51pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/11 "2022-10-26T15:51:16Z")

</div>

> [@crv74](#):
>
> High IQ in here! 😉

That’s @glv for you. He’s the prodigy that created [GLV Paint](https://discourse.processing.org/t/a-very-simple-draw-and-save-program/12669).

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 27, 2022, 7:36am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/12 "2022-10-27T07:36:41Z")

</div>

I assume that at this point _ **we** _ could start tilting over the 3D space and paintin lines, right?? 😉

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 27, 2022, 8:31am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/13 "2022-10-27T08:31:22Z")

</div>

“Could” we implement this kind of mesh in 3D with lighting and cameras, so the light falloff does the same trick (darker to the outsides)??  
I know i enter deep waters, and i don’t even know if its possible to.  
But, hey, let’s discuss 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:** [October 30, 2022, 12:01pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/14 "2022-10-30T12:01:09Z")

</div>

Hello @crv74,

> [@crv74](#):
>
> I assume that at this point _ **we** _ could start tilting over the 3D space and paintin lines, right?

Yes. You can use stroke(), fill(), texture()…

Code below will center and rotate grid in previous post.

> **Code \< Click here!**
>
> ```auto
> void setup()
> {
> size(400, 400, P3D);
> //ortho();
> }
> 
> void draw()
> {
> background(0);
>   
> strokeWeight(2);
> noFill();
>   
> line(0, height/2, width, height/2);
>   
> float angle = frameCount*TAU/360;
> 
> translate(0, height/2, -200);
> rotateX(angle);
> translate(0, -height/2);
>   
> stroke(255, 255, 0);
> rect(50, 50, width-100, height-100);
> }
> 
> ```

> [@crv74](#):
>
> “Could” we implement this kind of mesh in 3D with lighting and cameras, so the light falloff does the same trick (darker to the outsides)?

These questions are explored in many topics throughout the forum.

Simple example I wrote a while back:  
[https://discourse.processing.org/t/3d-mesh-of-sine-waves-from-coding-challenge/22806](https://discourse.processing.org/t/3d-mesh-of-sine-waves-from-coding-challenge/22806)

An advanced example:  
[https://discourse.processing.org/t/triangle-strip-lighting-problem/38348/10](https://discourse.processing.org/t/triangle-strip-lighting-problem/38348/10)

A p5.js example:

> [@Sketch runs slow in P5.js WEBGL, (SOLVED by using P5.Geometry)](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990/22):
>
> Thanks, Paul. I knew I had to assign to each gid, but I tried this.gid = ‘nut’+str(id++); instead of this.blendMesh.gid = ‘nut’+str(id++); so that didn’t work. I have been ill for quite some days, but since yesterday I feel better and I decided to design “the enemy”, to look straight in its face. I used .obj files made by drawing vertexes in P5.java exporting them with a really good Processing library called OBJExport. Its not included in Processing’s “Contribution Manager”, but you can …

Many more examples in the forum as well. Many more!

I encourage use to peruse the forum and bookmark the useful posts.

> [@crv74](#):
>
> I know i enter deep waters, and i don’t even know if its possible to.

Deep waters! But they can be navigated.

Lots of resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

`:)`

---

<div class="post-metadata">

**Author:** ![Divitiacus](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@Divitiacus](https://discourse.processing.org/u/Divitiacus)\
**Post date:** [October 30, 2022, 1:20pm UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/15 "2022-10-30T13:20:40Z")

</div>

Not sure, if that adds anything.  
You can use the coordinates of your current point/line to map to the total grid to get a gradient.  
In your case, you might use the coordinate to the background but you could also make it dark to going from the center to the outside.  
The one issue is, you can either only go from color to black, from white to color or from color 1 to color 2. White to green to black is not really possible.  
Because the gradients don’t look very strong over a large area, you can map to twice 255 (510). That allows you to adjust, how quickly it goes dark (example below the 300 value).

X is the coordinate in the example. It can be the x and y coordinate or it can be a mean value of both, depending on how you draw your grid.

```auto
int altcolor = round(map(x,-totalgrid,totalgrid,0,510));
stroke(altcolor-300,altcolor-300,0);

```

 ![colorgrid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/d/0daefea4b6205cb1b9596d1f1a45de06f8d4ece7.png)

---

<div class="post-metadata">

**Author:** ![crv74](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/crv74/32/17261_2.png) [@crv74](https://discourse.processing.org/u/crv74)\
**Post date:** [October 31, 2022, 12:17am UTC](https://discourse.processing.org/t/color-lines-for-terrain-landscape-generation/39422/16 "2022-10-31T00:17:05Z")

</div>

LOTS of things to learn and investigate… Every day, every time.

Thanks to everyone that helpend, looked and hinted, or nearly posted, the solutions for this.

I am not sure if i should or could post the final code in the post? Would be a good thing?

Second this is i am triyon to re-do the same with camera(s) and ligtings…  
Showld i throw the quiestions here, as they are in the same way (orientation, light not affecting and so) or create a new one?  
You tell me.

Thanks again!