Help me please how to remove little circle?

[Rai]

void setup() {
  size(640, 480);
  background(255);
}
void draw() {
  strokeWeight(10);
  stroke(255, 0, 0, 50);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

[glv]

Hello,

Please format code when posting:
https://discourse.processing.org/faq#format-your-code

You are setting the alpha (transparency) in your stroke:

stroke(v1, v2, v3, alpha)

References:
https://processing.org/tutorials/color/
https://processing.org/reference/stroke_.html

:)

[Spaceman1]

You can also try adding strokeCap(SQUARE) if you would like to keep the transparency.

[furinax]

As stated above, just remove the “, 50” from your call to “stroke” and it will be a solid, fully opaque circle.

[Rai]

i use alpha for transparency
what i mean is how to delete the circle but stay transparent

[Spaceman1]

As I said before, if you use strokeCap(SQUARE) there is no issue. I think that the default stroke cap extends farther which results in an overlap in the two lines and a reduction in the transparency - which comes out looking like little circles. With the square cap there is practically no overlap.

[glv]

Hello,

Like this?

My version:

Your version:

:)

[Rai]

yeah, how to do that ?

[Rai]

but if you use strokeCAP (SQUARE), if the lines overlap colors will overlap too

[Rai]

if I place an image on it, will it remain transparent?

[Spaceman1]

Yes that is true. My suggestion was just to limit the overlap, but by nature if you overlay two partly transparent lines it will become more opaque. The only thing I can think of is to store all the points and redraw them anew every frame testing to see if they overlap which sounds a little too compllicated. I wonder how @glv got it done?

[jb4x]

I guess by not having it transparent and simply by changing the intensity of the color.

Edit:
Actually it is possible with beginShape() and endShape():

[qewer3322]

Hey! I’m not the one who asked the question but how exactly did you do it with beginShape() ?

[Rai]

yeah, maybe my question more difficult than I expected

[glv]

Hello,

Can you elaborate on what you are trying to achieve?

:)

[Rai]

I just tried to draw lines with transparent colors without overlapping

[glv]

This is my initial exploration with beginShape()…

Took the original code and added code from here:
https://processing.org/reference/beginShape_.html

void setup() 
  {
  size(640, 480);
  background(255);
  }

void draw() 
  {
  strokeWeight(10);
  stroke(255, 0, 0, 50);
  //line(pmouseX, pmouseY, mouseX, mouseY);
  
  beginShape(LINES);
  vertex(pmouseX, pmouseY);
  vertex(mouseX, mouseY);
  //vertex(30, 20);
  //vertex(85, 20);
  //vertex(85, 75);
  //vertex(30, 75);
  endShape(); 
  }

:)

[qewer3322]

That works but the colors are still overlapping. I wonder how @jb4x did it. I’ll try some stuff too.

[glv]

Hello,

I used PGraphics for this example:

I created a PGraphics image and tinted it:
https://processing.org/reference/tint_.html
https://processing.org/reference/PGraphics.html

Here is a “template” (see references) but not the complete code:

PGraphics pg;

void setup() 
  {
  size(640, 480);
  pg = createGraphics(width, height);
  
  textSize(130);
  textAlign(CENTER, CENTER);
  }

void draw() 
  {
  background(200);   
  text("TOP", width/2, height/3);
 
  pg.beginDraw();
 // It should be a simple exercise to integrate original code here
  pg.endDraw();

  // See tint() reference
  //tint(?, ?);
  image(pg, 0, 0); 

  text("BOT", width/2, 2*height/3);
  }

This is just an exploration of this topic.

:)

[jb4x]

Thats the code I used:

ArrayList<PVector> pts = new ArrayList<PVector>();
final float minDist = 10;

void setup() {
  size(640, 480);
  background(255);
  
  strokeWeight(10);
  stroke(255, 0, 0, 50);
  
  pts.add(new PVector(0, 0));
}

void draw() {
  int lastPt = pts.size() - 1;
  if (dist(pts.get(lastPt).x, pts.get(lastPt).y, mouseX, mouseY) > minDist) {
    pts.add(new PVector(mouseX, mouseY));
  }
  
  background(255);
  
  beginShape();
  for (int i = 0; i < pts.size(); i++) {
    vertex(pts.get(i).x, pts.get(i).y);
  }
  endShape();
}