# Applying noise to a circular grid

**URL:** <https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564>\
**Category:** Processing.py\
**Created:** [August 11, 2018, 10:41pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564 "2018-08-11T22:41:31Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 11, 2018, 10:41pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/1 "2018-08-11T22:41:31Z")

</div>

Hi,

I’m having difficulties correctly applying Perlin noise to a circular grid.

When I first computed the noise value, the end of the grid was not matching its beginning anymore… which is normal.

The problem is, when I try to link the beginning to the end of the grid then the noise becomes “symetrical”. And I can’t seem to figure out how to break that symmetry. Is there something wrong or missing with the way I’m computing the 2D noise value ? (`terrain[x][y]` here below)

**Circular grid without noise**

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/269809e36f6a901ab4fbe61f420b9130377e813a.png)

**Circular grid with noise**

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/01ddf059f377d52cc3a087da6908d69dcaaab060.jpg)

**Matching edges circular grid with noise**

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c033c58ec0ae1c09984cba373cd0ac8f5204b055.jpg)  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83f117808a967c14076084db28b86a4b42e56fef.jpg)

**Example sketch**

```auto
add_library('peasycam')

n_points, radius, step = 200, 350, 2
maximum = 450
minimum = 170
factor = .006

def setup():
    global lines
    size(1800, 800, P3D)
    background(0)
    smooth(8)
    
    cam = PeasyCam(this, 1400)
    n_cols, n_rows = 1000, 80
    angle = radians(360) / n_cols

    terrain = [[0 for e in range(n_rows)] for f in range(n_cols+1)]
    
    # Computing noise
    for y in range(n_rows):
        for x in range(n_cols+1):
            #terrain[x][y] = map(noise((x *factor)+t, (y*factor)+t), 0, 1, 0, maximum) ### Edges not matching
            terrain[x][y] = map(noise(cos(x * angle) * 3, sin(y * angle) * 3 ), 0, 1, 0, maximum) ### Edges matching but symetrical noise
            
    lines = createShape()
    for y in range(n_rows):
        lines.beginShape(LINES) 
        lines.strokeWeight(1)
        lines.noFill()
        lines.stroke(255)
        for x in range(n_cols+1):
            lx1 = cos(angle * (x-1) ) * (radius + (y*step))
            ly1 = sin(angle * (x-1) ) * (radius + (y*step))
            lx2 = cos(angle * x ) * (radius + (y*step))
            ly2 = sin(angle * x ) * (radius + (y*step))
            lines.vertex(lx1, ly1, terrain[x-1][y])
            lines.vertex(lx2, ly2, terrain[x][y])
        lines.endShape(CLOSE)
            
       
def draw():
    background(0)

    shape(lines)

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 11, 2018, 11:36pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/2 "2018-08-11T23:36:10Z")

</div>

I did some googling and ran across these:

> **[Noisy Circle - OpenProcessing](https://www.openprocessing.org/sketch/112858)**
>
> A simple circle affected by perlin noise. 
> 
> Mouse X = frequency of the noise
> Mouse Y = amplitude of the noise
> Mouse Click = to fill or not to fill
> 
> \- Update 10/02/13:
> Fixed problem with first and last points of the circle not matching by using sin()...

> <https://gamedev.stackexchange.com/questions/23625/how-do-you-generate-tileable-perlin-noise>

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 11, 2018, 11:44pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/3 "2018-08-11T23:44:21Z")

</div>

Hi @tony,

If you look at my script you’ll see that the noise value is somewhat similar to the example you’re providing, except it is computed from a 2D array list. There’s unfortunately no solution I can find from these links (not to mention the computation of the noise value from the first sketch is not quite correct).

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 12, 2018, 1:22am UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/4 "2018-08-12T01:22:27Z")

</div>

> [@solub](#):
>
> #terrain[y] = map(noise((x _factor)+t, (y_factor)+t), 0, 1, 0, maximum) ### Edges not matching  
> terrain[y] = map(noise(cos(x \* angle) \* 3, sin(y \* angle) \* 3 ), 0, 1, 0, maximum) ### Edges matching but symetrical noise

So you want the edges to match but avoid the symmetry?

Kf

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 12, 2018, 4:30am UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/5 "2018-08-12T04:30:47Z")

</div>

Here’s an idea;

Save the value of the of the noise you start with, and interpolate towards that near the end of the circle.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 12, 2018, 7:25am UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/6 "2018-08-12T07:25:35Z")

</div>

I think you get a symmetry because of the way you are using the noise function.

If you look at your line:  
`terrain[x][y] = map(noise(cos(x * angle) * 3, sin(y * angle) * 3 ), 0, 1, 0, maximum)`

the function `cos(x * angle) * 3` look like this:

 ![CosCurve](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/315a246d82219ffdddab46b79691c91800400d6e.png)  
I changed the amplitude but the idea is the same: you have a symmetry around the 500 value.

This means that for all y,  
`terrain[x][y] = terrain[1000-x][y]`

Now if you consider the following set of points  
x1 = r \* cos(x \* angle)  
y1 = r \* sin(x \* angle)

x2 = r \* cos((1000 -x) \* angle)  
y2 = r \* sin((1000 -x) \* angle)

(x1, y1) is a point of a circle  
(x2, y2) is a point on the same circle but opposed to it

And both of those points have the same value -\> thus the symmetry you encounter.

Hope it’s clear 🤪

EDIT:  
To solve your problem you would need to generate a 3D noise.  
This way you can use the x-y axis to get your circles loop on themself and use the remaining z axis to generate different circles.

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 12, 2018, 4:43pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/7 "2018-08-12T16:43:50Z")

</div>

@kfrajer : Yes, I do want to avoid the symmetry while having the edges connected.

@tony : Thanks, I’ve tried interpolation before but found that it doesn’t look good with noise, you kind of see there’s something off with the end of the circle’s motion. I also feel it’s more a twisted workaround than a real solution to the issue.

@jb4x : I realize my question was not really clear. I **do** know why I have a symmetrical amplitude because I “noised” the sinus and cosinus of every point _on purpose_. The “1000” you’re mentionning is nothing but the number of columns (`n_cols`). It is the only way I found to connect the first and last vertices.

Regarding your suggestion, and if I’m not mistaken, generating a 3D noise would mean that I’m also noising the circles (x ans y coordinates) which I do not want. Only the height should be noised.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 12, 2018, 4:55pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/8 "2018-08-12T16:55:21Z")

</div>

How about generating a 2D plane with perlin noise (like a terrain map) and then just use the values at the points of your circles?

You would have your seamless circle but no symmetry.

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 12, 2018, 5:01pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/9 "2018-08-12T17:01:45Z")

</div>

This is what I did in the first place (the first noise variable in the sketch above, line 26): the z-value is created from noising the x and y cooridnates. But on a 2D plane, the first and last vertices are not matching at all.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 12, 2018, 6:30pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/10 "2018-08-12T18:30:41Z")

</div>

The following code should work.

```auto
void setup() {
  size(500, 500, P3D);
  background(20);

  float n_points = 200.0;
  float angleStep = 2 * PI / n_points;

  translate(width /2.0, height / 2.0, 0);
  rotateX(radians(50));

  noFill();
  strokeWeight(1);
  stroke(255);

  for (int j = 150; j < 200; j+=10) {
    beginShape(LINES);
    for (int i = 0; i < 1000; i++) {
      float curX = j * cos(i * angleStep);
      float curY = j * sin(i * angleStep);
      vertex(curX, curY, 40 * noise(curX, curY));

      curX = j * cos((i + 1) * angleStep);
      curY = j * sin((i + 1) * angleStep);
      vertex(curX, curY, 40 * noise(curX, curY));
    }
    endShape(CLOSE);
  }
}

```

Otherwise I noticed a typo in yours on line 39:  
`lines.vertex(lx1, ly1, terrain[x-1][y])`

It should be:  
`lines.vertex(lx1, ly1, terrain[x-1][y-1])`

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 12, 2018, 8:08pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/11 "2018-08-12T20:08:52Z")

</div>

You realize your sketch example gives symmetrical noise, right ?

> [@jb4x](#):
>
> It should be:  
> `lines.vertex(lx1, ly1, terrain[x-1][y-1])`

Nope, this would draw diagonals (lines between 2 circles, y and y-1).

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 12, 2018, 8:55pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/12 "2018-08-12T20:55:47Z")

</div>

> [@solub](#):
>
> Nope, this would draw diagonals (lines between 2 circles, y and y-1).

Ho yep, I mixed it up in my head… Forgot that your y was your row value.

> [@solub](#):
>
> You realize your sketch example gives symmetrical noise, right ?

Actually no 😅 I used another transformation to try out and I was not paying attention enough.

I figured out why there is that symmetry though…  
It comes from the noise function. Turns out that the function is symmetric so `noise(-x) = noise(x)`  
Try to give it an offset of your biggest radius and it should work.

I added an offset and now I can’t see any symmetry.  
I’ll let you double check to be sure 😁

```auto
void setup() {
  size(1000, 1000, P3D);
  background(20);

  float n_points = 200.0;
  float angleStep = 2 * PI / n_points;

  translate(width /2.0 - 200, height / 2.0 - 200, 0);
  rotateX(radians(50));

  noFill();
  strokeWeight(1);
  stroke(255);

  int j=300;
  //for (int j = 150; j < 200; j+=10) {
  beginShape(LINES);
  for (int i = 0; i < 1000; i++) {
    float curX = j * cos(i * angleStep) + 200;
    float curY = j * sin(i * angleStep) + 200;
    vertex(curX, curY, 40 * noise(curX, curY));

    curX = j * cos((i + 1) * angleStep) + 200;
    curY = j * sin((i + 1) * angleStep) + 200;
    vertex(curX, curY, 40 * noise(curX, curY));
    //}
    endShape(CLOSE);
  }
}

```

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [August 12, 2018, 10:55pm UTC](https://discourse.processing.org/t/applying-noise-to-a-circular-grid/2564/13 "2018-08-12T22:55:45Z")

</div>

Oh now I see where my mistake was: the x and y coordinates in the noise variable were incorrect. While your answer is not quite right it did helped me spotting that oversight. Thank you.

- You added an abitrary and unnecesseraly high offset to the wrong variables (the lines coordinates). That offset value should be put inside the noise function (offset = 1 is enough)
- The lines coordinates inside the noise function should also be multiplied by a very small factor (.003 for instance)

**Working example sketch**

```auto
add_library('peasycam')

n_points, radius, step = 200, 350, 2
factor, offset = .003, 1

def setup():
    global lines
    size(1800, 800, P3D)
    background(0)
    smooth(8)
    
    cam = PeasyCam(this, 1400)
    n_cols, n_rows = 1000, 80
    angle = radians(360) / n_cols

    lines = createShape()
    for y in range(n_rows):
        lines.beginShape(LINES) 
        lines.strokeWeight(1)
        lines.noFill()
        lines.stroke(255)
        for x in range(n_cols+1): 
            lx1 = cos(angle * (x-1) ) * (radius + (y*step)) 
            ly1 = sin(angle * (x-1) ) * (radius + (y*step)) 
            lines.vertex(lx1, ly1, noise(lx1 * factor + offset, ly1 * factor + offset) * 400)
            
            lx2 = cos(angle * x ) * (radius + (y*step)) 
            ly2 = sin(angle * x ) * (radius + (y*step)) 
            lines.vertex(lx2, ly2, noise(lx2 * factor + offset, ly2 * factor + offset) * 400)
        
        lines.endShape(CLOSE)         
       
def draw():
    background(0)
    shape(lines)

```

Thank you for your time and commitment.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8e8577e9187c4b3a0ff3e831fc0f0223b7e4a878.jpg)  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/893a6d5120a58c88aeb6f4b6e73fa62e9a66aa0c.jpg)