How to change vertical stripes to angled stripes?

Processing Coding Questions
1

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.

2

are you using rects? Or line()?

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

I’d use:

https://www.processing.org/reference/quad_.html

3

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-