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

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

1 Like

in Java Mode

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

1 Like

Unlike java mode it is required to be called inside one of `draw`

or `setup`

functions.

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

1 Like

kll
4
and here no FILL problem:

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

1 Like

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

kll
7
sorry, i could not see that, your code was not complete.

pls post again.

Sudev
9
```
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);
}
```

kll
10
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

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

share your code or the link of sketch from editor.p5js.org.

Or check out https://www.youtube.com/watch?v=6TPVoB4uQCU

Sudev
13

kll
14
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.

Sudev
15
Thanks mate ! Apologies for not showing errors.

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

- try drawing your shape filled with texture on 2D Graphics / p5.Renderer
- 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:

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

1 Like

Sudev
17
Thanks mate. Will try that out.