# Filling complex shape - followup

**URL:** https://discourse.processing.org/t/filling-complex-shape-followup/21140
**Category:** Coding Questions
**Created:** [May 21, 2020, 4:16pm UTC](https://discourse.processing.org/t/filling-complex-shape-followup/21140 "2020-05-21T16:16:04Z")
**Posts on this page:** 4
**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 21, 2020, 4:16pm UTC](https://discourse.processing.org/t/filling-complex-shape-followup/21140/1 "2020-05-21T16:16:04Z")

</div>

Please find my code below. Trying to create a lip but it cuts halfway for some reason, can someone please explain why?

int x = 100;  
fill(255,0,0);  
beginShape();

curveVertex(-20+x,80);  
curveVertex(30+x,90);  
curveVertex(80+x,90);  
curveVertex(140+x,80);  
curveVertex(80+x,120);  
curveVertex(30+x,120);  
curveVertex(-20+x,80);  
//vertex(20+x,65);  
//bezierVertex(20+x,75, 100+x, 75,100+x,65);  
//bezierVertex(20+x,70, 100+x, 70, 20+x,65);  
// etc;  
endShape();

```auto

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 21, 2020, 5:30pm UTC](https://discourse.processing.org/t/filling-complex-shape-followup/21140/2 "2020-05-21T17:30:56Z")

</div>

Hello,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

Your related post is here:

> [@Filling complex shapes](https://discourse.processing.org/t/filling-complex-shapes/21139):
>
> How do we fill in a complex circular shape like a lip? ie [image] I know how to draw the Bezier/curve lines but how do we fill in 2 Bezier curves that join at 2 vertices?

This is my first time using curveVertex() as well.  
Read the reference carefully:

> **[curveVertex() / Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…

I added the first and last guide points:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38ac48377ee82281e417a454b25cfdadd0b6d44a.png)

I also plotted the points to see where they were.

This may not be the result you are expecting.

Consider:

- Multiple shapes.
- Overlapping shapes with background over shape
- There may be other creative solutions out there.

`:)`

---

<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 21, 2020, 7:40pm UTC](https://discourse.processing.org/t/filling-complex-shape-followup/21140/3 "2020-05-21T19:40:58Z")

</div>

Thanks! It works alright, I’m trying to interpolate between two values to animate lip movements. But that’s doesn’t work, any ideas how to? I’m using Lerp to recalculate vertex points and applying curveVertex repeatedly until the final value is reached

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 21, 2020, 7:56pm UTC](https://discourse.processing.org/t/filling-complex-shape-followup/21140/4 "2020-05-21T19:56:27Z")

</div>

Hello,

Mostly a hint for helping you develop code:

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

void draw()
  {
  background(0);  
    
  // Flipped the y axis
  scale(1, -1);
  translate(200, -height);
    
  //Useful tool:
  float x = map(mouseX, 0, width, -50, 50);  
  float y = map(mouseY, 0, height, -50, 50);      
    
  // Your original shape with missing half and x and y offsets added.
  fill(255, 255, 0);
  noStroke();
  beginShape();
 
  curveVertex(-20+x,80);
  curveVertex(30+x,90+y);
  curveVertex(80+x,90);
  curveVertex(140+x,80+y);
  curveVertex(80+x,120);
  curveVertex(30+x,120);
  curveVertex(-20+x,80);
  
  endShape(CLOSE); 
  }

```

I did not add missing guide points.

Please edit your original post and format your code properly.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7df4a7a4ba88613dcd1b441daa45687ae10f7de7.png)

`:)`
