# Simple question: draw a gradient line by line
**URL:** https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652
**Category:** Coding Questions
**Created:** [December 27, 2019, 8:38am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652 "2019-12-27T08:38:40Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 8:38am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/1 "2019-12-27T08:38:40Z")
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
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [December 27, 2019, 10:28am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/2 "2019-12-27T10:28:33Z")
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.
- [https://processing.org/examples/lineargradient.html](https://processing.org/examples/lineargradient.html)
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.
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 10:57am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/3 "2019-12-27T10:57:12Z")
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…
```auto
/*
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);
}
}
*/
```
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 10:59am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/4 "2019-12-27T10:59:30Z")
replied the wrong way. you can read my answer down there. Thank you!
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [December 27, 2019, 11:08am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/5 "2019-12-27T11:08:51Z")
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.
```auto
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?
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 11:13am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/6 "2019-12-27T11:13:26Z")
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().
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 11:16am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/7 "2019-12-27T11:16:50Z")
aaaaaaah you did this already in your code! I couldn’t read your code somehow. So good, thank you!
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 11:19am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/8 "2019-12-27T11:19:22Z")
one last question, can I control somehow the speed how fast its going?
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [December 27, 2019, 11:23am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/9 "2019-12-27T11:23:33Z")
Yes you can by altering the increasing value at the end of `void draw`.
```auto
//rest of the code
}
yPos++
}
```
`++` is equivalent to `yPos = yPos + 1`. You could lower the speed by increasing with a value lower than 1.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 27, 2019, 11:24am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/10 "2019-12-27T11:24:28Z")
or change
```auto
void setup() {
size(100, 400);
frameRate(15);
```
there is also a funny way around the lerp thing:
```auto
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);
}
```
---
### Author:  [@littlecat](https://discourse.processing.org/u/littlecat)
#### Post date: [December 27, 2019, 11:24am UTC](https://discourse.processing.org/t/simple-question-draw-a-gradient-line-by-line/16652/11 "2019-12-27T11:24:50Z")
you the man! Thank you!!!