# Individual stroke colours for each side of a rect

**URL:** <https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937>\
**Category:** Coding Questions\
**Created:** [January 29, 2019, 6:12pm UTC](https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937 "2019-01-29T18:12:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![KeirMeDear](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Post date:** [January 29, 2019, 6:12pm UTC](https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937/1 "2019-01-29T18:12:00Z")

</div>

I was wondering if there was function that allows you to assign a unique colour value to each side of a rect - So for example the top stroke of a rect could be green and the bottom stroke of the rect could be red - I don’t know if this already exists but I looked through the references on the processing website but couldn’t seem to find anything.

Many thanks,  
K

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 29, 2019, 6:12pm UTC](https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937/2 "2019-01-29T18:12:54Z")

</div>

I don’t think this exists out of the box, but you could create your own function that did this using the `line()` function.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 4, 2019, 9:28pm UTC](https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937/3 "2019-02-04T21:28:13Z")

</div>

> [@KeirMeDear](#):
>
> a unique colour value to each side of a rect

I wasn’t sure from this description if you wanted flat color lines, or vertex shading (gradients between color points).

Here is an example of each, using PShape / beginShape.

```auto
/**
 * ColorRects
 * 2018-02-04 - Jeremy Douglass - Processing 3.4
 * Draw per-line coloring on rectangles using a list of colors.
 * Rendered using shape (PShape) in LINES mode. Flat and gradient lines.
 * discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937
 */

int[] colors;

void setup() {
  size(200, 200, P2D);
  colors = new int[] {
    color(255,0,0),
    color(0,255,0),
    color(0,0,255),
    color(255)
  };
}
void draw() {
  background(128);
  colorRect(10,10,80,80,colors);
  colorRect2(110,110,80,80,colors);
}

void colorRect(float x, float y, float w, float h, int[] colors) {
  beginShape(LINES);
  stroke(colors[0]);
  vertex(x, y);
  vertex(x+w, y);
  stroke(colors[1]);
  vertex(x+w, y);
  vertex(x+w, y+h);
  stroke(colors[2]);
  vertex(x+w, y+h);
  vertex(x, y+h);
  stroke(colors[3]);
  vertex(x, y+h);
  vertex(x, y);
  endShape();
}

void colorRect2(float x, float y, float w, float h, int[] colors) {
  beginShape(LINES);
  stroke(colors[0]);
  vertex(x, y);
  stroke(colors[1]);
  vertex(x+w, y);
  vertex(x+w, y);
  stroke(colors[2]);
  vertex(x+w, y+h);
  vertex(x+w, y+h);
  stroke(colors[3]);
  vertex(x, y+h);
  vertex(x, y+h);
  stroke(colors[0]);
  vertex(x, y);
  endShape();
}

```

![ColorRects--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/71ced475f10426aa48528e166df67846f3f018d8.png)

Note that you could probably also do this using a PShader.

---

<div class="post-metadata">

**Author:** ![KeirMeDear](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Post date:** [February 15, 2019, 6:12pm UTC](https://discourse.processing.org/t/individual-stroke-colours-for-each-side-of-a-rect/7937/4 "2019-02-15T18:12:18Z")

</div>

This is super helpful! Thank you!