quadraticVertex bezierVertex give different shape

Processing Coding Questions
1

Hi

I was expecting these calls to give the same shape, but the curves are different. I was testing and not getting the expected results with quadraticVertex, hence this test using duplicate control points in the bezierVertex calls.

Any thoughts or explanation would be useful.

  noFill();
  stroke(255);
  beginShape();
  vertex(25,75);
  quadraticVertex(50,150,75,100);
  quadraticVertex(100,50,150,150);
  endShape();
  beginShape();
  vertex(225,75);
  bezierVertex(250,150,250,150,275,100);
  bezierVertex(300,50,300,50,350,150);
  endShape();
1 Like
2

Have a look at this question, I think it explains what you want to know.

3

Thanks DongKingKong0

I see that I cannot simply convert from cubic to quadratic by duplicating the control point. I needed to do it proportionately as shown in the link,

4

i think it is just a easy mistake,
the bezier vertex use 2 control points,
you set the second control point to the first control point,
if you set it to the point the curves look same.

PVector v1, cp1, cp13, p1, cp2, cp23, p2;
int off = 200, offt =7 ;
boolean showp2 = true;

void setup() {
  size(400, 400);
  noFill();
  stroke(0, 200, 200);
  v1  = new PVector(25, 75);  
  cp1 = new PVector(50, 150);  
//  cp13 = new PVector(50, 150);  
  cp13 = new PVector(75, 100);  // change to this
  p1  = new PVector(75, 100);  
  cp2 = new PVector(100, 50);  
//  cp23 = new PVector(100, 50);  
  cp23 = new PVector(150, 150);  // change to this  
  p2  = new PVector(150, 150);
}

void draw() {
  background(200, 200, 0);
  noFill();
  stroke(255);
//  cp13.set(mouseX, mouseY);  

  beginShape();
  vertex(v1.x, v1.y);
  quadraticVertex(cp1.x, cp1.y, p1.x, p1.y);                                //(50, 150, 75, 100);
  if ( showp2 ) quadraticVertex(cp2.x, cp2.y, p2.x, p2.y);                                //(100, 50, 150, 150);
  endShape();

  beginShape();
  vertex(v1.x+off, v1.y);
  bezierVertex(cp1.x+off, cp1.y, cp13.x+off, cp13.y, p1.x+off, p1.y);            //(250, 150, 250, 150, 275, 100);
  if ( showp2 ) bezierVertex(cp2.x+off,cp2.y,cp23.x+off,cp23.y,p2.x+off,p2.y);            //(300, 50, 300, 50, 350, 150);
  endShape();
  // show points
  stroke(200, 0, 0);
  circle(v1.x, v1.y, 5); 
  circle(cp1.x, cp1.y, 5);
  circle(p1.x, p1.y, 5);
  if ( showp2 ) circle(cp2.x, cp2.y, 5);
  if ( showp2 ) circle(p2.x, p2.y, 5);
  stroke(0, 0, 200);
  circle(v1.x+off, v1.y, 5);
  circle(cp1.x+off, cp1.y, 5);
  circle(cp13.x+off, cp13.y, 5);
  circle(p1.x+off, p1.y, 5);
  if ( showp2 ) circle(cp2.x+off, cp2.y, 5);
  if ( showp2 ) circle(cp23.x+off, cp23.y, 5);
  if ( showp2 ) circle(p2.x+off, p2.y, 5);

  fill(0);
  textSize(8);
  text("v1", v1.x, v1.y+offt);
  text("cp1", cp1.x, cp1.y+offt);
  text("p1", p1.x, p1.y+offt);

  if ( showp2 ) text("cp2", cp2.x, cp2.y+offt);
  if ( showp2 ) text("p2", p2.x, p2.y+offt);

  text("v1", v1.x+off, v1.y+offt);
  text("cp1", cp1.x+off, cp1.y+offt);
  text("cp13", cp13.x+off, cp13.y+offt);
  text("p1", p1.x+off, p1.y+offt);

  if ( showp2 ) text("cp2", cp2.x+off, cp2.y+offt);
  if ( showp2 ) text("cp23", cp23.x+off, cp23.y+offt);
  if ( showp2 ) text("p2", p2.x+off, p2.y+offt);

}

oh yes, pls format your code with the

</> code tag
1 Like