Curve vertex contour problem

p5.js Coding Questions
1

Hello everyone,

I have a problem using the beginContour and endContour methods with curve vertices.
The contour is not rendered like expected.
Here I’ve got a simple example of the problem

https://editor.p5js.org/mkoch/sketches/c-OXrym1D

As you can see in the example, the interior lines of the shape are connected to the exterior lines when using curveVertex within the beginContour - endContour pair.

2

i not play with contour…

but for the

curveVertex

-a- must close the curve manually
( 4 corners are 5 curveVertex points where the last same the first )
and then not even need the CLOSE.

and as the reference says
need to define 2 add vertex points

control points

for the start angle
so actually you go 1.5 times around your shape ( 7 points )
and it works

use

let w = 40;

  function setup() {
    createCanvas(400, 400);
  }

  function draw() {
    translate(100, 100);
    w = 40;
    beginShape();
    curveVertex(-w, w);
    curveVertex(-w, -w);
    curveVertex(w, -w);
    curveVertex(w, w);
    curveVertex(-w, w);
    curveVertex(-w, -w);
    curveVertex(w, -w);
    endShape();
    w = 20;
    beginShape();
    curveVertex(-w, w);
    curveVertex(-w, -w);
    curveVertex(w, -w);
    curveVertex(w, w);
    curveVertex(-w, w);
    curveVertex(-w, -w);
    curveVertex(w, -w);
    endShape();
  }

more about control points