上段と下段でグラデーションの進み方が違うの分かります？

亀の歩み#14
亀の歩みと称して、ジェネラティブアートの練習を投稿しているのですが、今回は、randomとnoiseを使いたい！そして、視覚的に理解できるようにしたい！というモチベーションで作成した作品です。

細かい説明は省きますが、ざっくりと各関数を説明すると、
randomは一様分布で、noiseは自然におけるランダム性を再現することを目的としたもの(パーリンノイズ)です。

....と言葉で説明しても感覚的に掴みにくいので、なんとか可視化できないかと、以下のようなことを行いました。
1. 上下2段に分ける
2. それぞれで初めの色と終わりの色を同じにして、それぞれlerpColorでグラデーションさせる
3. 2. の時、lerpColorの3つ目のパラメータを上段ではrandom、下段ではnoiseを使って色の移り方に変化を与える

その結果がこちら

randomを用いた上段が滑らかにグラデーションしているように見えるのに対し、noiseを用いた下段はガクガクと色が変化しているように見えます。
実行前の予想では、noiseの方が「制限のあるランダム性(?)」であることから、滑らかになると思っていたので、少し驚きです。

ソースコード

color startColor = color(67, 84, 149);
color endColor = color(0, 163, 126);

float rectStep;
float rectWidth = 80;
float randomStep = 0;
float noiseStep = 0;

void setup() {
 size(1440, 720);

 rectStep = width/rectWidth;

 // random
 for (int i=0; i<rectStep; i++) {
   float px = i * rectWidth;
   float py = 0;
   float randompx = px+random(-rectWidth, rectWidth);
   color randomColor = lerpColor(startColor, endColor, randompx/width);
   
   noStroke();
   fill(randomColor);
   rect(px, py, rectWidth, height/2); 
 }
 
 // noise
 for (int i=0; i<rectStep; i++) {
   float px = i * rectWidth;
   float py = height/2;
   float noisepx = px+noise(-rectWidth, rectWidth);
   color noiseColor = lerpColor(startColor, endColor, noisepx/width);
   
   noStroke();
   fill(noiseColor);
   rect(px, py, rectWidth, height/2); 
 }
}