How do I animate this ring without the values going crazy after 20 frames?

Processing Coding Questions
1

The first 20 frames are ok, but after that the range of the noiseX and noiseY values gets to big. Yet I need these values being multiplied by pos so the animation is concentric and does not move into one direction.

Any Idea on how to solve this?
ChatGPT was clueless, as always.

Thank you.

int count = 90000;
float level =0.;
float radius = 200.;
float noiseScale = 200;
float noiseStrength = 150;

float noiseZ = 0.;
    float angle = (TAU / count);
float[] x = new float[count];
float[] y = new float[count];

float[] noiseX = new float[count];
float[] noiseY = new float[count];

float xP, yP;
PVector pos, origin;

void setup()
{
  size(800, 800);
  background(#f6f6f4);
  pixelDensity(displayDensity());
  smooth(100);
  
  stroke(0, 30);
  strokeWeight(3.4);
  
  origin = new PVector(0, 0);
  
  for (int i = 0; i < count; i++)
  {
    float randomRadius = sqrt(random(0.20, 1.))* radius;

    x[i] = cos(angle*i) * randomRadius;
    y[i] = sin(angle*i) * randomRadius;
    

    pos = new PVector(x[i], y[i]);
    float dist = pos.dist(origin);
    pos.normalize();
    
      if (dist > level){
    
    x[i] += pos.x * (random(random(-1.3), random(1.0)) * (sq((level-dist)/35)));
    y[i] += pos.y * (random(random(-1.3), random(1.0)) * (sq((level-dist)/35)));
     }
 }

}




void draw()
{


background(#f6f6f4);
translate (width/2, height/2);


  for (int i = 0; i < count; i++)
  {
     
xP = x[i];
yP = y[i];
 
    pos = new PVector(xP, yP);
    pos.normalize();
      
 float n = noise((width/2 + xP / noiseScale) - noiseX[i] , (height/2 + yP / noiseScale ) - noiseY[i]) * noiseStrength ; // BESTES ERGEBNIS. ALLERDINGS WIRD DAS WILDER JE LÄNGER ES LÄUFT
    xP += pos.x * n;
    yP += pos.y * n;
  
    point(xP, yP);
    
     noiseX[i] += 0.06 * pos.x; 
     noiseY[i] += 0.06 * pos.y;      

  }
}
2

noiseX and noiseY are on a steadily growing ring that you use to sample the noise() function. As the ring grows, neighboring points are going to gradually move away from each other and become less correlated in value. That is, over time, your noise() function will steadily turn to pure noise losing all of its smoothness.

As an alternative, you could use 3D noise and move your samples through the z direction over time.

3

Hey scudly, thank you very much for your response. I tried that, but didn’t manage to get the same result. And I wasnt able to solve the concentric circle problem with the Z direction.

4

I think the issue is that noiseX[i] and noiseY[i] are accumulating over time, causing the animation (concentricity) to diverge.

Is this closer to what you expect?

import processing.javafx.*;

int count = 90000;
float level =0.;
float radius = 200.;
float noiseScale = 200;
float noiseStrength = 250;

float noiseZ = 0.;
float angle = (TAU / count);
float[] x = new float[count];
float[] y = new float[count];

float[] noiseX = new float[count];
float[] noiseY = new float[count];

float xP, yP;
PVector pos, origin;

void setup()
{
  size(800, 800, FX2D);
  background(#f6f6f4);
  pixelDensity(displayDensity());
  smooth();

  stroke(0, 30);
  strokeWeight(3.4);

  origin = new PVector(0, 0);

  for (int i = 0; i < count; i++)
  {
    float randomRadius = sqrt(random(0.20, 1.))* radius;

    x[i] = cos(angle*i) * randomRadius;
    y[i] = sin(angle*i) * randomRadius;


    pos = new PVector(x[i], y[i]);
    float dist = pos.dist(origin);
    pos.normalize();

    if (dist > level) {

      x[i] += pos.x * (random(random(-1.3), random(1.0)) * (sq((level-dist)/35)));
      y[i] += pos.y * (random(random(-1.3), random(1.0)) * (sq((level-dist)/35)));
    }
  }
}




void draw()
{


  background(#f6f6f4);
  translate (width/2, height/2);
  
  float t = millis() / 1000f;

  for (int i = 0; i < count; i++)
  {

    xP = x[i];
    yP = y[i];

    pos = new PVector(xP, yP);
    pos.normalize();

    float n = noise((width/2 + xP / noiseScale) + t, (height/2 + yP / noiseScale ) + t) * noiseStrength ; // BESTES ERGEBNIS. ALLERDINGS WIRD DAS WILDER JE LÄNGER ES LÄUFT
    xP += pos.x * n;
    yP += pos.y * n;

    point(xP, yP);

    noiseX[i] += 0.06 * pos.x;
    noiseY[i] += 0.06 * pos.y;
  }
}
5

Hey micycle, thank you for your response. Unfortunately, this is not solving the issue as the movement loses its concentricity and becomes directional. The waves should move from center to the border.