# quadraticVertex bezierVertex give different shape

**URL:** <https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712>\
**Category:** Coding Questions\
**Created:** [April 28, 2019, 1:01pm UTC](https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712 "2019-04-28T13:01:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![IanM](https://avatars.discourse-cdn.com/v4/letter/i/f1d935/32.png) [@IanM](https://discourse.processing.org/u/IanM)\
**Post date:** [April 28, 2019, 1:01pm UTC](https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712/1 "2019-04-28T13:01:51Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![DongKingKong0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dongkingkong0/32/960_2.png) [@DongKingKong0](https://discourse.processing.org/u/DongKingKong0)\
**Post date:** [April 28, 2019, 1:11pm UTC](https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712/2 "2019-04-28T13:11:08Z")

</div>

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

> <https://stackoverflow.com/questions/18814022/what-is-the-difference-between-cubic-bezier-and-quadratic-bezier-and-their-use-c/18815388#18815388>

---

<div class="post-metadata">

**Author:** ![IanM](https://avatars.discourse-cdn.com/v4/letter/i/f1d935/32.png) [@IanM](https://discourse.processing.org/u/IanM)\
**Post date:** [April 28, 2019, 1:42pm UTC](https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712/3 "2019-04-28T13:42:00Z")

</div>

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,

> <https://stackoverflow.com/questions/9485788/convert-quadratic-curve-to-cubic-curve>

---

<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 28, 2019, 1:50pm UTC](https://discourse.processing.org/t/quadraticvertex-beziervertex-give-different-shape/10712/4 "2019-04-28T13:50:24Z")

</div>

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.

```auto
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

```auto
</> code tag

```