Create a wall made of cube

[Bapoivre]

Hello,

I am having a hard time solving a problem.
To make it simple : I created a cube using quad, and I want to make a wall made of these cubes, so they have to all stick together.

Here is the code

float x1 = 0;
float y1 = 0;
float a = 25;
float x2 = x1 - 2*a;
float y2 = y1 - a;
float x3 = x1;
float y3 = y1 - 2*a;
float x4 = x1 + 2*a;
float y4 = y1 - a;
 
float a1 = x1;
float b1 = y1;
float a2 = a1;
float b2 = b1 + 50;
float a3 = a2+50;
float b3 = b2 -25;
float a4 = a3;
float b4 = b3-50;
 
float n1 = a1;
float m1 = b1;
float n2 = a2;
float m2 = b2;
float n3 = x2;
float m3 = y2 + 50;
float n4 = x2;
float m4 = y2;


void setup(){
  size(800,800);
  smooth();
surface.setLocation(1000,0);
//noStroke();
stroke(0,0,0);
strokeWeight(0.1);
rectMode(CENTER);
}

void draw(){
 
background(255,255,255);
translate(400,400);
scale(1);

fill(100,100,100);
quad(x1,y1,x2,y2,x3,y3,x4,y4);
 
fill(150,0,180);
quad(a1,b1,a2,b2,a3,b3,a4,b4);
 
fill(100,0,0);
quad(n1,m1,n2,m2,n3,m3,n4,m4);

}

This creates a single cube
Do you have any idea of how I can solve this please so it makes a wall ? Thank you

[glv]

Hello,

Lots of resources here (tutorials, references, examples):
https://processing.org/

Take a look here:
https://processing.org/reference/createShape_.html

The last example plots a grid of points:
https://processing.org/reference/for.html
You can place a shape that you created at each point on a grid (wall).

I did this with one QUAD quickly with the references I provided:

:)

[clankill3r]

pushMatrix, translate and popMatrix might also be usefull.

[svan]

If you’re willing to use a 3D renderer you can use box() to get a cube instead of the long method that you used. The downside of this technique is that changing the fill color affects all sides of the box. If you had to have each side a different color then a PShape object using QUADS would be a possibility, but that’s also quite a bit of code. The following demo creates a box grid using nested ‘for’ loops with pushMatrix() and popMatrix(). In order to position the cubes, multiple translation calls are made, which change the origin from the top, left corner of the screen to wherever you code it to go. The problem is, each call to ‘translate’ is cumulative and is added on to the last translate call. Using the push/pop combination resets the origin after each row (like hitting the carriage return on an old typewriter). You can REM OUT the push/pop calls by adding ‘//’ in front of them to see what they do; they need to be left in for the cube wall to look correct. Just so you can see the difference between using ‘for’ loops and the manual method of adding each cube one by one, I am also including that method at the end, but I doubt that you’d ever want to use it because it’s a lot more work (and it’s only a 3x3 grid). It also demonstrates the use of push/pop as the grid is built row by row.

final int _numRows = 10;
final int _numCols = 10;

void boxGridByRow(int l, int t, int w) {
  stroke(0);
  rotateY(0.8);
  fill(255,0,0);
  for (int i = 0; i < _numRows; i++) {
    for (int j = 0; j < _numCols; j++) {
      int left = l + i*w;
      int top = t + j*w;
      pushMatrix();
      translate(left, top);
      box(w);
      popMatrix();     
    }
  }
}

void setup() {
  size(800, 700, P3D);
  background(209);
  boxGridByRow(200, 100, 50);
}

void draw() {
}

Manual method below (not recommended):

void boxGridManual(int x, int y, int w) {  // 3x3 grid
  stroke(0);
  rotateY(0.8);
  // row 1
  pushMatrix();
  translate(x, y);
  box(w);
  translate(w, 0);
  box(w);
  translate(w, 0);
  box(w);
  popMatrix();
  // row 2
  pushMatrix();
  translate(x, y + w);
  box(w);
  translate(w, 0);
  box(w);
  translate(w, 0);
  box(w);
  popMatrix();
  // row 3
  pushMatrix();
  translate(x, y + 2*w);
  box(w);
  translate(w, 0);
  box(w);
  translate(w, 0);
  box(w);
  popMatrix();
}

void setup() {
  size(500, 400, P3D);
  background(209);
  boxGridManual(200, 100, 50);
}

void draw() {
}

Output from first method:

Second method:

A second method using a cube PShape in a grid allows for different colors of the cube sides. There is no need for push/pop with this method. Move the mouse to see the back side of the wall or make it stationary using a different rotateY(). Output is shown below source code.

PShape cube;

final int _numRows = 10;
final int _numCols = 10;

void createCubeShape(float w) {
  cube = createShape();
  cube.beginShape(QUADS);
  //back face - red
  cube.fill(255, 0, 0);
  cube.vertex(-w/2, -w/2, -w/2);
  cube.vertex(w/2, -w/2, -w/2);
  cube.vertex(w/2, w/2, -w/2);
  cube.vertex(-w/2, w/2, -w/2);
  //front face - yellow
  cube.fill(255, 255, 0);
  cube.vertex(-w/2, -w/2, w/2);
  cube.vertex(w/2, -w/2, w/2);
  cube.vertex(w/2, w/2, w/2);
  cube.vertex(-w/2, w/2, w/2);
  //side face - green
  cube.fill(0, 255, 0);
  cube.vertex(-w/2, -w/2, -w/2);
  cube.vertex(-w/2, -w/2, w/2);
  cube.vertex(-w/2, w/2, w/2);
  cube.vertex(-w/2, w/2, -w/2);
  //side face - blue
  cube.fill(0, 0, 255);
  cube.vertex(w/2, -w/2, w/2);
  cube.vertex(w/2, -w/2, -w/2);
  cube.vertex(w/2, w/2, -w/2);
  cube.vertex(w/2, w/2, w/2);
  cube.endShape();
}

void cubeGrid(int l, int t, int w) {
  for (int i = 0; i < _numRows; i++) {
    for (int j = 0; j < _numCols; j++) {
      int left = l + i*w;
      int top = t + j*w;
      shape(cube, left, top);
    }
  }
}

void setup() {
  size(800, 800, P3D);
  createCubeShape(50);
}

void draw() {
  background(255);
  stroke(0);
  translate(200, 100, -100);
  float rot = map(mouseX, 0, width, 0, TWO_PI);
  rotateY(rot); // wall moves with mouseX
 // rotateY(0.8);  // Use instead of two lines above if you don't want wall to move
  cubeGrid(0, 0, 50);
}