p5.js webgl polygon line joints workaround?

Question

About custom shapes (using beginShape function) with a stroke in p5.js WEBGL Mode: In WEBGL Mode the lineJoint() and lineCap() functions are not available. This is why the lines in a shape don't connect seamlessly. I tried to work around the problem using a contour in my custom shape but this is not implemented in WEBGL Mode either.

Is there another way to make those lines join?

Thanks a lot!

Codepen with Problem: https://codepen.io/sebastianwinter/pen/eYNNEEx?editors=1010

Not working Contour

function setup() { 
   createCanvas(window.innerWidth, window.innerHeight, WEBGL);
} 

function draw() { 

    let strokeSize = 20;
    background(2,8,51);
    smooth();
    noFill();
    strokeWeight(strokeSize);
    stroke(255,255,255);

    polygon(0, 0, 200, 7);
}

function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    /* not working:
    beginContour();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * (radius - strokeSize);
        let sy = y + sin(a) * (radius - strokeSize);
        vertex(sx, sy);
    }
    endContour();*/
    endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

score 4 · Accepted Answer · answered Feb 10 '20 at 21:36

AFAIK p5.js' WEBGL mode is still a little experimental and some of the features you're used to in 2D mode are still in the works.

At the moment I can suggest a hacky workaround: use an inner shape, similar to beginContour():

function setup() { 
 createCanvas(window.innerWidth, window.innerHeight, WEBGL);
} 


function draw() { 

 let strokeSize = 20;
 background(2,8,51);
 smooth();
 fill(255);
 //strokeJoin(BEVEL);
 //strokeWeight(1);
 stroke(255,255,255);

 polygon(0, 0, 200, 7, 0.85);
 
 
}


function polygon(x, y, radius, npoints, thicknessRatio) {
 let angle = TWO_PI / npoints;
 beginShape();
 //CW
 for (let a = 0; a <= TWO_PI; a += angle) {
  let sx = x + cos(a) * radius;
  let sy = y + sin(a) * radius;
  vertex(sx, sy);
 }
 // beginContour();
 // CCW
 for (let a = TWO_PI; a >= 0; a -= angle) {
  let sx = x + cos(a) * radius * thicknessRatio;
  let sy = y + sin(a) * radius * thicknessRatio;
  vertex(sx, sy);
 }
 // endContour();
 endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

p5.js webgl polygon line joints workaround?

1 Answers1