Loading...
Logo
Processing Forum
may I ask if there is a way to draw a line with a gradation of transparency alone itself?

thanks!


Replies(7)

same answer, there is no way to do it with line().... in this case use the beginShape() endShape() function and use fill() between the vertices. It works with different colors, should probably also work with transparency but also only in P3D, not Java2D render.
 Another way would also include beginShape() and endShape() but drawing a quadstrip and you get something like this :


Copy code


  1. void setup() {
  2.   size(500, 500);
  3.   smooth();
  4. }

  5. void draw() {
  6.   noStroke();
  7.   background(0, 0, 255);
  8.   beginShape(QUAD_STRIP);
  9.   for (int i = 0; i<40;i++) {
  10.     fill(255, 0, 0, 255/40*i);
  11.     vertex(50+10*i, 200);
  12.     vertex(50+10*i, 250);
  13.   }
  14.   endShape();
  15. }
noted with thanks! looks like there's no straight forward way to do it ...
Might I remind you to read the Forum Guidelines?
Generic questions like that, without code to examine, belong here (I moved the thread), not in Programming Questions.
Thanks.
What about this?

Copy code
  1. void setup()
  2. {
  3.   smooth();
  4. }
  5. void draw() {
  6.   background(255);
  7.   for (int i =0; i<100; i++)
  8.   {
  9.     float x = 200-i*2;
  10.     stroke(255, 0, 0, x);
  11.     point(i, 75);
  12.     stroke(0, 255-i*3);
  13.     point(i, 50);
  14.   }
  15. }

You can also use several ellipses, for bigger stroke width, or several short lines, each with its own transparency / color.
I just found that strokeWeight also affects point...


Copy code
  1. void setup()
  2. {
  3.   smooth();
  4. }
  5. void draw() {
  6.   background(255);
  7.   for (int i =0; i<100; i++)
  8.   {
  9.     strokeWeight(1.0);
  10.     float x = 200-i*2;
  11.     stroke(255, 0, 0, x);
  12.     point(i, 75);
  13.     stroke(0, 255-i*3);
  14.     point(i, 50);

  15.   }
  16.   
  17.     for (int i =0; i<95; i++)
  18.   {
  19.     strokeWeight(1.0);
  20.     float x = map(i, 0, 95, 1, 6);
  21.     strokeWeight(x);
  22.     stroke(0, 180,130);
  23.     line(i, 25, i+2, 25);
  24.     point(i, 37);
  25.   }
  26.   
  27. }

You could use lerp and lerpColor. Press the mouse to toggle between fully opaque or transparant fade.

Code Example
Copy code
  1. import processing.opengl.*;
  2.  
  3. void setup() {
  4.   size(1280, 720, OPENGL);
  5.   colorMode(HSB, 360, 100, 100);
  6.   smooth();
  7. }
  8.  
  9. void draw() {
  10.   background(0);
  11.   for (int i=0; i<100; i++) {
  12.     line(mouseX, mouseY,
  13.       int(noise(3*i + frameCount * 0.003) * width), int(noise(5+i + frameCount * 0.006) * height),
  14.       color((0.1*mouseX+0.3*mouseY)%360, 100, 100),
  15.       color(frameCount%360, 100, 100, mousePressed?255:0),
  16.       60);
  17.   }
  18. }
  19.  
  20. void line(int x_s, int y_s, int x_e, int y_e, int col_s, int col_e, int steps) {
  21.   float[] xs = new float[steps];
  22.   float[] ys = new float[steps];
  23.   color[] cs = new color[steps];
  24.   for (int i=0; i<steps; i++) {
  25.     float amt = (float) i / steps;
  26.     xs[i] = lerp(x_s, x_e, amt) + amt * (noise(frameCount * 0.01 + amt) * 200 - 100);
  27.     ys[i] = lerp(y_s, y_e, amt) + amt * (noise(2 + frameCount * 0.01 + amt) * 200 - 100);
  28.     cs[i] = lerpColor(col_s, col_e, amt);
  29.   }
  30.   for (int i=0; i<steps-1; i++) {
  31.     stroke(cs[i]);
  32.     line(xs[i], ys[i], xs[i+1], ys[i+1]);
  33.   }
  34. }