Color lines for terrain/landscape generation

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):

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:

Thanks in advance,

Carles

1 Like

Hello @crv74,

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

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

:)

2 Likes

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

  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

The following piece of code:

is equivalent to:

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

Does solving that bring you a step closer?

3 Likes

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.

1 Like

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!

2 Likes

Hello @crv74,

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

:)

1 Like

Good afternoon.

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…

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:

  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 :wink:

Hello @crv74,

Another approach:

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

:)

1 Like

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

That’s @glv for you. He’s the prodigy that created GLV Paint.

1 Like

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

“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 :wink:

Hello @crv74,

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

Code below will center and rotate grid in previous post.

Code < Click here!
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);
  }

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

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

A p5.js example:

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

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

Deep waters! But they can be navigated.

Lots of resources here:

:)

1 Like

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.

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

2 Likes

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!

1 Like