Responsive problem with noise

[vjjv]

Hello! Im having a problem with this noise class for a project. Is not fully responsive and the values are changing when i change the size of the screen. I tried a lot of things and i couldnt get it work.

let r
let tokenData2 = { hash: "0x3125abeee3a758a7a393dbfcbbf0ae3db0fe2a45f61dfaee6386121270b6e529", tokenId: "15000000" }
let cnv
let DIM = Math.min(window.innerWidth, window.innerHeight);
let wFix = 1080;
let hFix = 1920;
let drawScale;

function setup() {

  r = new Random(tokenData2)
  
  let [w, h] = computeCanvasSize(DIM, DIM, 9/16);
  w = Math.round(w);
  h = Math.round(h);
  cnv = createCanvas(w, h);
  
  drawScale = Math.min(w / wFix, h / hFix);
  perlin = new Perlin(r)
  
  background(230)
  strokeWeight(drawScale*1)
  noFill()
  
for(let i =0;i<10;i++){
   beginShape();
  
    let pointI = 0;
  
    let x=r.random_num(0,w)
    let y=r.random_num(0,h)
    
    while(pointI++ < 200) {
      
    // dont happen if i put this here since im setting the value again with a new number

    // let x=r.random_num(0,w)
    // let y=r.random_num(0,h)
    
    
      strokeWeight(drawScale*2)
      stroke(0)

      let xS = generateNoise(i*10,x,y)*drawScale*100
      let yS = generateNoise(i*100,x,y)*drawScale*100
    
      curveVertex(x,y);
      x+=xS
      y+=yS
      
    }
    endShape();
}
  
}

function generateNoise(a,b,c){
  
  let n = perlin.noise(a,b,c)
  
  return n
}



// NOISE CLASS

class Perlin {
   constructor(R) {
    this.R = R;
    this.PERLIN_YWRAPB = 4;
    this.PERLIN_YWRAP = 1 << this.PERLIN_YWRAPB;
    this.PERLIN_ZWRAPB = 8;
    this.PERLIN_ZWRAP = 1 << this.PERLIN_ZWRAPB;
    this.PERLIN_SIZE = 4095;

    this.perlin_octaves = 4;
    this.perlin_amp_falloff = 0.5;
    this.perlin = null;
  }

  scaled_cosine(i) {
    return 0.5 * (1.0 - Math.cos(i * Math.PI));
  }

  noise(x, y = 0, z = 0) {
    if (this.perlin == null) {
      this.perlin = new Array(this.PERLIN_SIZE + 1);
      for (let i = 0; i < this.PERLIN_SIZE + 1; i++) {
        this.perlin[i] = this.R.random_dec();
      }
    }

    if (x < 0) x = -x;
    if (y < 0) y = -y;
    if (z < 0) z = -z;

    let xi = Math.floor(x),
      yi = Math.floor(y),
      zi = Math.floor(z);
    let xf = x - xi;
    let yf = y - yi;
    let zf = z - zi;
    let rxf, ryf;

    let r = 0;
    let ampl = 0.5

    let n1, n2, n3;

    for (let o = 0; o < this.perlin_octaves; o++) {
      let of = xi + (yi << this.PERLIN_YWRAPB) + (zi << this.PERLIN_ZWRAPB);

      rxf = this.scaled_cosine(xf);
      ryf = this.scaled_cosine(yf);

      n1 = this.perlin[of & this.PERLIN_SIZE];
      n1 += rxf * (this.perlin[(of + 1) & this.PERLIN_SIZE] - n1);
      n2 = this.perlin[(of + this.PERLIN_YWRAP) & this.PERLIN_SIZE];
      n2 +=
        rxf *
        (this.perlin[(of + this.PERLIN_YWRAP + 1) & this.PERLIN_SIZE] - n2);
      n1 += ryf * (n2 - n1);

      of += this.PERLIN_ZWRAP;
      n2 = this.perlin[of & this.PERLIN_SIZE];
      n2 += rxf * (this.perlin[(of + 1) & this.PERLIN_SIZE] - n2);
      n3 = this.perlin[(of + this.PERLIN_YWRAP) & this.PERLIN_SIZE];
      n3 +=
        rxf *
        (this.perlin[(of + this.PERLIN_YWRAP + 1) & this.PERLIN_SIZE] - n3);
      n2 += ryf * (n3 - n2);

      n1 += this.scaled_cosine(zf) * (n2 - n1);

      r += n1 * ampl;
      ampl *= this.perlin_amp_falloff;
      xi <<= 1;
      xf *= 2;
      yi <<= 1;
      yf *= 2;
      zi <<= 1;
      zf *= 2;

      if (xf >= 1.0) {
        xi++;
        xf--;
      }
      if (yf >= 1.0) {
        yi++;
        yf--;
      }
      if (zf >= 1.0) {
        zi++;
        zf--;
      }
    }
    return r;
  }
  
  noiseSeed(seed) {
    this.R = new Random(seed);
    this.perlin = new Array(this.PERLIN_SIZE + 1);
    for (let i = 0; i < this.PERLIN_SIZE + 1; i++) {
      this.perlin[i] = this.R.random_dec();
    }
  }

}


// 
//////////


function computeCanvasSize(
  windowWidth,
  windowHeight,
  aspectRatio,
  margin = 0.1
) {
  let w, h;

  if (windowHeight * aspectRatio <= windowWidth) {
    [w, h] = [windowHeight * aspectRatio, windowHeight];
  } else {
    [w, h] = [windowWidth, windowWidth / aspectRatio];
  }
  return [(1 - margin) * w, (1 - margin) * h];
}

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

class Random {
    constructor(o) {
        (this.tokenData = o), (this.useA = !1);
        let e = function (o) {
            let e = parseInt(o.substr(0, 8), 16),
                n = parseInt(o.substr(8, 8), 16),
                r = parseInt(o.substr(16, 8), 16),
                a = parseInt(o.substr(24, 8), 16);
            return function () {
                let o = ((((e |= 0) + (n |= 0)) | 0) + (a |= 0)) | 0;
                return (a = (a + 1) | 0), (e = n ^ (n >>> 9)), (n = ((r |= 0) + (r << 3)) | 0), (r = ((r = (r << 21) | (r >>> 11)) + o) | 0), (o >>> 0) / 4294967296;
            };
        };
        (this.prngA = new e(this.tokenData.hash.substr(2, 32))), (this.prngB = new e(this.tokenData.hash.substr(34, 32)));
        for (let o = 0; o < 1e6; o += 2) this.prngA(), this.prngB();
    }
    random_dec() {
        return (this.useA = !this.useA), this.useA ? this.prngA() : this.prngB();
    }
    random_num(o, e) {
        return o + (e - o) * this.random_dec();
    }
    random_int(o, e) {
        return Math.floor(this.random_num(o, e));
    }
    random_int2(o, e) {
        return Math.floor(this.random_num(o, e + 1));
    }
    random_choice(o) {
        return o[this.random_int2(0, o.length - 1)];
    }
}

p5.js Web Editor

I know that is something with adding the values that im using in the noise each time,

  x+=xS
   y+=yS

but i dont know how i cant fix it. Any ideas?