# Drawing inside the box()

**URL:** <https://discourse.processing.org/t/drawing-inside-the-box/23133>\
**Category:** Coding Questions\
**Created:** [August 8, 2020, 9:24am UTC](https://discourse.processing.org/t/drawing-inside-the-box/23133 "2020-08-08T09:24:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nokkoran](https://avatars.discourse-cdn.com/v4/letter/n/a87d85/32.png) [@nokkoran](https://discourse.processing.org/u/nokkoran)\
**Post date:** [August 8, 2020, 9:24am UTC](https://discourse.processing.org/t/drawing-inside-the-box/23133/1 "2020-08-08T09:24:17Z")

</div>

```auto
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…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 8, 2020, 10:15am UTC](https://discourse.processing.org/t/drawing-inside-the-box/23133/2 "2020-08-08T10:15:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 12, 2020, 10:14am UTC](https://discourse.processing.org/t/drawing-inside-the-box/23133/3 "2020-08-12T10:14:48Z")

</div>

Could you please show your version?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 15, 2020, 12:19am UTC](https://discourse.processing.org/t/drawing-inside-the-box/23133/4 "2020-08-15T00:19:08Z")

</div>

> [@Chrisir](#):
>
> BUT please use `noFill(); stroke(0);` before `box()` command to make it transparent

There is more to this than that.

There are these:

- [reference | p5.js](https://p5js.org/reference/#/p5/noFill)  
`noFill() disables filling geometry.`

- [learn | p5.js](https://p5js.org/learn/color.html)

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

- [reference | p5.js](https://p5js.org/reference/#/p5/fill) Does not have a good example. See above!

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/733fbf163f767524fb84ca79f4ff542aec6fdd66.png)

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!

`:)`