Simple question: draw a gradient line by line

Processing Coding Questions
1

Hey everyone

I’m a newbie and don’t know how to find a solution for this question:

I want to draw gradient where you can see the “loading” or refreshing of the gradient. Like when you see loading a image on a screen line by line. Which code do I have to look for to do this?
I don’t have a clue where to start. I also googled this but I didn’t find an answer.

Thank you everyone!
Moritz

1 Like
2

There is an example of how to draw a linear gradient in the examples. I suggest you try to minimise it to your liking first, and afterwards try to apply the ‘loading’ effect.

In the example the test part of the for loop decided the length of the gradient. You could use a global variable to decide this length instead, and increase its value over time.

Good luck! If you’re stuck, post how far you got with your code and we’ll take a crack at it.

3 Likes
3

Thank you for the help Tiemen. I did this already. I thought I just could slow down the for loop here. But that dosen’t works :-/. I tried it with delay(3);. But the gradient works fine…

/*
import rwmidi.*;  

MidiInput mymididevice; 
  
  //Trigger
  int trigger;
  float x = 0;
  
  //Colors
  color c1;
  color c2;

void setup() { 
  
  //fullScreen();
  size(100, 400);
 
} 

void draw() {

  background(102);
  colorMode(HSB, 100);
  
  c1 = color(0, 0, 255);
  c2 = color(0, 0, 0);
  
  for(int y = 0; y < height; y++) {
    float n = map(y, 0, height, 0, 1);
    color newc = lerpColor(c1, c2, n);
    stroke(newc);
    delay(3);
    line(0, y, width, y);
  }

}
*/
1 Like
4

replied the wrong way. you can read my answer down there. Thank you!

5

I wouldn’t use delay , because your screen updates after it’s gone entirely through void draw. This means that each time your sketch loops through it, it gets delayed before showing the visual output.

color c1, c2;
float yPos = 0;

void setup() {
  size(100, 400);
  c1 = color(0, 0, 255);
  c2 = color(0, 0, 0);
}

void draw() {
  background(102);
  for (int y = 0; y < yPos; y++) {
    float n = map(y, 0, height, 0, 1);
    color newc = lerpColor(c1, c2, n);
    stroke(newc);
    line(0, y, width, y);
  }
  yPos++;
}

Some other suggestions:

  • You could initialise c1 and c2 once in setup;
  • colorMode can be decided in setup as well.

Is this example code what you had in mind?

3 Likes
6

Thank you for the fast answer and tips. Yeah! I was what I had in mind but with a kind of a delay which slows down the draw() function (as I know now you have to slow down not the loop but the draw().

7

aaaaaaah you did this already in your code! I couldn’t read your code somehow. So good, thank you!

1 Like
8

one last question, can I control somehow the speed how fast its going?

9

Yes you can by altering the increasing value at the end of void draw.

   //rest of the code
   }
   yPos++
}

++ is equivalent to yPos = yPos + 1. You could lower the speed by increasing with a value lower than 1.

1 Like
10

or change

void setup() {
  size(100, 400);
  frameRate(15);

there is also a funny way around the lerp thing:

void setup() {
  size(200, 200);
  colorMode(RGB,height);  // range here
  frameRate(15);
}

int yPos=0;

void draw() {
  background(102);
  for (int y = 0; y < yPos; y++) {
    stroke(0,0,height-y);
    line(0, y, width, y);
  }
  yPos++;
  yPos = constrain(yPos,0,height);
}
3 Likes
11

you the man! Thank you!!!