Closing a shape with curveVertex till the end

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

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 // 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

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

1 Like

hi, i play little bit here

-a- change

let ang = TWO_PI / numpoints;

to

let ang = TWO_PI / (numpoints-1);

-b-

a < TWO_PI

to

a <= TWO_PI

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

	curveVertex(rad2, 0);

but a end control point seems not required??

and now not even need the CLOSE

	endShape(CLOSE);

to

	endShape();

somehow x,y,rad1 are unused??

2 Likes

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?

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

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
https://editor.p5js.org/kll/sketches/rJLAmDnK7
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

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/. This sketch shows how it can function within a circle.

1 Like

Thank you for sharing your solution, @animofa !

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

1 Like

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

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

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

1 Like

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

also play
https://editor.p5js.org/kll/sketches/BJYFW_hTQ

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.

there is this really nice bit of code shared here which might fit what you’re looking for. below is an example of the types of output available

1 Like

so i guess that you not have

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

https://editor.p5js.org/kll/sketches/S8TcMX_nv
use keyboard [c]

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

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 )

1 Like

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

Thanks to everybody you for your time.