如何将自定义JS噪声/偏移函数转为p5.js原生函数实现波浪线效果

我已经将Processing Java版本的示例草图移植到p5.js中，实现了效果美观的波浪线场。

目前我正在学习p5.js，希望进一步简化代码，通过noise()、lerp()等p5内置函数获取噪声值与偏移值。

我做了诸多尝试，希望借助p5自带的辅助函数实现periodicFunction()、offset()两个自定义函数，以及时间参数t的计算，但始终没有取得进展。

我反复观看了Daniel Shiffman制作的关于极坐标Perlin噪声循环的优质教学视频，但仍无法推进开发：该教程将噪声值绑定到圆形图形上，而我需要将相关逻辑适配到当前的网格波浪线草图中。

恳请各位开发者提供相关思路与帮助，非常感谢。

现有实现代码 #

核心逻辑代码 #

function setup()
{
  createCanvas(500,500);
}

let numFrames = 80;

function periodicFunction(p)
{
  return 1.0*sin(TWO_PI*p);
}

function offset( x, y)
{
  return 0.005*(x - 2 * y);
}

function draw()
{
  background(255);
  
  let t = 1.0*frameCount/numFrames;
  
  let m = 50;
  
  stroke(0);
  
  for(let i=0;i<m;i++)
  {
    for(let j=0;j<m;j++)
    {
      let x = map(i,0,m-1,0,width);
      let y = map(j,0,m-1,0,height);
      
      push();
      translate(x,y);
      
      let rot = periodicFunction(t-offset(x,y));
      rotate(rot);
      
      line(-5,0,5,0);
      pop();
    }
  }
}

依赖引入代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

内容的提问来源于stack exchange，提问作者Tornado_code