Trouble with box transparency

I am drawing boxes with color from 0-255 with the same value for alpha. It appears that each box being drawn is only visible from certain angles. The images show the sketch rotating to the left and as it rotates the boxes on the interior of the full cube become visible.

Does anyone know why the boxes aren’t being fully drawn at every angle and how to correct this?

I’m not sure if it is necessary, but it may help to see my code.


int n = 75;
int nstep = 200;
int step = 0;
float D = 0.5;
float A = 1.3;

float cellSize;

float[][][] curr, next;

float thetaX, thetaY;
float rspeed = 1;

void setup() {
  size(600, 600, P3D);
  noStroke();

  cellSize = width / (float)n;
  curr = new float[n][n][n];
  next = new float[n][n][n];

  // init system 
  for (int i = 0; i < n; i++) {
    for (int j = 0; j < n; j++) {
      for (int k = 0; k < n; k++) {
        curr[i][j][k] = 0.1*(2*random(1)-1);
      }
    }
  }

  thetaX = -PI/6;
  thetaY = PI/5;
}

void draw() {
  background(31);
  step++;
  if (step >= nstep) {
    noLoop();
  }

  for (int i = 0; i < n; i++) {
    for (int j = 0; j < n; j++) {
      for (int k = 0; k < n; k++) {
        int ir = pbc(i+1, n);
        int il = pbc(i-1, n);
        int ju = pbc(j+1, n);
        int jd = pbc(j-1, n);
        int kf = pbc(k+1, n);
        int kb = pbc(k-1, n);

        // calculate the activity in the von neumann environment 
        float A1 = 0;                             // nearest neighbors
        A1 += curr[ir][j][k]+curr[il][j][k];      // x
        A1 += curr[i][ju][k]+curr[i][jd][k];      // y
        A1 += curr[i][j][kf]+curr[i][j][kb];      // z

        // calculate the activity in the moore environment 
        float A2 = 0;                             // next nearest     
        A2 += curr[i][ju][kb]+curr[i][jd][kb];    // k--
        A2 += curr[il][j][kb]+curr[ir][j][kb]; 
        A2 += curr[ir][ju][k]+curr[ir][jd][k];    // k
        A2 += curr[il][ju][k]+curr[il][jd][k]; 
        A2 += curr[i][ju][kf]+curr[i][jd][kf];    // k++
        A2 += curr[il][j][kf]+curr[ir][j][kf]; 

        next[i][j][k] = F(A1, A2, i, j, k);
      }
    }
  }

  // update and draw
  pushMatrix();
  thetaY -= radians(rspeed);
  //thetaX -= radians(rspeed);

  translate(width/2, height/2, -width*4/3);
  rotateX(thetaX);
  rotateY(thetaY);
  int off = -n/2;
  for (int i = 0; i < n; i++) {
    for (int j = 0; j < n; j++) {
      for (int k = 0; k < n; k++) {
        curr[i][j][k] = next[i][j][k];

        color val = lerpColor(0, 255, (curr[i][j][k]+1)/2);
        fill(val, val < 25 ? 0 : val);
        pushMatrix();
        translate((i+off)*cellSize, (j+off)*cellSize, (k+off)*cellSize);
        box(cellSize);
        popMatrix();
      }
    }
  }
  popMatrix();
}

// formula from book for segregation
float F(float A1, float A2, int i, int j, int k) {
  int todo; // This is going to change. This needs to change
  return (float)(A*Math.tanh(curr[i][j][k]) + D*(A1/6 + A2/12 - curr[i][j][k]));
}

// periodic boudnary conditions
int pbc(int i, int n) {
  return (i+n)%n;
}

void keyReleased() {
  if (key == ' ') {
    saveFrame("#####.png");
  }
}
1 Like

I‘ve had this exact same problem some time ago, and recently i tried to find a solution again (probably already did that the first time too…) because i wanted to try it again… but in the end i had to give up… :disappointed_relieved:

I‘m also not sure what causes the problem, but i‘m pretty sure it‘s got something to do with the calculations in 3D environments…

I‘ve also though about trying to do those calculations myself and display the result as a 2D Image, but… that‘s way too much work…

As a side note, that also happens if you use points instead of boxes in 3D…

1 Like

possibly not related, but you play with any of this?
https://processing.org/reference/hint_.html

//  hint(DISABLE_DEPTH_TEST);
//  hint(DISABLE_DEPTH_SORT);
//  hint(DISABLE_DEPTH_MASK);

//  hint(ENABLE_DEPTH_TEST);
//  hint(ENABLE_DEPTH_SORT);
//  hint(ENABLE_DEPTH_MASK);

1 Like

It’s related to using transparency. Not sure how to fix it though, I tried with those hints and it just makes it extremely slow (like one frame in 30 seconds).

But since you are setting alpha to 0 in some cases, you may as well just not draw those items…

        float alpha = (curr[i][j][k]+1)/2;
        if (alpha > 0.1) {
          fill(lerpColor(#FF0000, #FFFFFF, alpha));
          pushMatrix();
          translate((i+off)*cellSize, (j+off)*cellSize, (k+off)*cellSize);
          box(cellSize);
          popMatrix();
        }

Also, I wouldn’t compare an integer to a color like that even if it works, because it’s not clear and might lead to unexpected results. For example:

println(color(0, 128));
println(color(255));
println(color(0));
println(lerpColor(0, 255, 0.0));
println(lerpColor(0, 255, 0.5));
println(lerpColor(0, 255, 1.0));

-2147483648
-1
-16777216
0
128
255

3 Likes

It‘s cause if you have multiple shapes/points in 3D with non-max Alpha.

For some reason, if they are seen from a certain angle, they tend to ignore that they are drawn with a non-max alpha value and just show all they have, which then is seen through other shapes that adhere to the alpha values…