# How do i make this spiral line change gradient colors?

**URL:** <https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552>\
**Category:** Coding Questions\
**Created:** [March 15, 2021, 8:10pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552 "2021-03-15T20:10:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 15, 2021, 8:10pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/1 "2021-03-15T20:10:50Z")

</div>

can someone help me with this please?

 ![spiral](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6bbe8b638b4900d0cfe381a860ccf487389344d.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 15, 2021, 8:30pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/2 "2021-03-15T20:30:37Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

Tips:

- Use P3D mode
- Apply a stroke(col) in the loop before the vertex.
- Vary the stroke color col as desired.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/be35c8f8bc0cbba19f63f7ac2e465f5414212601.png)

References for color:

- [Color \ Processing.org](https://processing.org/tutorials/color/)
- [color() \ Language (API) \ Processing 3+](https://processing.org/reference/color_.html)
- [colorMode() \ Language (API) \ Processing 3+](https://processing.org/reference/colorMode_.html)

Your turn!

`:)`

Using HSB provides a nice gradient:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5e5d642be95dbe9d5c8e37a811e0700c79b199a7.png)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [March 15, 2021, 8:37pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/3 "2021-03-15T20:37:16Z")

</div>

To get the same result you also might want to change the color mode the HSV and lerp the hue value with the [lerp()](https://processing.org/reference/lerp_.html) function

Edit: oops, did not see your edit @glv

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [March 15, 2021, 9:23pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/5 "2021-03-15T21:23:43Z")

</div>

You are on the right track.

What you are currently doing is:

1. Erase the canvas
2. Set a stroke color
3. Change the hue (but not the actual stroke color)
4. Draw the full spiral
5. start again (because you are in the draw loop)

So first, don’t use the draw loop, you don’t need it since you want to draw your spiral only once. It is not because the function is called `draw()` that this is the only place where you can draw stuff on the canvas.

Instead, move everything in `setup()` that runs only once at the beginning of your program.

Then once you have done that, you need to change your order a tiny bit:

1. Set a stroke color
2. Draw one point of the spiral
3. increment the hue
4. loop to draw the next point

Your `setup()` should look something like this:

```auto
void setup() {
  size(500, 500, P3D); // Important to use P3D here to get the gradient on your shape
  maxRadius = sqrt(sq(width/2) + sq(height/2));
  colorMode(HSB, 360);
  
  background(255);
  noFill();
  strokeWeight(3);
  stroke(r, 360, 260); // Set the stroke color - Not in the right place
  r++; // Increment the hue - Not in the right place

  beginShape();
  for (float i = 0; i<NUM_LINES; ) {
    curveVertex(px(i), py(i)); // Step 2 = draw one point of the spiral point
    i+=pow(map(i, 0, 500, 1.5, 1), 2)*CURVERES;
  }
  endShape();
}

```

I haven’t changed your code but gave you some clue on where to put what.

Note that I’m using `size(500, 500, P3D);`. The `P3D` is important there as it will allow you to get nice gradient on your shape.

Also, the reason why after red the color does not change is because at some point, r is superior than 360 that is the max value possible for your HSV color mode. So when it is the case, r is considered to be 360.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 15, 2021, 10:20pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/9 "2021-03-15T22:20:11Z")

</div>

> [@cocopuffs](#):
>
> Am I using your tips correctly?

No you are not. Read them again.

You also did not format your code.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 15, 2021, 11:53pm UTC](https://discourse.processing.org/t/how-do-i-make-this-spiral-line-change-gradient-colors/28552/13 "2021-03-15T23:53:30Z")

</div>

> [@cocopuffs](#):
>
> So far, I’ve only gotten my spiral to rapidly change colors, but not how the image is. The code I have so far is:

The code you are using appears to be borrowed from here:  
_[for loop to make a spiral - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/13125/for-loop-to-make-a-spiral)_

And you did not credit the original author, @kfrajer, a member of this community.

I will not be assisting any further with this.