# How to change vertical stripes to angled stripes?

**URL:** <https://discourse.processing.org/t/how-to-change-vertical-stripes-to-angled-stripes/17690>\
**Category:** Coding Questions\
**Created:** [February 10, 2020, 4:28pm UTC](https://discourse.processing.org/t/how-to-change-vertical-stripes-to-angled-stripes/17690 "2020-02-10T16:28:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ottenm](https://avatars.discourse-cdn.com/v4/letter/o/f08c70/32.png) [@ottenm](https://discourse.processing.org/u/ottenm)\
**Post date:** [February 10, 2020, 4:28pm UTC](https://discourse.processing.org/t/how-to-change-vertical-stripes-to-angled-stripes/17690/1 "2020-02-10T16:28:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 10, 2020, 4:31pm UTC](https://discourse.processing.org/t/how-to-change-vertical-stripes-to-angled-stripes/17690/2 "2020-02-10T16:31:01Z")

</div>

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](https://www.processing.org/reference/quad_.html)

---

<div class="post-metadata">

**Author:** ![ottenm](https://avatars.discourse-cdn.com/v4/letter/o/f08c70/32.png) [@ottenm](https://discourse.processing.org/u/ottenm)\
**Post date:** [February 10, 2020, 4:52pm UTC](https://discourse.processing.org/t/how-to-change-vertical-stripes-to-angled-stripes/17690/3 "2020-02-10T16:52:17Z")

</div>

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-