How can I remove a pattern in a perlin slope field?

Dinoswarleafs

Hey! I learned about slope fields a while back in Calculus and wanted to make one of those in Processing, but instead have the slopes randomly change according to perlin noise. This way it has a cool field effect where the slopes around one are similar but not exactly the same and smoothy transition to other spots. I got most of it working with this :

float[][] vectorSlopes;
float xOff, yOff, slope, speed, speedi;
float xOffi, yOffi;
float wGap = 30;
float hGap = 30;
float space = 5;

void setup() {
  size(1200, 800);
  speed = .1;
  speedi = .01;
  vectorSlopes = new float[(int)(width/wGap)][(int)(height/hGap)];
  rectMode(CENTER);
  xOff = random(10000);
  yOff = random(10000);
  xOffi = xOff;
  yOffi = yOff;
}

void draw() {
  xOffi += speedi;
  xOff = xOffi;
  background(110);
  yOffi += speedi;  
  for (int x = 0; x < vectorSlopes.length; x++) {
    xOff += speed;
    yOff = yOffi;
    for (int y = 0; y < vectorSlopes[x].length; y++) {      
      yOff += speed;        
      float xPos = x * wGap;
      float yPos = y * hGap;
      float lwidth = (wGap - space)/2;
      float lheight = (hGap - space)/2;  
      slope = map(noise(xOff, yOff), 0, 1, -lheight / 2, lheight / 2);
      line(xPos - lwidth, yPos + (slope * lwidth), xPos + lwidth, yPos - (slope * lwidth));
    }
  }
}

There's an issue where the slopes from the botton right becme the slopes of the top left, probably as a consequence of my x and y off initial variables that I used. It kinda ruins the randomness of it, and if you zoom out by setting the wGap and hGap to like 5 with a space of 1 or 2 it becomes really obvious and annoying to look at. Any help is appreciated. Thanks!

TfGuy44

I can't determine what your issue is. Can you please post an image of your sketch that highlights it (possibly by circling it?)?

Dinoswarleafs

I can try :z

1 - https://i.imgur.com/4UkwlFs.png 2 - https://i.imgur.com/f5wP4TL.png

It's hard to see in static pictures. Here's the animation of it : https://www.openprocessing.org/sketch/507872

Just find a spot with similar slope fields, and watch how it kinda travels up and left

koogs

Noise isn't random. If you call noise with the same X and y it'll always return the same value.

And you are. You are slowly changing xoffi and yoffi but are then drawing a field that contains a lot of calls to noise some of which will be the same values as the last frame's calls to noise.

Say you are printing all the numbers from 1 to 100. Then, next frame, you start at 11. The first 90 numbers are in both lists, just offset a bit.

You might be able to stop this by using different speed values. As it is your X speed is a multiple of the y speed. Try, say .13 and .017

(On phone, haven't run the code, the above could be nonsense)

koogs

You might be able to stop this by using different speed values. As it is your X speed is a multiple of the y speed. Try, say .13 and .017

actually, this IS nonsense - you're using the 2d version of noise so the above doesn't matter

Dinoswarleafs

Wait so the use of prime numbers is non sense or the rest of it is? I tried using different primes as the speeds but it didn't seem to change anything : https://www.openprocessing.org/sketch/507872 I for sure understand it's a result of incrementing with the same speed, so I'm kinda confused how it translates similar here O.O, are my increments too small?

koogs

The main problem is that you are drawing a grid. Next frame you are drawing essentially the same grid with an x and y offset. This is why it appears to move.

This might be more noticeable because the offset, and therefore the direction of the movement, is always the same. So try changing the offset differently in every frame. I don't know how this will look. Perhaps make it circular, maybe a random walk. You could even use noise...