Drawing inside the box()

p5.js Coding Questions
1 
function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(255);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  noStroke();
  fill(0);
  box(150);

}

I have this code and i want to add some points inside the box, the box will be transparent and it would look like points are moving in 3D…

2 Likes
2

The box is in 3D at 0,0,0

it also has a length of 150, so it’s from -75 to +75 at all sides.

now you can say stroke (255,0,0); point (-30,30,45); to place a point in 3D (point command is in itself able to be 3D; other than sphere); to place a sphere (which is better visible, especially with lights()) use pushMatrix, translate, noStroke fill sphere popMatrix (pseudo code).

BUT please use noFill(); stroke(0); before box() command to make it transparent

Chrisir

3 Likes
3

Could you please show your version?

4

There is more to this than that.

There are these:

Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another.

Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).

fill(gray, [alpha])  //For example in original post.

I just added an alpha to the code from original post and some transparent boxes inside:
image

Visually noFill() and alpha = 0 (0% opaque or 100% transparent) may look the same but they are not.

The topic needed more details and I provided references for others that may visit.

And that is that!

:)

1 Like