mixing vertex() and curveVertex()

[shiffman]

First, let me say that I don't really know what I'm talking about here. But I noticed today that if you use a call to curveVertex() within beginShape() and endShape(), all the vertices turn into "curved" ones, rather than just an individual vertex, i.e.

I know there are other aspects at play here in terms of how curveVertex() works, but I'm not sure if the above result is correct?

fill(255);
beginShape();
vertex(30, 10);
curveVertex(85, 20);
vertex(83, 75);
vertex(30, 92);
vertex(50,50);
endShape(CLOSE);

[lmccart]

I don't think this behavior is supported in Processing either. When I tried running that code, it seemed to ignore the curveVertex() point completely.

Maybe we just need to be clearer in the documentation that you can't mix? Or do you think it is important to support this?

[shiffman]

Yes, I think you are right. My memory tells me there's a way of mixing in Processing, but perhaps that's part of PShape or else involves beginContour() or some other magic I'm not aware. But looking through the Processing examples and documentation I don't see that mixing is allowed like came up in class above. @codeanticode can you provide any guidance?

This may be a edge case that rarely comes up, and I agree it looks like it's a documentation issue.

[codeanticode]

You can mix regular and curve vertices in Processing:

size(200, 200);

fill(255);

noFill();
beginShape();
curveVertex(84,  91);
curveVertex(84,  91);
curveVertex(68,  19);
curveVertex(21,  17);
curveVertex(32, 100);
curveVertex(32, 100);
vertex(50, 120);
vertex(80, 140);
endShape();

the problem is that you need at least four consecutive curveVertex() calls to draw a valid curve segment

[shiffman]

Thanks, @codeanticode. I am not sure what p5.js should do, just noting the difference. I suppose mixing would be nice if it's reasonable to implement in canvas. See results in both below.

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

function draw() {
  fill(255);
  noFill();
  beginShape();
  curveVertex(84, 91);
  curveVertex(84, 91);
  curveVertex(68, 19);
  curveVertex(21, 17);
  curveVertex(32, 100);
  curveVertex(32, 100);
  vertex(50, 120);
  vertex(80, 140);
  vertex(100, 140);
  vertex(120, 180);
  vertex(160, 200);
  endShape();
}

[arihantparsoya]

@shiffman I submitted a PR(#1185) and hope to get your feedback on my patch soon so i could make necessary changes.

[lmccart]

I think the complexity of adding this and the lack of activity on this thread suggests we table this for now and focus on frying bigger fish until this comes into higher demand.

[rubyjlp]

Not to reopen this can of worms, but I'm having a lot of problems with this issue. My main problem is that if there are curve vertices within a contour in a custom shape the external shape is also given curves and becomes connected to the contour shape, regardless of whether or not it had curves to begin with. This makes it beyond annoying to make a shape that's, say, a rectangle with a circle cut out from the middle. Examples included: Image of a custom shape with a contour that is only straight lines, and an image of the same shape with one of the vertices changed to a curve vertex.

[jlp6k]

I have the same problem.
I worked it around with a combination of createGraphics and blendMode() in order to hollow the outer shape with the inner one. But this solution isn't generic as blend mode has to be chosen wrt the colors of the two objects.

[hapiel]

I have also run into a similar issue, I assumed that I could put a curveVertex() within a beginContour(), but this seems to be impossible no matter if the original vertex is curve points or normal points.

My solution has been to approach the curve shape with straight lines between multiple curvePoint()

I would recommend this solution for any problem where you try to mix curveVertex() and vertex(), or where you try to use curveVertex() inside beginContour().

I attempted the createGraphics() and blendMode() solution as suggested above, but this was not feasible when trying to draw a large amount of objects.