Create a box with different colored sides

p5.js Coding Questions
1

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

2

Hello,

Take a look at the examples that come with Processing.

This one came to mind:

image
image252×625 16.7 KB

:)

1 Like
3

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

Check out this project I started…

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

1 Like
5

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

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
canvas600×600 1.88 KB

1 Like
6

Start simple and build on that…

A few sides to get you started:

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

References:
https://p5js.org/reference/#/p5/beginShape
https://p5js.org/reference/#/p5/vertex

:)

1 Like