Need help with fill() on Bezier

p5.js Coding Questions
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
2

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
3

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

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

7

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

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

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

12

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

13

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

https://editor.p5js.org/sudev.kiyada@gmail.com/sketches/BtxBqfGSM

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.

15

Thanks mate ! Apologies for not showing errors.

16

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.
1 Like
17

Thanks mate. Will try that out.