Help me please how to remove little circle?

yeah, how to do that ?

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

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

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?

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

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

2 Likes

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

yeah, maybe my question more difficult than I expected

Hello,

Can you elaborate on what you are trying to achieve?

:)

I just tried to draw lines with transparent colors without overlapping

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(); 
  }

:)

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

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.

:)

5 Likes

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();
}

5 Likes

Thanks so much! Appreciate it.

Depending on what you want to do @glv’s method can be better I think.

The issue with mine is that you need to store the position of all the points. I limited the number of points created with the minDist variable but still, if you run it long enough, you might have a really long array of point and it might start running slow over time. It will depend on the hardware and the use case.

4 Likes

Okay. I’ll play with both codes for a bit to find out which one fits my use.

2 Likes

Hello,

I added this to draw to display number of points and frameRate every 10 frames:

  if (frameCount%10 == 0)
  surface.setTitle(str(pts.size()) + "  " + str(frameRate));

It does indeed slow down after a while; I noticed dropping after 600 points here.

:)

I tried for fun: lost 1 FPS after 3500 points.

ah i see you treat lines like image and change transparancy with tint() this my 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();
  pg.line(pmouseX, pmouseY, mouseX, mouseY);
  pg.strokeWeight(5);
  pg.stroke(255,0,255);
  pg.endDraw();
  
  tint(255, 0, 255, 50);
  image(pg, 0, 0); 

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

thank you @glv and @jb4x now i understand,
please help me again in next time thank you very much

2 Likes