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

nootropickint

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?

GoToLoop

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! ^#(^

nootropickint

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?

Chrisir

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
//

nootropickint

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)

quark

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

nootropickint

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?

Chrisir

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

quark

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");
}

nootropickint

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!

GoToLoop

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

nootropickint

Anyway, how to set the peasycam center?

quark

Anyway, how to set the peasycam center?

I don't think its possible.

Chrisir

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?

quark

@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.

Chrisir

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?

quark

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.