# Curve vertex contour problem

**URL:** <https://discourse.processing.org/t/curve-vertex-contour-problem/10179>\
**Category:** Coding Questions\
**Created:** [April 11, 2019, 7:47am UTC](https://discourse.processing.org/t/curve-vertex-contour-problem/10179 "2019-04-11T07:47:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mkoch](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@mkoch](https://discourse.processing.org/u/mkoch)\
**Post date:** [April 11, 2019, 7:47am UTC](https://discourse.processing.org/t/curve-vertex-contour-problem/10179/1 "2019-04-11T07:47:39Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 11, 2019, 9:39am UTC](https://discourse.processing.org/t/curve-vertex-contour-problem/10179/2 "2019-04-11T09:39:01Z")

</div>

i not play with contour…

but for the

> curveVertex

> **[reference | p5.js](https://p5js.org/reference/#/p5/curveVertex)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

-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

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

```

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/sv42w8nNe)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

more about control points

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/BJYFW_hTQ)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.