Linear vs cylindrical projection 2D raycasting

Hi, I'm trying to wrap my head around how cylindrical and perspective/linear projection works when doing raycasting in a 2d grid-based world.

My main issue is that I can't grasp why shooting rays out based on angle increments produces a sort of barrel/cylindrical distortion.
Please take a look at this image, (taken from this helpful person), I understand why the two methods (angle increment & perspective) shoot the rays out in the directions that they do, and why those rays are of the length that they are.

What I can't get into my head is this: regardless of whether I shoot rays out linearly (x = normalisedXAlongViewPlane, y = 1) or have the rays' directions dictated by the angle that they cover, i.e. x = cos(rayAngle), y = sin(rayAngle), sooner or later, some neighbouring rays will hit the same tile anyways, yet the perpendicular distance I get when I use the rayAngle approach gives the distortion.

For reference, here is an example of what I mean: https://editor.p5js.org/tomekp/sketches/6fKPIAHNx

For what it's worth I've had very helpful people trying to explain this to me a couple of times here and here , I just can't see why the ray angle approach gives the distorted effect when, in my understanding, the perpendicular distance should be the same regardless of the way I cast rays.

Any help would be very appreciated. Maybe this is more to do with a lack of understanding of trig? Though I've stared and toyed with the unit circle so much I practically have it seared into my brain.