# Closing a shape with curveVertex till the end

**URL:** <https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566>\
**Category:** Coding Questions\
**Created:** [December 13, 2018, 3:11pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566 "2018-12-13T15:11:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [December 13, 2018, 3:11pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/1 "2018-12-13T15:11:34Z")

</div>

Hello,  
I am currently working on a circular wave generator, that can be modified by users. To achieve it I am using curveVertex.

```auto
beginShape();
  let i =0;
	for(let a = 0; a < TWO_PI; a += ang){
    i++;
		let sx = x + cos(a) * rad2;
		let sy = y + sin(a) * rad2;
    console.log('sx'+sx);
    console.log('sy'+sy);
		fill(72, 139, 143);
			curveTightness(-0.5);
curveVertex(sx, sy);
    
		sx = x + cos(a + halfAng) * randomCornerLengths[i];
		sy = y + y + sin(a + halfAng) * randomCornerLengths[i];
			
curveVertex(sx, sy);
	}
	endShape(CLOSE);
}

```

[https://glitch.com/edit/#!/join/beebf1e1-e308-4f9e-9df8-c6aa1fa9fa0f](https://glitch.com/edit/#!/join/beebf1e1-e308-4f9e-9df8-c6aa1fa9fa0f) // full code

The Problem is, that when the shape is closed the closing part is not curved. So there is a straight line in there which creates to corners.

![33](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f2450f2bcd9d9c29ada68d419cbb69325891657a.png)

Could some one tell me the correct way to close a Shape, when using curved Vertex?  
Thanks to all of you in advance.

---

<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:** [December 13, 2018, 4:59pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/2 "2018-12-13T16:59:36Z")

</div>

hi, i play little bit [here](https://editor.p5js.org/kll/sketches/rJjPA-xxN)

-a- change

```auto
let ang = TWO_PI / numpoints;

```

to

```auto
let ang = TWO_PI / (numpoints-1);

```

-b-

```auto
a < TWO_PI

```

to

```auto
a <= TWO_PI

```

-c-  
add a first control point  
prior to for loop

```auto
	curveVertex(rad2, 0);

```

but a end control point seems not required??

and now not even need the CLOSE

```auto
	endShape(CLOSE);

```

to

```auto
	endShape();

```

 ![snap-060](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9ebb34f520ed450b040b83e5bde591b1a5ef3686.png)

somehow x,y,rad1 are unused??

---

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [December 13, 2018, 9:04pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/3 "2018-12-13T21:04:37Z")

</div>

Thank you!  
This was very helpful.  
There is still a corner where the ending hits the beginning. Do you have any Idea on how to fix this?

---

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [December 13, 2018, 9:08pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/4 "2018-12-13T21:08:13Z")

</div>

x,y and rad1 are used in line 43.  
r1 is the same as rad1.

---

<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:** [December 14, 2018, 1:32am UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/5 "2018-12-14T01:32:24Z")

</div>

> [@animofa](#):
>
> There is still a corner where the ending hits the beginning. Do you have any Idea on how to fix this?

no, it is your concept of creating a closed 360deg shape  
by a loop over 2 vertexes  
while using curveVertex,

-a- i show you how to play with the

- stepsize
- number of steps

-b- i told you about the conflict that curveVertex needs  
a begin and ending control point  
so for 3 point curve need 5 points, like i play here

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

for better understanding  
so there is a big chance that actually the problem is not that a point  
is missing in your curve, it might be the

- 
  - missing endpoint control point

- 
  - wrong start control point  
defining the angle of the last points

-c- how about a total new concept  
-c1a- always start by using not use curveVertex, only vertex ( lines )  
-c1b- use noFill for better view  
-c2- make a loop over 360deg and create a ellipse only one point per loop  
after this works clean ( you never have to worry again about closed shape… )  
-c3- add a harmonic  
means for the basic ellipse there is no “number of star points” needed  
also the random radial array not needed.  
just add a sinus with a adjustable higher frequence and amplitude.  
( harmonic means the added sinus must fit into the basic circle or you get a  
“final step” again.  
-c4- optional can add more harmonics for further “distortion” of the basic ellpisis

---

<div class="post-metadata">

**Author:** ![animofa](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@animofa](https://discourse.processing.org/u/animofa)\
**Post date:** [January 24, 2019, 7:22pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/6 "2019-01-24T19:22:51Z")

</div>

In case some one is having similuar Problems. I have found perlin noise as a solution for my problem. [https://www.openprocessing.org/sketch/112858/](https://www.openprocessing.org/sketch/112858/). This sketch shows how it can function within a circle.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 25, 2019, 12:50am UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/7 "2019-01-25T00:50:44Z")

</div>

Thank you for sharing your solution, @animofa !

---

<div class="post-metadata">

**Author:** ![adamherst](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@adamherst](https://discourse.processing.org/u/adamherst)\
**Post date:** [January 25, 2019, 7:06pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/8 "2019-01-25T19:06:53Z")

</div>

This post has a method that’s worked for me in p5.js: [https://forum.processing.org/one/topic/sharp-corners-in-beginshape-with-curvevertex.html](https://forum.processing.org/one/topic/sharp-corners-in-beginshape-with-curvevertex.html)

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 26, 2019, 8:35pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/9 "2019-02-26T20:35:24Z")

</div>

I’m too struggling closing a curveVertex shape, your help will be much appreciated. Here is my code:

```auto
let ang = TWO_PI / (this.vertices.length - 1);
        let i = 0;
        beginShape();
        curveVertex(this.vertices[0].x, this.vertices[0].y);
        for (let a = 0; a <= TWO_PI; a+= ang) {
        	let v = this.vertices[i];
            curveVertex(v.x, v.y);
            i++;
            // text(i, v.x, v.y);
            ellipse(v.x, v.y, 4, 4);
        }
        endShape();

```

Here is my result

 ![worm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3f8e97e4486bc98ebafc573d35ee824067f0db3f.png)

The shape starts from the first dot on the right side CCW all the way around. Even though I’m using a full-circle for loop, I cant figure out how to close the shape to produce a smooth shape, hence the omission to use CLOSE on the endShape function.

The **vertices** array contains a series of (x,y) coordinates that are all interconnected using springs and the slug shape is created using a bezierPoint() curve, if that helps to understand how the shape is constructed.

Thank you for your time.

// END OF LINE

---

<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:** [February 27, 2019, 1:39am UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/10 "2019-02-27T01:39:00Z")

</div>

checked the reference already?  
possibly it is not that clear,  
but you need at beginning and end  
2 more points as control points  
( they not get a connecting line but define the angle from the last line end )  
like make then manually prior and after your FOR loop

[https://p5js.org/reference/#/p5/curveVertex](https://p5js.org/reference/#/p5/curveVertex)

also play  
[https://editor.p5js.org/kll/sketches/BJYFW\_hTQ](https://editor.p5js.org/kll/sketches/BJYFW_hTQ)

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 27, 2019, 11:52am UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/11 "2019-02-27T11:52:37Z")

</div>

Yes I have checked the reference. Unless I’m missing something, not sure what is wrong. I’m going full circle connecting the dots to create the curve… but 2 sections are still missing.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 27, 2019, 12:08pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/12 "2019-02-27T12:08:08Z")

</div>

there is this really nice bit of code shared [here](https://www.openprocessing.org/sketch/669694/) which might fit what you’re looking for. below is an example of the types of output available

 ![download](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e1b88af8073c2ecfcfd61935912b99a1e9c38c97.png)

---

<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:** [February 27, 2019, 12:59pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/13 "2019-02-27T12:59:30Z")

</div>

> [@nardove](#):
>
> but 2 sections are still missing.

so i guess that you not have

- start control point
- first point in array = last point in array !!
- end control point

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

use keyboard [c]

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 27, 2019, 1:09pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/14 "2019-02-27T13:09:32Z")

</div>

I see, so looping full circle is not enough, I need to “manually” close it after the loop. point taken I’ll try it later, many thanks

---

<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:** [February 27, 2019, 1:54pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/15 "2019-02-27T13:54:25Z")

</div>

> [@nardove](#):
>
> I need to “manually” close it after the loop

> no, that is not the point,

one line need 2 points  
four lines need 5 points ( 0 … 4 )  
if four lines have to be a closed shape ( like circle )  
point 0 and point 4 must be same.

anyhow need the 2 control points what not get lines!  
so need 7 points

-1- point 3 cp1 ( if use point 0 shape closed but wrong angle )  
-2- point 0 p1 line start  
-3- point 1 p2  
-4- point 2 p3  
-5- point 3 p4  
-6- point 4 p1 line end  
-7- point 1 cp2 ( if use point 4 ( == 0 ) shape closed but wrong angle )

---

<div class="post-metadata">

**Author:** ![nardove](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nardove/32/7936_2.png) [@nardove](https://discourse.processing.org/u/nardove)\
**Post date:** [February 27, 2019, 4:12pm UTC](https://discourse.processing.org/t/closing-a-shape-with-curvevertex-till-the-end/6566/16 "2019-02-27T16:12:57Z")

</div>

I understand now, vertices array is not a closed path so I have to make the last point the same as the first one, GOTCHA, I’ll report back later.

– UPDATE –

@kll SOLVED many thanks for your input, much appreciated

 ![fixed](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6ad7b964ce67f90c9ffde200476d4310efbc0fac.png)

Thanks to everybody you for your time.