So I'm a total noob when it comes to working with Processing and CSS.  I want to create a sketch that fills the whole browser window, and I'm assuming the best way to accomplish this is to somehow pass the size of the div to the sketch via param .  How would I go about doing this?

Hey all,  hope I'm posting this in the right spot.  I'm trying to make a series of planes in 3D with varying alpha levels.  When viewed from one side you can see the planes through each other, but from the other the planes with the lowest alpha level cover up the other planes entirely.  I know that changing the order in which they're drawn does change how the transparency looks, but I'd like to be able to see through all the planes from both sides.

The main .pde:

1. /*
     Cool shape thingie made of planes
     created via basic 'for' loop
   */
   
   import processing.opengl.*;
   HoloRect[] holo = new HoloRect[3];
   
   void setup(){
     size(640,368,OPENGL);
     //hint(DISABLE_DEPTH_TEST);
     colorMode(RGB,1);
     frameRate(60);
    
     holo[0] = new HoloRect(color(1,0,0),-50,0,0,10,0);
     holo[1] = new HoloRect(color(0,1,0),0,0,0,10,0);
     holo[2] = new HoloRect(color(0,0,1),50,0,0,10,0);
    
   }
   
   void draw(){
    
     background(0);
     /* Compass
     stroke(1,0,0);
     line(0,0,0,5,0,0);
     stroke(0,1,0);
     line(0,0,0,0,5,0);
     stroke(0,0,1);
     line(0,0,0,0,0,5);
     */
    
     //camera stuff
   
     beginCamera();
     camera(0,map(mouseY,0,300,40,-40),-75,0,0,0,0,-1,0);
     endCamera();
     for(int i = 0; i<3; i++){
       holo[i].rot(frameCount*0.0160);
       holo[i].display();
     }
   }
   

The class for the planes:

1. class HoloRect {
     color col, oldCol;
     float x, y, z, s, r;
   
     HoloRect() {
       col = color(255,255,255);
       oldCol = col;
       x = 0;
       y = 0;
       z = 0;
       s = 1;
       r = 0;
     }
   
     HoloRect(color c, float tX, float tY, float tZ, float tS, float tR) {
       col = c;
       oldCol = c;
       x = tX;
       y = tY;
       z = tZ;
       s = tS;
       r = tR;
     }
   
     void rot(float tR) {
       r = tR;
     }
   
     void trans(float tX, float tY, float tZ) {
       x = tX;
       y = tY;
       z = tZ;
     }
   
     void newCol(color nC) {
       oldCol = col;
       col = nC;
     }
   
     void display() { 
       //Matrix application
       pushMatrix();
       translate(x,y,z);
       scale(s);
       rotateY(r);
   
       //Top plane
       stroke(col);
       strokeWeight(2);
       fill(0,255);
       beginShape();
       vertex(-1,0,-1);
       vertex(-1,0,1);
       vertex(1,0,1);
       vertex(1,0,-1);
       endShape(CLOSE);
       //Lower planes
       for(float i = -1.8; i<0; i+=0.2) {
         noStroke();
         fill(col,map(i,-1.8,-0.2,0.1,0.9));
         beginShape();
         vertex(-1,i,-1);
         vertex(-1,i,1);
         vertex(1,i,1);
         vertex(1,i,-1);
         endShape(CLOSE);
       }
       popMatrix();
     }
   }
   
   

Any and all help would be much appreciated, thanks!

-Chris

ChrisLangfordDesign
www.chrislangford.com

Hey all, relatively new guy here.  I've been playing around with 3D environments in Processing using OCD to control the camera.  What I want to do is overlay an image on top of the 3D view to frame it, and I figured the easiest way to do this would be to create a PGraphic of the 3D view and display the image on top of it.  However, when trying to use the OCD cameras within beginDraw(), it tells me the camera "cannot be resolved or is not a field".  Here's the code:

2. import damkjer.ocd.*;
3. 
   
4. PGraphics viewport;
5. public Camera cam;
6. 
   
7. void setup(){
8.   size(400,400);
9.   viewport = createGraphics(400,400,P3D);
10.   cam = new Camera(this, 0,0,50,0,0,0);
11. }
12. 
    
13. void draw(){
14.   viewport.beginDraw();
15.   viewport.background(255);
16.   viewport.box(50);
17.   viewport.cam.feed();
18.   viewport.endDraw();
19.   image(viewport, 0,0);
20. }