OpenSimplexNoise vs Perlin Noise: why so much difference?

I am quite new to the field of generational algorithm so bear with me if this is a silly question. As I was looking into the noise features, I learned about various methods to get these values. The most common one, which is also present in P5js, is Perlin noise. One alternative is Simplex noise, but I could not find any ported solution for P5js, only for Processing.

While looking at the difference between these two methods, I noticed that the Simplex noise is capable of providing a wider distribution of values while keeping a smoother curve between them.

Let me share with you the code that I am using to plot the values:

let samplesPerFrame = 5;
let numFrames = 100;
let shutterAngle = 0.6;
let result = []
let SEED;
let t = 0;

function setup(){
  createCanvas(600,600); 
  SEED = random(10,1000);
}
 
let m = 1500;
let rad = 0.5;
let nperiod = 4.0;
 
function draw(){
  background(0);
  
  t=((frameCount - 1)/numFrames)%1
  noFill();
  stroke(255);
  strokeWeight(3);
  beginShape();
  for(let i=0;i<m;i++){
    let p = 1.0*i/m;
    let x = p*width;
    let y = map(noise(SEED + rad*cos(TWO_PI*(nperiod*p)),rad*sin(TWO_PI*(nperiod*p))),-1,1,0,height);
 
    vertex(x,y);
  }
  endShape();
}

This code was translated from Processing to P5js from this tutorial. As you can see from the attached image, the values look quite different.

Of course I am not expecting to get the same values, but at least a similar looking curve. Unfortunately though, Perlin seems more herratic in his movement, and this creates worse looking motion when applied to moving objects/loops. Is this expected? Has it something to do with the values in my example? Or is it because simplex noise lerps perlin values and increases smoothness in this way?

The point is that, if I try to get a smoother curve by reducing the radius, the variation between the max and min value flattens.
Does this difference make sense to you?

While trying various method to get noise values, I noticed a difference between Perlin noise and Simplex noise. I would like to learn more about the difference and how I can get simplex on P5js.

Leave a Comment