How do i make this spiral line change gradient colors?

Processing Coding Questions
1

can someone help me with this please?

spiral
spiral2190×2076 254 KB

2

Hello,

Please 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
image502×527 9.31 KB

References for color:

Your turn!

:)

Using HSB provides a nice gradient:

image
image502×527 9.53 KB

1 Like
3

To get the same result you also might want to change the color mode the HSV and lerp the hue value with the lerp() function

Edit: oops, did not see your edit @glv

1 Like
5

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:

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.

1 Like
9

No you are not. Read them again.

You also did not format your code.

13

The code you are using appears to be borrowed from here:
for loop to make a spiral - Processing 2.x and 3.x Forum

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

I will not be assisting any further with this.

1 Like