2D Perlin Flow Field

vector angle and magnitude both mapped to a different noise value

let c1, c2, c3, c4, c5; // colors
let scale = 25;
let cols, rows;
let inc = 0.1;
let zoff = 0;

function setup() {
  createCanvas(960, 600);
  
  cols = floor(width/scale);
  rows = floor(height/scale);
  
  // # Color Palette
  c1 = color(255, 205, 178);
  c2 = color(255, 180, 162);
  c3 = color(229, 152, 155);
  c4 = color(181, 131, 141);
  c5 = color(109, 104, 117);
}

function draw() {
  background(c5);
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      
      // Angle Noise
      let angleNoise = noise(xoff, yoff, zoff);
      let angle = angleNoise * TWO_PI * 2;
      let v = p5.Vector.fromAngle(angle);
      
      // Magnitude Noise
      let magNoise = noise(xoff, yoff, zoff + 500);
      let magnitude = magNoise * scale * 2;
      
      xoff+=inc;  
      
      // Draw Arrow
      let c = lerpColorFive(c5,c4,c3,c2,c1,magNoise);
      strokeWeight(1);
      stroke(c);
      fill(c);
      push();
      translate(x * scale + scale/2, y * scale + scale/2); // translate to center of arrow
      rotate(v.heading()); // rotate arrow
      line(0,0,magnitude/2,0); // draw arrow body
      // draw arrow head
      triangle(
        magnitude/2.5,magnitude/20, // arrow head right
        magnitude/2.5,-magnitude/20, // arrow head left
        magnitude/2,0 // arrow head front
      );
      pop(); 
    }
    yoff+=inc;
    zoff += 0.0002;
  }
}

function lerpColorFive(c1, c2, c3, c4, c5, i)
{
  if(i <= 0.25)       {return lerpColor(c1,c2, map(i,0,0.25,0,1));}
  else if(i <= 0.5)   {return lerpColor(c2,c3, map(i,0.25,0.5,0,1));}
  else if(i <= 0.75)  {return lerpColor(c3,c4, map(i,0.5,0.75,0,1));}
  else                {return lerpColor(c4,c5, map(i,0.75,1,0,1));}
}