How to change vertical stripes to angled stripes?

I have a sketch that divides the screen into a bunch of vertical stripes, with each stripe drawn in a distinct color. I have the colors stored in an ArrayList and I use lerpColor() to gradually fade each stripe into the color of the next one:

float i = map(x, 0, width, 0, numberOfStripes - 1);
int thisColor = (int) i;
int nextColor = thisColor + 1;
float progressBetween = i – thisColor;
color = lerpColor(list.get(thisColor, nextColor, progressBetween);

I can do the same thing but with horizontal stripes just by changing the map():

float i = map(y, 0, height, 0, numberOfStripes - 1);

I’d like to do the same thing but with angled stripes (like diagonals, but not necessarily right at 45-degrees, could be more or less). Not quite sure how to think about this or set it up. Any suggestions greatly appreciated.

are you using rects? Or line()?

Is your question how to get diagonal / angled rects? (or is it about color?)

I’d use:

Not drawing lines, rects, or quads. Drawing one pixel at a time, and actually pulling the color pairs from an array of image files. But not related.

The challenge (for me) is dividing screen coordinates into angled divisions instead of simple vertical/horizontal ones. I need to map the x,y coordinates into a list index just like I’ve done with vertical/horizontal slices (where the whole portion is the list index, and the fractional portion contains the progress made across the current section).

Hope that helps-