# Implement the noise function (with midpoint displacement) to create noisy circle

**URL:** <https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320>\
**Category:** Coding Questions\
**Created:** [April 13, 2021, 11:01am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320 "2021-04-13T11:01:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lolita](https://avatars.discourse-cdn.com/v4/letter/l/bbce88/32.png) [@Lolita](https://discourse.processing.org/u/Lolita)\
**Post date:** [April 13, 2021, 11:01am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/1 "2021-04-13T11:01:45Z")

</div>

Hi, here is code to create noise circle using begin and end shape function, if you could help to resolve this question and implement the noise function **(with midpoint displacement)** to create this circle, and we should not use begin and and end shape

```auto
float point = 50;
float rad = 200;
float a , b;
float NoiseValue, NoiseIntensity, NoiseCapacity;
float Time =10;

void setup() {
size(700, 700);
}

void draw() {
background(255);
translate(width/2, height/2);
strokeWeight(3);
NoiseIntensity = map(mouseX, 10, width, 0, 10);
NoiseCapacity = map(mouseY, 10, height, 0.0, 1);

beginShape();
for (float i=0.0; i<=TWO_PI; i+=TWO_PI/point) {
NoiseValue = map(noise( cos(i)*NoiseIntensity+1, sin(i)*NoiseIntensity+1, Time ), 0.0, 1.0, NoiseCapacity, 1);

a = cos(-i)*rad *NoiseValue;
b = sin(-i)*rad *NoiseValue;
    vertex(a, b);
  }
endShape(CLOSE);
}

```

---

<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:** [April 14, 2021, 10:44am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/2 "2021-04-14T10:44:56Z")

</div>

Hi,

Welcome to the forum! 😉

> [@Lolita](#):
>
> if you could help to resolve this question

Which question are you talking about? Your code is working fine.

Also what do you mean by midpoint displacement, could you give us a reference image or something explaining what you are trying to do?

> [@Lolita](#):
>
> and we should not use begin and and end shape

Is it part of a homework task you need to do?

---

<div class="post-metadata">

**Author:** ![Lolita](https://avatars.discourse-cdn.com/v4/letter/l/bbce88/32.png) [@Lolita](https://discourse.processing.org/u/Lolita)\
**Post date:** [April 14, 2021, 11:20am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/3 "2021-04-14T11:20:11Z")

</div>

Thanks Josephh for your replay ,  
Yes my code is working, but again, I need to create circle with noise by [Implementing Midpoint Displacement Algorithm]

here is the source code to create line with noise

```auto

float h[];
float alpha;
float beta;
int numPoints;

void setup() {
  fullScreen();
  stroke(0);
  background(255);
  
  // power of 2 + 1
  numPoints = 1024 + 1;
  alpha = 0.5f;
  beta = 0.5f;
  h = new float[numPoints];
  
  h[0] = random(-1.0,1.0) * beta;
  h[numPoints-1] = random(-1.0,1.0) * beta;
  for(int stepSize = (numPoints - 1); stepSize > 0; stepSize /= 2) {
    for(int step = stepSize / 2; step < numPoints; step += stepSize) {
      h[step] = 0.5 * (h[step - stepSize / 2] + h[step + stepSize/2]) + beta * random(-1.0,1.0);  
    }
    beta *= alpha;
  }
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(5);
 
  float x = 0;
  float y = h[0] * height/2.0 + height/2.0;
  for(int i = 1; i < numPoints; i++) {
    float nx = i * ((float) width / (float) numPoints); 
    float ny = h[i] * height/2.0 + height/2.0;
    line(x,y,nx,ny);
    x = nx; y = ny;
  }
  if(keyPressed) {
    save("midpoint.png");
  }
}

```

so all i need to do is to create convert this line into circle 😝

---

<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:** [April 14, 2021, 11:34am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/4 "2021-04-14T11:34:12Z")

</div>

> [@Lolita](#):
>
> so all i need to do is to create convert this line into circle

For this you need to change the coordinate system you are working in. By default you are in a two dimensional [Cartesian coordinate system](https://en.wikipedia.org/wiki/Cartesian_coordinate_system) which specify coordinates with a pair of numbers (x and y).

If you want to convert it into a circle, you need to use Polar coordinates :

> **[Polar coordinate system](https://en.wikipedia.org/wiki/Polar_coordinate_system)**
>
> In mathematics, the polar coordinate system is a two-dimensional coordinate system in which each point on a plane is determined by a distance from a reference point and an angle from a reference direction. The reference point (analogous to the origin of a Cartesian coordinate system) is called the pole, and the ray from the pole in the reference direction is the polar axis. The distance from the pole is called the radial coordinate, radial distance or simply radius, and the angle is called the an...

Each point is defined by it’s distance to the origin and an angle.

This is the same as your previous code but you need to warp your noise line onto a circle.

The same way you display your line from x = 0 to x = width by dividing the width by the number of points, what do you need to divide in order to display the points around a center point?

How do you get the location of a point on a circle relative to its center and radius? 😋

---

<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:** [April 14, 2021, 11:56am UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/5 "2021-04-14T11:56:10Z")

</div>

Hello,

An example (modified your code) of using integers in the for loop to draw the circle:

```auto
float point = 50;
float rad = 150;
float a, b;
float NoiseValue;

void setup() 
  {
  size(500, 500);
  //noLoop();
  }

void draw() 
  {
  background(255);
  translate(width/2, height/2);

  stroke(255, 0, 0);
  strokeWeight(5);
  
  //for (float i=0.0; i<=TWO_PI; i+=TWO_PI/point) 
  for (int i=0; i< point; i++)   
    {  
    float angle = i*TAU/point;  
    
    NoiseValue = 1;

    a = cos(-angle)*rad *NoiseValue;
    b = sin(-angle)*rad *NoiseValue;
    
    point(a, b);
    }  
  }

```

Give it some thought…

You can then modulate the radius or map (noise?) to points along the curve.

I doubled the number of points and randomly modulated the radius for every other point here:

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

`:)`

---

<div class="post-metadata">

**Author:** ![Lolita](https://avatars.discourse-cdn.com/v4/letter/l/bbce88/32.png) [@Lolita](https://discourse.processing.org/u/Lolita)\
**Post date:** [April 14, 2021, 4:50pm UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/6 "2021-04-14T16:50:56Z")

</div>

But the polar coordinate system is not the as same as Midpoint Displacement Algorithm,  
to create this shape

![circlenoise](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/77170e3ec7ca9de93813dcb2255d7f4235ff56e4.jpeg)

---

<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:** [April 14, 2021, 6:27pm UTC](https://discourse.processing.org/t/implement-the-noise-function-with-midpoint-displacement-to-create-noisy-circle/29320/7 "2021-04-14T18:27:55Z")

</div>

I don’t know what you call midpoint displacement algorithm but the following result is obtained using a polar coordinate system varying r length at different angle:

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