Shape Drawing Guidance - how to draw symmetric filled curves?

[rkk16]

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:

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

[josephh]

Hi,

I think the best way is to use bezierVertex() because curveVertex() 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) :

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();
}

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.