# Shape Drawing Guidance - how to draw symmetric filled curves?

**URL:** https://discourse.processing.org/t/shape-drawing-guidance-how-to-draw-symmetric-filled-curves/21352
**Category:** Coding Questions
**Created:** [May 27, 2020, 7:36pm UTC](https://discourse.processing.org/t/shape-drawing-guidance-how-to-draw-symmetric-filled-curves/21352 "2020-05-27T19:36:13Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![rkk16](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@rkk16](https://discourse.processing.org/u/rkk16)
#### Post date: [May 27, 2020, 7:36pm UTC](https://discourse.processing.org/t/shape-drawing-guidance-how-to-draw-symmetric-filled-curves/21352/1 "2020-05-27T19:36:13Z")

</div>

![eyelids](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/77b845e2de60ed25b7d8aed18e3b6b1bcf748752.png)  
Hey guys, I’ve used a curve vertex tool to draw these eye lids on top of a sphere but they turn out pretty asymmetric since usually you need to define points on either side as ‘training’/‘direction’ points to get symmetry but due to the fact that the vertices switch direction, i don’t have a training/direction point at one side. Any tips on how to get symmetry? If you don’t understand what I mean, my code is here:

```auto
translate(200,220);
//LEFT EYE TOP 
beginShape();
    curveVertex(-130,-20);
    curveVertex(-117,-80);
    curveVertex(-110,-101.7);
    curveVertex(-95,-113.8);
    curveVertex(-80,-117);
    curveVertex(-65,-113.8);
    curveVertex(-50,-101.7);
    curveVertex(-43,-80);
    curveVertex(-80,-105);
    curveVertex(-117,-80);
     curveVertex(-130,-40);
    endShape();
//LEFT EYE BOTTOM
    beginShape();
    curveVertex(-130,-140);
    curveVertex(-117,-80);
    curveVertex(-110,-59.3);
    curveVertex(-95,-47.2);
    curveVertex(-80,-44);
    curveVertex(-65,-47.2);
    curveVertex(-50,-59.3);
    curveVertex(-43,-80);
    curveVertex(-80,-55);
    curveVertex(-117,-80);
     curveVertex(-130,-120);
    endShape();
//RIGHT EYE TOP
    beginShape();
    curveVertex(130,-20);
    curveVertex(117,-80);
    curveVertex(110,-101.7);
    curveVertex(95,-113.8);
    curveVertex(80,-117);
    curveVertex(65,-113.8);
    curveVertex(50,-101.7);
    curveVertex(43,-80);
    curveVertex(80,-105);
    curveVertex(117,-80);
     curveVertex(130,-40);
    endShape();
//RIGHT EYE BOTTOM
    beginShape();
    curveVertex(130,-140);
    curveVertex(117,-80);
    curveVertex(110,-59.3);
    curveVertex(95,-47.2);
    curveVertex(80,-44);
    curveVertex(65,-47.2);
    curveVertex(50,-59.3);
    curveVertex(43,-80);
    curveVertex(80,-55);
    curveVertex(117,-80);
     curveVertex(130,-120);
    endShape();

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [May 27, 2020, 11:09pm UTC](https://discourse.processing.org/t/shape-drawing-guidance-how-to-draw-symmetric-filled-curves/21352/2 "2020-05-27T23:09:55Z")

</div>

Hi,

I think the best way is to use [`bezierVertex()`](https://processing.org/reference/bezierVertex_.html) because [`curveVertex()`](https://processing.org/reference/curveVertex_.html) does the following :

> The first and last points in a series of **curveVertex()** lines will be used to guide the beginning and end of a the curve.

Here is a simple example where you have a function `drawEye()` (remember that defining functions is a better way of programming because then if you need to change the location and the size of your eyes for any reason, it’s super easy as changing parameters 😉 ) that does the job with bezier curves (you have an `angle` parameter to control the shape of the eye) :

```auto
void setup(){
  size(500, 500);
}

void draw(){
  background(255);
  
  int eyeAngle = int(map(mouseX, 0, width, 0, 100));
  
  drawEye(width/2 - 110, height/2, 200, 100, eyeAngle);
  drawEye(width/2 + 110, height/2, 200, 100, eyeAngle);
}

void drawEye(int x, int y, int w, int h, int angle){
  noFill();
  
  // DEBUG ------------------------------------------
  //Control points
  stroke(255, 150, 0);
  strokeWeight(2);
  //Up
  line(x - w/2, y, x - w/2 + angle, y - h/2);
  line(x + w/2, y, x + w/2 - angle, y - h/2);
  
  //Down
  line(x - w/2, y, x - w/2 + angle, y + h/2);
  line(x + w/2, y, x + w/2 - angle, y + h/2);
  
  // Points
  strokeWeight(10);
  point(x - w/2 + angle, y - h/2);
  point(x + w/2 - angle, y - h/2);
  point(x - w/2 + angle, y + h/2);
  point(x + w/2 - angle, y + h/2);
  // END DEBUG ----------------------------------------
  
  //Bezier curves
  stroke(0);
  strokeWeight(1);
  
  beginShape();
  vertex(x - w / 2, y); // Left point
  // Up curve
  bezierVertex(x - w/2 + angle, y - h/2, x + w/2 - angle, y - h/2, x + w/2, y);
  // Down curve
  bezierVertex(x + w/2 - angle, y + h/2, x - w/2 + angle, y + h/2, x - w/2, y);
  endShape();
}

```

![Capture d’écran de 2020-05-28 01-10-12](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/21ac33beb9dce09fee5ae3b237353a474d7a0743.png)

PS: The code is a little bit inefficient because it’s computing the point coordinates multiple times. You can either pre compute them or encapsulate everything in a class. 😉