Need help with fill() on Bezier

#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.