# Perlin Noise map

**URL:** https://discourse.processing.org/t/perlin-noise-map/839
**Category:** Project Guidance
**Created:** [June 10, 2018, 2:31pm UTC](https://discourse.processing.org/t/perlin-noise-map/839 "2018-06-10T14:31:55Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![imaginativeCODE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/imaginativecode/32/4220_2.png) [@imaginativeCODE](https://discourse.processing.org/u/imaginativeCODE)
#### Post date: [June 10, 2018, 2:31pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/1 "2018-06-10T14:31:55Z")

</div>

How would you generate a map with multiple biome’s and when two biome’s meet they have a smooth transition. Not sure where to start. Would you have multiple noise’s to generate the height of the terrain and the moisture values.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 10, 2018, 5:29pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/2 "2018-06-10T17:29:12Z")

</div>

> [@imaginativeCODE](#):
>
> Would you have multiple noise’s to generate the height of the terrain and the moisture values.

Yes I think this is a good idea.

> [@imaginativeCODE](#):
>
> they have a smooth transition

What you could do is use the `lerpColor()` function to have a smooth transition.

---

<div class="post-metadata">

### Author: ![imaginativeCODE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/imaginativecode/32/4220_2.png) [@imaginativeCODE](https://discourse.processing.org/u/imaginativeCODE)
#### Post date: [June 10, 2018, 6:54pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/3 "2018-06-10T18:54:30Z")

</div>

Thanks for your opinion it helps to have someone else’s opinion in these sort of cases.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 10, 2018, 9:25pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/4 "2018-06-10T21:25:36Z")

</div>

Do you want to generate a terrain like this ?

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/7acece018d771b81e2f81c27ea38e817cf147ccf.jpg)

---

<div class="post-metadata">

### Author: ![imaginativeCODE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/imaginativecode/32/4220_2.png) [@imaginativeCODE](https://discourse.processing.org/u/imaginativeCODE)
#### Post date: [June 11, 2018, 9:44am UTC](https://discourse.processing.org/t/perlin-noise-map/839/5 "2018-06-11T09:44:12Z")

</div>

Yeah pretty much like that. I believe that’s voxel terrain.

---

<div class="post-metadata">

### Author: ![imaginativeCODE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/imaginativecode/32/4220_2.png) [@imaginativeCODE](https://discourse.processing.org/u/imaginativeCODE)
#### Post date: [June 13, 2018, 6:52pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/6 "2018-06-13T18:52:31Z")

</div>

I think this is the way to do it tell me if i am wrong . You generate groups that have random shapes and sizes. In these shapes they have a noise moisture, temperature and Altitude.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 15, 2018, 9:08pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/7 "2018-06-15T21:08:48Z")

</div>

Yes you could try it. Feel free to post screen shots and your code here 🙂

This is my try to do different biomes with RGB colors :

```auto
void setup() {
  size(800, 800);
  background(0);
  
  loadPixels();
  for(int i=0;i<3;i++){
    int x = (int)random(width);
    int y = (int) random(height);
    int radius = (int) random(100,900);
    
    for(int xpos = 0;xpos<width;xpos++){
      for(int ypos = 0;ypos<height;ypos++){
        int loc = xpos+ypos*width;
        float dist = dist(x,y,xpos,ypos);
        if (dist <= radius){
          if (i==0) pixels[loc] = color(map(dist,0,radius,255,0),green(pixels[loc]),blue(pixels[loc]));
          else if (i==1) pixels[loc] = color(red(pixels[loc]),map(dist,0,radius,255,0),blue(pixels[loc]));
          else if (i==2) pixels[loc] = color(red(pixels[loc]),green(pixels[loc]),map(dist,0,radius,255,0));
        }
      }
    }
  }
  updatePixels();
}

void draw() {
  noLoop();
}

```

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/351d2f17a0d2085cf4d98de00a97400e85296a2b.jpg)

Here you have the 3D version :

```auto
int square_size = 5;
int x_size = 80*2 , y_size = 80*2;
Square[][] list;

void setup(){
  size(800,800,P3D);
  background(255);
  
  rotateX(radians(30));
  translate(0,-200,-400);
  lights();
  
  list = new Square[x_size][y_size];
  
  
  //Calculus
  for(int i=0;i<3;i++){ //Doing the loop 3 times for RGB
    int x_center = (int)random(x_size); //The center coordinates of the biome
    int y_center = (int) random(y_size);
    int radius = (int) random(x_size); //The radius influence of the biome
    float xoff = 0,yoff = 0; //Initialize noise values
    for(int x=0;x<x_size;x++){
      for(int y=0;y<y_size;y++){
        float dist = dist(x,y,x_center,y_center); 
        if (list[x][y]==null) list[x][y] = new Square(color(100)); //initialize a black square
        if (dist <= radius){
          list[x][y].add_components(i,dist,radius,noise(xoff,yoff)*map(dist,0,radius,250,0));
        }
        yoff += 0.1;
      }
      yoff = 0;
      xoff += 0.1;
    }
  }
  
  
  //display
  for(int x=0;x<x_size;x++){
    for(int y=0;y<y_size;y++){
      list[x][y].display(x,y);
    }
  }
  
  save(second()+minute()+hour()+".jpg");
  noLoop();
}

void draw(){
}

class Square{
  float red,green,blue;
  int size;
  
  Square(color cc){
    red = red(cc);
    green = green(cc);
    blue = blue(cc);
    size = 0;
  }
  
  void display(int x,int y){
    //println(red,green,blue);
    fill(red,green,blue);
    pushMatrix();
    translate(x*square_size,y*square_size);
    box(square_size,square_size,size);
    popMatrix();
  }
  
  void add_components(int i,float dist,int radius,float s){
    if (i==0) red += map(dist,0,radius,255,0);
    if (i==1) green += map(dist,0,radius,255,0);
    if (i==2) blue += map(dist,0,radius,255,0);
    size += s;
  }
}

```

 ![2094](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/5618c9ae35192e880d028f0d6c843183d623fcd5.jpg) ![56](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/d0c4743253e31fda84303532a2ef643491c73334.jpg)

---

<div class="post-metadata">

### Author: ![imaginativeCODE](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/imaginativecode/32/4220_2.png) [@imaginativeCODE](https://discourse.processing.org/u/imaginativeCODE)
#### Post date: [June 21, 2018, 6:47pm UTC](https://discourse.processing.org/t/perlin-noise-map/839/8 "2018-06-21T18:47:26Z")

</div>

Wow it looks great and works good too thanks for your help on this.