How do I make a point have smooth color transitions?

hmgo

Hello, I am new and I want my drawing to change color over time with smooth transitions (not random). I know this involves the HSB color mode but that is all I know. I am very new to this and I find this whole thing very confusing. If someone could take me through a step by step process that would really be helpful.

Here is what I have and I'd like the points to have a smooth color change as it continues to draw. (Basically if you google image search "rainbow gradient" – I want the fill of the points to cycle through all of those colors)

int number = 0;

void setup() {
  size(1000,500);
  background(20);
  colorMode(HSB)
}

void draw() {
  stroke(255);
  fill(255);
  strokeWeight(5);
  translate(width/2,height/2);
  point(x(t),y(t));
  t++;

}

float x(float t) {
  return sin(t * 2) * 100;
}

float y(float t) {
  return cos(t / 10) * 100;
}

TfGuy44

int t = 0;

void setup() {
  size(1000,500);
  background(20);
  colorMode(HSB,200);
  strokeWeight(5);
}

void draw() {
  stroke(t%200,200,200);
  translate(width/2,height/2);
  point(x(t),y(t));
  t++;
}

float x(float t) {
  return sin(t * 2) * 100;
}

float y(float t) {
  return cos(t / 10) * 100;
}

So what's changed? For one, I set the "maximum value" for HSB mode to 200. Then I modified the stroke color to depend on t (the variable that increases every frame). When t is 0 (at the start), you get a red color. As t increases, it turns to orange, then yellow, green, blue, purple, and back to red. When t is 200, I want to go back to using red again, so I use the mod function (%) (that is, x%y is the remainder of x/y). So when t is 201, I use the value of 1 again. And so on.

jeremydouglass

Use lerpColor(). It takes an amount amt between 0-1. For a simple color cycle, use the sketch clock as input. So if you want a color cycle that repeats every 5 seconds:

color rainbow = lerpColor(colorA, colorB, (millis()%5000)/5000.0);

hmgo

@jeremydouglass

where do I insert that?

@TfGuy44

thank you for the response! it worked but I am still unclear about what you mean by "mod function (%) (that is, x%y is the remainder of x/y)"

TfGuy44

0 % 200 = 0
1 % 200 = 1
2 % 200 = 2
...
199 % 200 = 199
200 % 200 = 0
201 % 200 = 1
...
1632983932982091301 % 200 = 101
1632983932982091302 % 200 = 102

jeremydouglass

@hmgo, the Processing reference has an explanation of % function -- also called mod, or modulo -- here: % (modulo).

So as t++ counts up, the answer to t%200 cycles between 0-199 over and over, as @TfGuy44 's example shows. This gives you a color hue between 0-199 -- or all the colors of the rainbow when the colorMode(HSB,200) command set the number of colors to 200.

jeremydouglass

Re: a different approach with lerpColor(). This method lets you pick two specific colors to cycle between explicitly. In the sketch below based on @TfGuy44 's solution colors are computed based on the clock rather than how often drawing happens. So if you changed the frameRate(), @TfGuy44 's sketch would change color faster or slower -- this one will draw points more slowly, but they will change color at the same speed. Which kind of color mixing and which kind of timing you want to use depends on what you are trying to do.

//// https:// forum.processing.org/two/discussion/18393/how-do-i-make-a-point-have-smooth-color-transitions#latest

int t;
color orange = color(255,128,0);
color blue = color(0,128,255);

void setup() {
  size(300,300);
  background(20);
  strokeWeight(5);
  frameRate(12);
}

void draw() {
  stroke( lerpColor(orange, blue, (millis()%5000)/5000.0) );
  translate(width/2,height/2);
  point(x(t),y(t));
  t++;
}

float x(float t) {
  return sin(t * 2) * 100;
}

float y(float t) {
  return cos(t / 10) * 100;
}