P3D object asymmetric when created off center of window

bob97086 · June 2017

I'm creating a square grid in 3D with a slight x-axis tilt so the foreground edge is wider than the back edge. When created with a translation putting its midpoint at the window's width/2 point, the figure is symmetrical:

![](C:\Desktop\On center.png)

But when created with a smaller x-direction offset (to leave room on the right for future controlP5 controls) it looks like this:

![](C:\Desktop\Off center.png)

I'm sure this is a perspective issue. But I'm danged if I know how to fix it. Hints anyone?

bob97086 · June 2017

Obviously I also don't know how to annotate the "insert image" URL so my saved images get uploaded with the text. I don't see the proper markup in FAQs either. More help?

Chrisir · June 2017

Image upload: there are two different icons in the little command bar, try both

Chrisir · June 2017

It looks offset because it is moved left. There is no way to say let perspective center be at 400 or so

Work around: do the 3D into a PImage and display it at -200, 0

bob97086 · June 2017

Chrisir: Hey, you're right. The leftmost icon is 'file upload' which let me pick the image file I intended to show yesterday. Thus:

On center

The "off center" image is this:

Off center

bob97086 · June 2017

Chrisir #2: Thanks, I'll try your suggestion on how to offset the image from center.

Chrisir · June 2017

I am sorry, I guess I meant PGraphics, not PImage

https://www.processing.org/reference/PGraphics.html

PGraphics pg;

void setup() {
  size(100, 100);
  pg = createGraphics(40, 40);
}

void draw() {
  pg.beginDraw();
  pg.background(100);
  pg.stroke(255);
  pg.line(20, 20, mouseX, mouseY);
  pg.endDraw();
  image(pg, 9, 30); 
  image(pg, 51, 30);
}

kfrajer · June 2017

Check this:

https://processing.org/reference/camera_.html

default values are camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0).

Probably this could work for you: Set the center of your peak to be the center of the camera's center parameter.

Kf

jeremydouglass · June 2017

If you are trying to create offset P3D content and a control area or HUD then check out these discussions with examples:

The key to the layout is to create a P2D sketch (it needs to be OpenGL at the top level), then create a P3D PGraphics for your 3D layout element, then create a JAVA2D PGraphics for your controls layout element.

Chrisir · June 2017

looking at kfrajers idea: it's nice.

could work.

even move both center and position to the left?

Chrisir · June 2017

step 1

void setup() {
  size(1250, 850, P3D);
  background(255);
  smooth();
} 

void draw() {   
  background(255);
  translate (width/2-200, height/2+144); 
  box(66);
}

step 2

not really....

float offsetX = 500; 

void setup() {
  size(1250, 850, P3D);
  background(255);
  smooth();
} 

void draw() {   
  background(255);
  if (true)
    camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), 
      width/2.0-offsetX, height/2.0, 0, 
      0, 1, 0);
  translate (width/2-offsetX, height/2+144); 
  box(66);
}

kfrajer · June 2017

This was my idea. You get the asymmetry due to the projection of the camera. You could just draw the figure at 0,0 and you do not need to do any of these camera adjustments.

Kf

final int len=66;
final int n=5;
final int MAXVIEWS=3;  //Different camera positions

//VIEW0: default
//VIEW1: Centered at 0,0,0
//VIEW2: Centered right on box on top of the stacked box set 

//Sphere indicates a relative 00,0,0 coordiante point 

float offsetX = -500; 
int chNow=0;


void setup() {
  size(1600, 800, P3D);
  background(255);
  smooth();
} 

void draw() {   
  background(255);

  if (chNow==0){
     camera();
    //camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0).
  }
  if (chNow==1)  {
    camera(width/2.0, height/2.0-len*n, (height/2.0) / tan(PI*30.0 / 180.0), 
      width/2.0, height/2.0, 0, 
      0, 1, 0);
  }
  if(chNow==2) {
   camera(width/2.0, height/2.0-len*n, (height/2.0) / tan(PI*30.0 / 180.0), 
      width/2.0+offsetX, height/2.0, 0, 
      0, 1, 0);
  }

  pushMatrix();
  translate (0, height/2, -height/2);
  drawGrid(width/50,50, 50, 1);
  translate(width/2,0,height/2);
  sphere(50);
  popMatrix();

  translate (width/2+offsetX, height/2, 0);

  box(len);

  for (int i=1; i<n; i++) {
    translate (0, -len, 0); 
    box(len);
  }
}

void mouseReleased() {
  chNow=(chNow+1)%MAXVIEWS;
  surface.setTitle("Current "+chNow);
}

// -------------------------------------------------------
void drawAxis(float len) {
  drawAxis(len, len, len);
}


// -------------------------------------------------------
void drawAxis(float len1, float len2, float len3) {

  pushStyle();
  strokeWeight(3);

  stroke(255, 0, 0);  //RED
  line(0, 0, 0, len1, 0, 0);

  stroke(0, 255, 0);  //GREEN
  line(0, 0, 0, 0, len2, 0);

  stroke(0, 0, 255);  //BLUE
  line(0, 0, 0, 0, 0, len3);

  popStyle();
}

// -------------------------------------------------------
// @Args:  Plane: 0=YZ  1=XZ  2=XY 
void drawGrid(int size, int w, int h, int plane) {
  pushStyle();
  noFill();
  if (plane == 0) stroke(255, 0, 0);
  if (plane == 1) stroke(0, 255, 0);
  if (plane == 2) stroke(0, 0, 255);
  int total = w * h;
  int tw = w * size;
  int th = h * size;
  beginShape(LINES);
  for (int i = 0; i < total; i++) {
    int x = (i % w) * size;
    int y = (i / w) * size;
    if (plane == 0) {
      vertex(0, x, 0);
      vertex(0, x, th);
      vertex(0, 0, y);
      vertex(0, tw, y);
    }
    if (plane == 1) {
      vertex(x, 0, 0);
      vertex(x, 0, th);
      vertex(0, 0, y);
      vertex(tw, 0, y);
    }
    if (plane == 2) {
      vertex(x, 0, 0);
      vertex(x, th, 0);
      vertex(0, y, 0);
      vertex(tw, y, 0);
    }
  }
  endShape();
  popStyle();
}

Chrisir · June 2017

to be honest, I don't see how this would help the OP:

But when created with a smaller x-direction offset (to leave room on the right for future controlP5 controls) it looks like this:

He wants an offset to the left without changing the perspective

bob97086 · June 2017

Many thanks to all for these responses. It will take a while to read, understand and apply.

While searching the forums I found these potentially useful tips from codeanticode in November 2013 (Answers #3848 and #3915). The idea (as I understand it) is to do the P3D work offscreen then embed the image into the main work window which is created as P2D. It is the latter area where one would put controlP5 GUI elements.

This brings back memories of a long-ago project (I am a retired geezer-programmer) where off-screen graphics memory was used to build successive images subsequently "bit-blitted" into visible graphics addresses.

Chrisir · June 2017

yeah, I mentioned PGraphics above

bob97086 · June 2017

And now I see that the references given by jeremydouglass are later comments along the same lines as those earlier by codeanticode. Thanks again all.

jeremydouglass · June 2017

@bob97086 -- glad you are on the right track. Yes, the example code in my first link (above) should give you the configuration of PGraphics elements that you want if you use that kind of approach.

Howdy, Stranger!

Categories

In this Discussion

P3D object asymmetric when created off center of window

Best Answers

Answers