multiple view port (2D and 3D) inside the same sketch

edited August 2014 in How To...

Hi! I'd like to make a sketch where there are multiple viewport: for instance two of them in 3d (with peasy cam) and 2 in 2d. Do you have anny suggestion?

Answers

  • There are many ways to instantiate multiple PApplet apps:
    http://forum.processing.org/two/discussion/5840/eclipse-multiple-frames-avoid-null-frame-value-

    But doing the way described above, only 1 of them can use OpenGL though! ^#(^

  • right now I have multiple PApplet with the awt frame trick described but I'm looking for having only one windows with all the viewport inside..

    so OpenGL and multiple viewport.. do you have any advice? and what about the 2d? what are the "stand" camera parameters for the processing 2d drawing to set the OpenGL camera?

  • you can just display 2d and 3D content together

    Ellipse [] ellipses = new Ellipse [32]; 
    
    //circle
    int circleSize = 1;
    float angleBox1; 
    
    void setup() {
      size(600, 600, OPENGL);
      for (int i=1;i<32;i++) {
        ellipses[i] = new Ellipse(width/4, height/4, circleSize, color( 220, 0, 0 ));
        circleSize +=11;
      }
      background(111);
    }
    
    void draw() {
      background(111);
      lights();
    
      ortho();
      // also see hint(DISABLE_DEPTH_TEST) and hint(ENABLE_DEPTH_TEST)  
    
      hint(DISABLE_DEPTH_TEST); 
      int a = 9;
      noFill();
      stroke(255);
      float portsWidth = width/2-a-a; 
      rect (a, a, portsWidth, height/2-a);
      rect (width/2+a, a, portsWidth, height/2-a);
      rect (a, height/2+a, portsWidth, height/2-a-a);
      rect (width/2+a, height/2+a, portsWidth, height/2-a-a);
      for (int i=1;i<11;i++) {
        ellipses[i].draw();
      }
    
      hint(ENABLE_DEPTH_TEST);
      fill(244, 2, 2);
      pushMatrix();
      translate (width/4*3, 124);
      rotateY(13);
      rotateX(radians(angleBox1)); 
      box(21);
      angleBox1+=1;
      if (angleBox1>=360)
        angleBox1 = 0;
      popMatrix(); // ------------
    
      hint(DISABLE_DEPTH_TEST); 
      fill(0, 255, 0);
      rect (width/4*3, height/4 * 3, 39, 30);
    
      hint(ENABLE_DEPTH_TEST);
      fill(244, 2, 2);
      noStroke();
      ortho();
      pushMatrix();
      translate (width/4, height/4 * 3);
      // rotateY(13);
      // rotateX(radians(angleBox1)); 
      sphere(41);
      translate (34, 43);
      sphere(32);
      popMatrix(); // ------------
    }
    
    // ============
    class Ellipse {
    
      float x;
      float y;
      float size;
      color col;
    
      Ellipse(float x, float y, float size, color col) {
        this.x=x;
        this.y=y;
        this.size=size;
        this.col=col;
      }
    
      void draw() {
        stroke(col);
        noFill();   
        ellipse(x, y, size, size);
      }
    } // class
    //
    
  • that is very handy thanks

    the only things it is missing is the peasycam integration. to be easy: let say to apply the peasycam thing only to 1 viewport? (the one with the 2 spheres)

  • Use createGraphics to create a 2D or 3D buffer (viewports) draw into the viewports, then in the draw method use image to copy the viewport contents to the desired position in a P2D display

  • is it really working as if it is a real PApplet? no memory issues? anti-aliasing, etc? what about for peasycam? can it take also a PGraphics as input in the constructor?

  • In my sketch you can use peasycam

    In all the parts where you don't need it, apply beginHUD endHUD see its reference

    Quarks is better though since with mine you always have an angle (so I used ortho())

    Chrisir

  • I forgot about PeasyCam, for that you do need a PApplet because it must respond to mouse events and PGraphic won't do that.

    If you want to use multiple window it will be easier using the G4P library. The code below uses the default JAVA2D renderer for the main sketch wndow then creates 3 extra windows using P2D, P3D and OPENGL (with PeasyCam)

    import peasy.test.*;
    import peasy.org.apache.commons.math.*;
    import peasy.*;
    import peasy.org.apache.commons.math.geometry.*;
    
    import g4p_controls.*;
    
    GWindow window1, window2, window3;
    PeasyCam pcam;
    float angX, angY, angZ;
    
    public void setup() {
      size(480, 320);
      createGUI();
      customGUI();
    
      pcam = new PeasyCam(window2.papplet, 1000);
      pcam.setMinimumDistance(10);
      pcam.setMaximumDistance(2000);
      pcam.reset(1);
    }
    
    public void draw() {
      background(230);
      angX += 0.03;
      angY += 0.05;
      angZ += 0.07;
    }
    
    // Use this method to add additional statements
    // to customise the GUI controls
    public void customGUI() {
    }
    
    
    synchronized public void win_draw1(GWinApplet appc, GWinData data) { //_CODE_:window1:579996:
      appc.background(255);
      appc.translate(appc.width/2, appc.height/2);
      appc.stroke(0);
      appc.strokeWeight(2);
      appc.fill(0,200,0);
      appc.rotate(angZ);
      appc.ellipse(0,0,50,20);
    } //_CODE_:window1:579996:
    
    synchronized public void win_draw2(GWinApplet appc, GWinData data) { //_CODE_:window2:922597:
      appc.background(0);
      appc.perspective(PI/3.0, float(window2.papplet.width)/float(window2.papplet.height),   10.0, 5000);
      appc.stroke(255,255,0);
      appc.strokeWeight(2);
      appc.fill(160,0,0);
      appc.box(300);
    } //_CODE_:window2:922597:
    
    synchronized public void win_draw3(GWinApplet appc, GWinData data) { //_CODE_:window3:265654:
      appc.background(0);
      appc.translate(appc.width/2, appc.height/2);
      appc.stroke(255,255,0);
      appc.strokeWeight(2);
      appc.fill(0,0,160);
      appc.rotateX(angX);
      appc.rotateY(angY);
      appc.rotateZ(angZ);
      appc.box(30);
    } //_CODE_:window3:265654:
    
    
    public void createGUI(){
      G4P.messagesEnabled(false);
      G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
      G4P.setCursor(ARROW);
      if(frame != null)
        frame.setTitle("Sketch Window");
      window1 = new GWindow(this, "P2D", 20, 20, 240, 120, false, P2D);
      window1.addDrawHandler(this, "win_draw1");
      window2 = new GWindow(this, "OPENGL with PeasyCam", 300, 20, 240, 120, false, OPENGL);
      window2.addDrawHandler(this, "win_draw2");
      window3 = new GWindow(this, "P3D", 20, 200, 240, 120, false, P3D);
      window3.addDrawHandler(this, "win_draw3");
    }
    
  • Yes I've just found the G4P library in the internet but I'm already ok with more PApplet and the PFrame thing… thanks anyway, if some hacks ring a bell in your mind please write!

  • Don't forget that OPENGL = P3D in Processing 2+! L-)

  • Anyway, how to set the peasycam center?

  • Anyway, how to set the peasycam center?

    I don't think its possible.

  • edited August 2014

    When you have different PGraphics each is internally centered (it's small)

    Use pasycam on those PGraphics (or one of them)

    Then display 4 PGraphics like images

    Wouldn't that work?

  • @Chrisir unfortunately not, you must of missed me saying

    I forgot about PeasyCam, for that you do need a PApplet because it must respond to mouse events and PGraphic won't do that.

  • I see...

    Could he port peasycam so that it works on a PGrapics?

    Or write a simple version that takes mouse input and does some rotate to a PGraphics?

  • PeasyCam requires a PApplet object for its constructor when it is created so that it hooks into Processing's event thread. It would be possible to rewrite PeasyCam so that its rotation centre is moved to the centre of the 3D viewport.

    I remember a hack for using viewports but that was for 1.5.1 so wouldn't work. OpenGL supports viewports but AFAIK Processing's API doesn't expose that functionality.

Sign In or Register to comment.