# How do i make gradient lines?

Sorry guys. I can’t English well
So, I want to know How to make gradient line like this picture?

``````size(600,600);
background(255);
fill(255);

for(int a=1; a<6; ++a)
for(int b=1; b<6; ++b)
for(int c=1; c<6; ++c)
for(int d=1; d<6; ++d) {
ellipse(a *100,b* 100,10,10);
stroke(255,255,255);
line(a *100,b* 100,c *100,d* 100);
}
``````

But I don’t know fill gradient colors in lines.
Can you help me?
I’m very begginer.

2 Likes

Hi,

You can use the P2D renderer and set a color for each vertex:

``````void setup() {
size(500, 500, P2D);
background(20);

strokeWeight(2);
beginShape(LINES);
stroke(255, 0, 0);
vertex(100, 100);
stroke(0, 255, 0);
vertex(400, 400);
endShape();
}
``````
2 Likes

Thank you. But still I don’t know how i make picture shape in gradient.

Maybe

``````void setup() {
size(500, 500, P2D);
background(20);

strokeWeight(2);
beginShape(LINES);
stroke(255, 0, 0);
vertex(100, 100);
stroke(0, 255, 0);
vertex(400, 400);
endShape();
}

for(int a=1; a<6; ++a)
for(int b=1; b<6; ++b)
for(int c=1; c<6; ++c)
for(int d=1; d<6; ++d)  {
ellipse(a*100,b*100,10,10);
line(a*100,b*100,c*100,d*100);
}
``````

these are wrong sentences.
How I make?

Your code above is not correct. If you want to draw with setup only, you need to put all your code inside setup:

``````void setup() {
size(500, 500, P2D);
background(20);

strokeWeight(2);
beginShape(LINES);
stroke(255, 0, 0);
vertex(100, 100);
stroke(0, 255, 0);
vertex(400, 400);
endShape();
for (int a=1; a<6; ++a)
for (int b=1; b<6; ++b)
for (int c=1; c<6; ++c)
for (int d=1; d<6; ++d) {
ellipse(a*100, b*100, 10, 10);
line(a*100, b*100, c*100, d*100);
}
}
``````

Also, because you are a beginner, I recommend that you always use braces “{}” when you use `for()`. Write your code like this – it is easier for you to understand:

``````void setup() {
size(500, 500, P2D);
background(20);

strokeWeight(2);
beginShape(LINES);
stroke(255, 0, 0);
vertex(100, 100);
stroke(0, 255, 0);
vertex(400, 400);
endShape();
for (int a=1; a<6; ++a) {
for (int b=1; b<6; ++b) {
for (int c=1; c<6; ++c) {
for (int d=1; d<6; ++d) {
ellipse(a*100, b*100, 10, 10);
line(a*100, b*100, c*100, d*100);
}
}
}
}
}
``````

Also, you are using drawing one line with vertex, then all your other lines with your for loops. If you want to use vertex for all your other lines, you need to put it in your for loops.

If you are a complete beginner (to loops, color, points and lines), I might also recommend starting with easier projects first!

For example, try modifying this:

2 Likes

One way of changing your lines into gradient lines is to draw them one point at a time.

``````void pointLine(int a, int b, int c, int d) {
float travel = max(abs(c-a), (d-b)); // how many points? choose longest dimension
for(float i=0; i<travel; i+=0.5) {   // draw point every half-pixel
float x = lerp(a, c, i/travel);       // find x
float y = lerp(b, d, i/travel);       // find y
point(x, y);
}
}
``````

Call `pointLine(x1, y1, x2, y2)` instead of `line(x1, y1, x2, y2)`, and it will draw the same line, but with points.

THEN you can modify your pointLine to take two colors, color c1 and color c2, and decide the color of each point in the line using lerpColor.

``````void pointLine(int a, int b, int c, int d, color c1, color c2 ) { // ...
``````
1 Like

okay^^
thank you.

I’ll try.