# Simple question: draw a gradient line by line

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

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

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

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

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

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().

1 Like

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

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

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

you the man! Thank you!!!