# Create a box with different colored sides

**URL:** <https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792>\
**Category:** Coding Questions\
**Created:** [September 15, 2022, 11:26pm UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792 "2022-09-15T23:26:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![heylittlechef](https://avatars.discourse-cdn.com/v4/letter/h/bc79bd/32.png) [@heylittlechef](https://discourse.processing.org/u/heylittlechef)\
**Post date:** [September 15, 2022, 11:26pm UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792/1 "2022-09-15T23:26:13Z")

</div>

Hi! I’m just starting out and want to make a box with different colored sides. Any tips?

---

<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:** [September 16, 2022, 12:06am UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792/2 "2022-09-16T00:06:07Z")

</div>

Hello,

Take a look at the examples that come with Processing.

This one came to mind:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/5/65c7f40ca5c49fe1c4d7c57c0034338e5384ccea.png)

`:)`

---

<div class="post-metadata">

**Author:** ![heylittlechef](https://avatars.discourse-cdn.com/v4/letter/h/bc79bd/32.png) [@heylittlechef](https://discourse.processing.org/u/heylittlechef)\
**Post date:** [September 16, 2022, 4:09am UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792/3 "2022-09-16T04:09:25Z")

</div>

Thank you so much! I tried checking it out but it’s even too advanced for me.

Check out this project I started…

> **[Stacks - Remy - OpenProcessing](https://openprocessing.org/sketch/1649135)**

I really just want to be able to change the side colors of each box.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 16, 2022, 7:10am UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792/5 "2022-09-16T07:10:14Z")

</div>

Hi @heylittlechef,

you can use the mybox function from below… (even if you initially maybe think it would be too advanced, give it a try)

Cheers  
— mnse

```auto
function setup() {
  createCanvas(600, 600, WEBGL);
}

function draw() {
  background(128);
  for (let y = -200; y <= 200; y += 200) {
    for (let x = -200; x <= 200; x += 200) {
      mybox(
        createVector(x, y, 0), // position (x,y,z)
        [50, 50, 50], // scaling (x,y,z)
        [
          color(255, 0, 0), // color front
          color(0, 255, 0), // color right
          color(0, 0, 255), // color back
          color(255, 0, 255), // color left
          color(255, 255, 0), // color bottom
          color(0, 255, 255), // color top
        ]
      );
    }
  }
}

function mybox(position, scl, colors) {
  push();
  translate(position);
  scale(scl);
  // rotateX(frameCount / 50.);
  // rotateY(frameCount / 100.);
  noStroke();
  // front quad
  fill(colors[0]);
  beginShape();
  vertex(-1, 1, 1);
  vertex(1, 1, 1);
  vertex(1, -1, 1);
  vertex(-1, -1, 1);
  endShape();

  // right quad
  fill(colors[1]);
  beginShape();
  vertex(1, 1, 1);
  vertex(1, 1, -1);
  vertex(1, -1, -1);
  vertex(1, -1, 1);
  endShape();

  // back quad
  fill(colors[2]);
  beginShape();
  vertex(1, 1, -1);
  vertex(-1, 1, -1);
  vertex(-1, -1, -1);
  vertex(1, -1, -1);
  endShape();

  // left quad
  fill(colors[3]);
  beginShape();
  vertex(-1, 1, -1);
  vertex(-1, 1, 1);
  vertex(-1, -1, 1);
  vertex(-1, -1, -1);
  endShape();

  // bottom quad
  fill(colors[4]);
  beginShape();
  vertex(-1, 1, -1);
  vertex(1, 1, -1);
  vertex(1, 1, 1);
  vertex(-1, 1, 1);
  endShape();

  // top quad
  fill(colors[5]);
  beginShape();
  vertex(-1, -1, -1);
  vertex(1, -1, -1);
  vertex(1, -1, 1);
  vertex(-1, -1, 1);
  endShape();
  pop();
}

```

 ![canvas](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/0/b07072394b152a4c8f631a3ce171a59b06381d95.png)

---

<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:** [September 16, 2022, 10:24am UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792/6 "2022-09-16T10:24:40Z")

</div>

> [@heylittlechef](#):
>
> Thank you so much! I tried checking it out but it’s even too advanced for me.

Start simple and build on that…

A few sides to get you started:

```auto
function setup() 
  {
  createCanvas(400, 400, WEBGL);
  }

function draw() 
  {
  fill(0, 255, 0);
  beginShape()
  vertex(-50, 50, -50);
  vertex( 50, 50, -50);
  vertex( 50, -50, -50);
  vertex(-50, -50, -50);
  endShape()
      
  fill(255, 255, 0);
  beginShape()
  vertex(-50, 50, -50);
  vertex( 50, 50, -50);
  vertex( 50, 50, 50);
  vertex(-50, 50, 50);
  endShape()
    
  fill(255, 0, 0);
  beginShape()
  vertex(-50, -50, -50);
  vertex( 50, -50, -50);
  vertex( 50, -50, 50);
  vertex(-50, -50, 50);
  endShape()
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/6/26bd4826a669ae30d932fac45043f1dbd7657d58.png)

References:  
[https://p5js.org/reference/#/p5/beginShape](https://p5js.org/reference/#/p5/beginShape)  
[https://p5js.org/reference/#/p5/vertex](https://p5js.org/reference/#/p5/vertex)

`:)`