2D perlin with smooth transition

p5.js Coding Questions
1

Simple project to understand Perlin noise better, I plan to have each cell have a certain grey-scale value with the help of perlin noise which I managed to attain in 2D. Now i would also like to add the z offset to the noise function so that a particlular cell will have some relation with the same cell of the next frame.

Right now, Every frame has no relationship with the frame before it and after it.Only the cells with each frame have some relation.My goal is to have a smooth transition of the grey-scale values as the frames pass by.Any tips or advice?

function setup(){
    var width = 1920;
    var height = 1080;
    createCanvas(width, height);
    test = new Test(); //Just for testing purposes 
    
    pnoise = new PerlinNoise(); // creates the perlin noise
    grid = new Grid(); // creates the grid
    //noiseSeed(5);
    
    
}
function draw(){
    background(127);
    grid.display();
    
    pnoise.zoff+=0.01;
}

function Grid(){ // makes the grid 
    
    this.res = 5;
    this.col = floor(width/this.res); // finds the number of columns
    this.row = floor(height/this.res); // finds the number of rows 

    this.display = function(){ // to display the column
        
        for(i = 0;i<this.col;i++){
            pnoise.yoff +=pnoise.inc; // increment the y offset
            pnoise.xoff = 0; // reset the x offset
            for(j = 0;j<this.row;j++){
                this.no =  noise(pnoise.xoff,pnoise.yoff ,pnoise.zoff ); // stores the 3 dimensional noise in variable "this.no"
                fill(this.no * 255); // fill each square or cell with greyscale value corresponding to the noise
                pnoise.xoff +=pnoise.inc; // increment the x offset
                square(i*this.res,j*this.res,this.res); // display each square.
            }
            
        }
    }
}

function PerlinNoise() {  //why make a function??......i simply like the idea of using my own functions since i like the idea of that a lot.
    
    this.xoff = 100;  // initialising the base  offset variables
    this.yoff = 10000 //
    this.zoff = 0;    //
    this.inc = 0.02;  // the increment value
    this.n = null;
    
    this.noiseUpdate = function(){
        this.n = noise(this.xoff,this.yoff,this.zoff);  // stores 3 dimensional noise 
        }
}

function Test(){ // to simply be entertained in the beginning 
    this.r = 5;

    this.show = function(){
        circle(mouseX,mouseY,5);
    }
}

I know a couple of functions I created are of no use , but i simply like the idea of making my own modules.

2

here is an example of what i understand you want. btw building wrappers imo is not a good idea you are just complicating the problem for yourself.

2 Likes
3

on very old PC / win7 / firevox browser /
i see a jump every second ??

function keyPressed() {
  if ( key == 'f' ) print( frameRate() ); 
}

show 18 … 20 FPS

4

Thank you so much ,this is exactly what i was trying to achieve.But i noticed that the relation dies every 4 seconds and I cant understand why that is happening.

5

That is weird.
After letting it run for around 2 minutes, frame count has a value of around 160.
Wouldn’t that mean that 160 frames have passed since the beginning.

6

the repetition comes from the z variable fed to the noise function looping between 0-1 and the transition from 1 to 0 is the janky bit. you can expand the range or probably even do something like create a var step = 1 / animationLength then where z increases do z = (z + step) % 1 or some such. i’ll have a look a bit later. also once you add in your resolution grid you will get much better performance atm it’s sampling noise something like 65000+ times a frame

edit: or look up looping noise and implement that

edit2: here’s one that might address.the problems. i removed the z and added in a “proper” timing loop. change the grid resolution with up down buttons.

2 Likes
7

Your example is perfect.Thanks a lot.But i noticed that just like your noise function , i too am using 3 values within .You named it “dt” where as i call it z offset and the z offset also increments within the draw function. Shouldn’t I also get the smooth transitioning effect.

I went through your code and duplicated it and added comments as well stating what each piece of code does.I would greatly appreciate it if you could quickly glance over the comments and state if I have misunderstood what a piece of code does…Thanks a lot for helping.

Duplicated code with comments

8

in your original code (which didn’t work for me before so i didn’t use it) your steps through the perlin space are incorrect. notice in the version i posted i’m only really stepping along the z axis and always staying in the same region (x to width & y to height) through each slice on the z. also your comments seem ok.

1 Like
9

Thank you so much. I finally got it to run as expected by just changing one line of code.:grinning::grinning:

this.no =  noise(j/this.row,i/this.col ,pnoise.zoff );
1 Like