Drawing inside the box()

function setup() {
  createCanvas(400, 400, WEBGL);

function draw() {
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);


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…


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



Could you please show your version?

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:

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