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

Processing Coding Questions
1

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

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);
}
2

Hi,

Welcome to the forum! :wink:

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?

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

1 Like
3

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


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

4

For this you need to change the coordinate system you are working in. By default you are in a two dimensional 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 :

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? :yum:

2 Likes
5

Hello,

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

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
image502×527 3.18 KB

:)

2 Likes
6

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

circlenoise

7

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

2 Likes