3D boxes - OpenProcessing

mySketch
Cube
matrices
pal
xxxxxxxxxx
 
// such messy code ^^
// main idea when in PLOTTER2D (which is 2d mode) is to project 3D to 2D
// collect all faces in area[], sort them and render them
// main goal -> plotter outlines
​
const NUM = 3, PLOTTER2D = false;
let S, pal;
let boxes = [];
​
function setup() {
  createCanvas(windowWidth, windowHeight, PLOTTER2D ? P2D : WEBGL);
  frameRate(30);
  noStroke();
  S = min(width, height) / NUM / 1.5; // console.log(S);
  pal = palettes[0];
  randomSeed(~~random(hour()+minute()+second()));
  // test3D()
}
​
function test3D() {
  let pts = []; 
  pts.push([100, 0, 0]);
  // pts.push([0, 1, 0]);
  // pts.push([0, 0, 1]);
  
  const cam = [0, 0, 300];
  
  for (let a = 0; a < TWO_PI; a += TWO_PI/5) {  
    let verticies = new VertDims(pts);
    verticies.rotate_x(1);
    verticies.rotate_y(2);
    verticies.rotate_z(a);
    verticies.add([0, 0, 0]);
    const proj2D = camPrj(cam, verticies.pts); // verticies.project2D(1);
    const len = sqrt(verticies.pts[0][0]*verticies.pts[0][0]+verticies.pts[0][1]*verticies.pts[0][1]+verticies.pts[0][2]*verticies.pts[0][2])
    console.log("--- " + a + " len: " + len); 
    console.log(verticies.pts);
    console.log(proj2D)
    console.log(verticies.project2D(200))
  }
}
​
function draw() {
  background(2, 2, 12);
  if (PLOTTER2D) translate(width/2, height/2);
  if (!PLOTTER2D) lights();
  if (!PLOTTER2D) pointLight(color(255, 192+32*sin(frameCount/23), 192+32*cos(frameCount/32)), sin(frameCount/123)*S, -2*S, 2*S);
  
  if (!PLOTTER2D) specularMaterial(255);
  if (!PLOTTER2D) shininess(100);
  
  boxes = [];
  areas = [];
  for (let j = 0; j < NUM; j++) { 
    const y = (j-(NUM-1)/2)*S;
    for (let i = 0; i < NUM; i++) { 
      const x = (i-(NUM-1)/2)*S;
      push();
        const z = noise(width+x, height+y, frameCount/64) * S*10;
        const rotX = (noise((width+x)*10, (height+y)*10, frameCount/96)-0.5) * PI;
        const rotY = (noise((height+y)*10, (width+x)*10, frameCount/96)-0.5) * PI;
        if (!PLOTTER2D) { 
          translate(x, y, -S*4 + z);
          rotateX(rotX)
          rotateY(rotY)
        }
​
        const n = noise(width+x, height+y)
        fill("pink"); if (~~(n*10) % 2 === 0) fill("steelblue");
        const clr = pal[~~(noise(12 + x*S, 23 + y*S)*pal.length)];
        fill(clr)
        if (!PLOTTER2D) box(S * 0.9, S * 0.9, S * n); // render 3D
        const a = 2.1 + frameCount/123;
        const bx = {
          pos: {x: x*11, y: y*11, z: -S*23 + z*1.4}, // {x: 0, y: 0, z: -4000},
          sze: {x: S * 0.9, y: S * 0.9, z: S * n}, // {x: S, y: S, z: S}, // 
          rot: {x: rotX, y: rotY, z: 0},
          clr
        };
        const cube3D = new Cube(bx.pos, bx.sze, bx.rot, bx.clr); // VertDims(cube4D.project3D());
        const cam = [0, 0, -200]; // [0, 0, map(mouseX, 0, width, -400, 400)]
        if (PLOTTER2D) cube3D.show(cam); // render 2D
        boxes.push(bx);
      pop();
    }
  }
  
  // in 2D sort all faces of cubes
  if (PLOTTER2D) {
    areas.sort((a, b) => a.az - b.az);
    for (let ar of areas) {
      fill(ar.clr)
      beginShape();
      for (let i of ar.pts) {
        vertex(ar.proj2D[i][0], ar.proj2D[i][1]);
      }
      endShape(CLOSE);
    }
  }
  
  // if (PLOTTER2D) noLoop();
}
​
function mousePressed() {
  if (PLOTTER2D && mouseButton != RIGHT && mouseX > 0 && mouseX < width) {
    redraw(~~random(40, 120));
  }
}
​
function keyPressed() {
  if (key == "s" || key == "S") {
    saveSvg("epi_boxes3D.svg.txt");
  } // save svg
} // keyPressed()
​
function saveSvg(name = "epi") {
  console.log(boxes);
​
  push()
  translate(width/2, height/2);
  const pts = [];
  for (const bx of boxes) {
    // bx: {pos, sze, rot, clr}
    // each bx has 8 points
    const cube3D = new Cube(bx.pos, bx.sze, bx.rot, bx.clr); // VertDims(cube4D.project3D());
    cube3D.show(S/6);
    console.log(cube3D);
    // pts.push([x-img.width/2, y-img.height/2, p_h]);
    break;
  } // loop boxes
  pop();
  
  console.log(pts);
} // saveSvg()