# Need help with fill() on Bezier

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

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

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

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

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

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

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

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

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

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:

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.
4. draw the result into your 3D space.
1 Like

Thanks mate. Will try that out.