# 2D perlin with smooth transition

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.

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

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

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

show 18 â€¦ 20 FPS

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.

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.

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

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.

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