How do i make gradient lines?

Processing Coding Questions
1

오늘이다
오늘이다893×893 160 KB

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

I made shape

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
2

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
3

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?

4

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
5

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
6

okay^^
thank you.

I’ll try.