# Need help with fill() on Bezier

**URL:** <https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 7:39pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603 "2019-04-24T19:39:36Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 24, 2019, 7:39pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/1 "2019-04-24T19:39:36Z")

</div>

For some reason/s, am unable to set fill to my Bezier (3D). Here’s my code :

```auto
  let p0 = createVector(0, 20, 0);
  let p1 = createVector(0, 0, 40);
  let p2 = createVector(0, -60, 0);
  let p3 = createVector(0, 0, -40);

  beginShape();
  vertex(p0.x, p0.y, p0.z);
  bezierVertex(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p2.x, p2.y, p2.z);
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p0.x, p0.y, p0.z);
  endShape();

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 10:26pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/2 "2019-04-24T22:26:51Z")

</div>

in Java Mode

```auto

size(700, 700, P3D); 

PVector p0 = new PVector(0, 20, 0);
PVector p1 = new PVector(0, 0, 40);
PVector p2 = new PVector(0, -60, 0);
PVector p3 = new PVector(0, 0, -40);

translate(width/2, height/2, -10);

rotateY(32); 

beginShape();
fill(255, 0, 0); 
vertex(p0.x, p0.y, p0.z);
bezierVertex(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p2.x, p2.y, p2.z);
bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p0.x, p0.y, p0.z);
endShape();

```

---

<div class="post-metadata">

**Author:** ![janglee](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/janglee/32/4035_2.png) [@janglee](https://discourse.processing.org/u/janglee)\
**Post date:** [April 25, 2019, 12:05pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/3 "2019-04-25T12:05:45Z")

</div>

Unlike java mode it is required to be called inside one of `draw` or `setup` functions.

```auto
function draw(){

  let p0 = createVector(0, 20, 0);
  let p1 = createVector(0, 0, 40);
  let p2 = createVector(0, -60, 0);
  let p3 = createVector(0, 0, -40);

  beginShape();
  vertex(p0.x, p0.y, p0.z);
  bezierVertex(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p2.x, p2.y, p2.z);
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p0.x, p0.y, p0.z);
  endShape();
} 
  

```

---

<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 25, 2019, 12:49pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/4 "2019-04-25T12:49:26Z")

</div>

and here no FILL problem:

```auto
function setup() {
  createCanvas(200, 200);
}

function draw(){
  background(200,200,0);
  translate(width/2,height/2);

  let p0 = createVector(0, 20, 0);
  let p1 = createVector(0, 0, 40);
  let p2 = createVector(0, -60, 0);
  let p3 = createVector(0, 0, -40);

  beginShape();
  fill(0,200,0);
  stroke(0,0,200);
  strokeWeight(2);
  vertex(p0.x, p0.y, p0.z);
  bezierVertex(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p2.x, p2.y, p2.z);
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p0.x, p0.y, p0.z);
  endShape(CLOSE);
} 
  

```

pls. note the CLOSE of shape and the fill inside beginShape

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 25, 2019, 1:03pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/6 "2019-04-25T13:03:54Z")

</div>

Am not able to apply Fill() to the shape when used in WEBGL mode.

---

<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 25, 2019, 1:07pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/7 "2019-04-25T13:07:23Z")

</div>

sorry, i could not see that, your code was not complete.  
pls post again.

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 25, 2019, 1:26pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/9 "2019-04-25T13:26:32Z")

</div>

```auto
function setup() {
  createCanvas(200, 200, WEBGL);
}

function draw(){
  background(200,200,0);
  translate(width/2,height/2);

  let p0 = createVector(0, 20, 0);
  let p1 = createVector(0, 0, 40);
  let p2 = createVector(0, -60, 0);
  let p3 = createVector(0, 0, -40);

  beginShape();
  fill(0,200,0);
  stroke(0,0,200);
  strokeWeight(2);
  vertex(p0.x, p0.y, p0.z);
  bezierVertex(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p2.x, p2.y, p2.z);
  bezierVertex(p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p0.x, p0.y, p0.z);
  endShape(CLOSE);
} 

```

---

<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 25, 2019, 1:55pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/10 "2019-04-25T13:55:38Z")

</div>

and? what is the problem?  
some more words might be good,  
like

- that is my actual code:
- when i run it ( processing IDE version 3.5.3 / online editor )  
windows / linux / browser?  
i get following ERROR

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 25, 2019, 2:10pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/11 "2019-04-25T14:10:20Z")

</div>

When I create the same shape in 3D (WEBGL mode), fill() isn’t working for that shape. Your code is in 2D.

---

<div class="post-metadata">

**Author:** ![janglee](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/janglee/32/4035_2.png) [@janglee](https://discourse.processing.org/u/janglee)\
**Post date:** [April 25, 2019, 4:17pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/12 "2019-04-25T16:17:30Z")

</div>

share your code or the link of sketch from [editor.p5js.org](http://editor.p5js.org).  
Or check out [https://www.youtube.com/watch?v=6TPVoB4uQCU](https://www.youtube.com/watch?v=6TPVoB4uQCU)

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 25, 2019, 4:49pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/13 "2019-04-25T16:49:05Z")

</div>

Here’s the link. Notice that shape isn’t getting filled.

[https://editor.p5js.org/sudev.kiyada@gmail.com/sketches/BtxBqfGSM](https://editor.p5js.org/sudev.kiyada@gmail.com/sketches/BtxBqfGSM)

---

<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 26, 2019, 12:55am UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/14 "2019-04-26T00:55:42Z")

</div>

ok, and i try it and i noticed it not get filled  
and also noticed that it show many

> You must first call texture() before using vertex() with image based u and v coordinates

errors, you think it’s not worth mention it?

ok, so looks like you are right, p5.js can not fill your “double” 3D-bezier thing.

while texture works usually also only on quad or triangle strip ( +lines? ), would mean any  
3D surface should be “filled” with that type of “grid”?

as @janglee with the video tip suggested start with the 3D primitives  
and possibly he can help you than with 3D surfaces.

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [April 26, 2019, 4:13am UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/15 "2019-04-26T04:13:35Z")

</div>

Thanks mate ! Apologies for not showing errors.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 29, 2019, 11:15pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/16 "2019-04-29T23:15:13Z")

</div>

Potential workaround if you are projecting a 2D image into 3D space and want a texture fill is:

1. try drawing your shape filled with texture on 2D Graphics / p5.Renderer
2. draw the Graphics into your 3D space.

If you have a shape that can’t be filled as geometry, but can be defined in 2D:

1. cover a 2D Graphics / p5.Renderer with your texture.
2. draw your silhouette (e.g. a stick figure) onto a separate graphics.
3. mask your texture image with your mask shape.
4. draw the result into your 3D space.

---

<div class="post-metadata">

**Author:** ![Sudev](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@Sudev](https://discourse.processing.org/u/Sudev)\
**Post date:** [May 5, 2019, 12:14pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603/17 "2019-05-05T12:14:43Z")

</div>

Thanks mate. Will try that out.