# Gradient along a row of squares

**URL:** <https://discourse.processing.org/t/gradient-along-a-row-of-squares/25355>\
**Category:** Coding Questions\
**Created:** [November 11, 2020, 11:13pm UTC](https://discourse.processing.org/t/gradient-along-a-row-of-squares/25355 "2020-11-11T23:13:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pugsofwar](https://avatars.discourse-cdn.com/v4/letter/p/c77e96/32.png) [@Pugsofwar](https://discourse.processing.org/u/Pugsofwar)\
**Post date:** [November 11, 2020, 11:13pm UTC](https://discourse.processing.org/t/gradient-along-a-row-of-squares/25355/1 "2020-11-11T23:13:10Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/022dd145288b52c596fb44d9a41c01ddd55aa10c.jpeg)

I’m trying to create a row of squares and the gradient from white to black using a for loop but I am struggling with it

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 11, 2020, 11:28pm UTC](https://discourse.processing.org/t/gradient-along-a-row-of-squares/25355/2 "2020-11-11T23:28:53Z")

</div>

I see 13 squares, so you will want a loop that runs 13 times.

Each time the loop runs, you will need to work out what color the square that this iteration draws should be. On the 0th iteration, the square should be white. On the 12th iteration, the square should be black.

Hint: What is 255 / 13?

The squares will also need to move over as they are drawn. You could simply translate() by some amount each iteration, or you could increase the X position each time by having it be a multiple of the looping variable.

Hint: What is iterating\_variable \* square\_width?

---

<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:** [November 12, 2020, 9:24am UTC](https://discourse.processing.org/t/gradient-along-a-row-of-squares/25355/3 "2020-11-12T09:24:00Z")

</div>

you could look at lerpColor in the reference