Changing gradient

Processing Coding Questions
1

Hi there!

I am experimenting with gradients. I have made this one, based on happy codding tutorial, but I would like to animate it. I want the orange part turns slowly into pink and the pink part turns slowly into orange, but I don’t know how to do that.

void setup() {
  size(1000, 1000);
  colorMode(RGB,1000,1000,1000);
  noSmooth();
}

void draw() {
  for(int y = 0; y < height; y++){
    for(int x = 0; x < 100; x++){
      stroke(800,500,y);
      point(x, y);
    }
  }
}

i have this other way to make a gradient and I like it because I would love to make a gradient with more than 2 colors, but I don’t know how to select them




void setup(){
  size(800,1000);
  colorMode(HSB, 1000,1000,1000);
}

void draw(){
  //strokeWeight(2);
  for (int i = 0; i<height; i++){
  stroke(i,1000,1000);
  line(0,i,100,i);
}
}

And finally this maybe the only way I know to change the color of the screen

float y = 0;
void setup(){
  size(800,1000);
  colorMode(HSB, 1000,1000,1000);
}

void draw(){
  background(random(0,1000),1000,1000);
}
2

This is really three questions and should be split into three posts to elicit responses.

For question 1 and 2 an animation will never work well because you are using for loops. These all occur in a single frame of animation so there is no time for the animation to occur. There are are only three solutions I see:

  1. slow the frameRate() right down (not advised) or;
  2. remove the for() loops and get the creation of the gradient to occur in the draw() or;
  3. cheat, create two gradients in PGraphics on top of each other and fade from one to the other using tint() - this might be the best/easiest solution but it might also not look as you want.

For question 3 - this will get you started (how the colours are calculated needs some work):

int savedtime; //the current saved time.
int timetotal = 10000; //duration in milliseconds of the timer (1000 milliseconds = 1 second).
int timeelapsed = 0; //how much time has passed.

float offset;
int from = 0, to = 500;
float lerpstep = 0.0;
float lerpspeed = 0.005;

void setup()
{
  size(1000, 1000);
  colorMode(RGB,1000,1000,1000);
  noSmooth();
}

void draw()
{
  offset = lerp(from, to, smoothstep(0.0, 0.7, lerpstep));
  lerpstep += lerpspeed;
  
  background(offset, offset, 1000);
  
   // Calculate how much time has passed.
  timeelapsed = millis() - savedtime;

  // If time elapsed is greater than the duration of the timer.
  if (timeelapsed > timetotal)
  {
    from = to;

    if (to == 500)
    {
      to = 0;
    }
    else
    {
      to = 500;
    }

    lerpstep = 0.0;
    savedtime = millis();
  }
}

float smoothstep(float edge0, float edge1, float x)
{
    x = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0); 
    return x * x * (3 - 2 * x);
}