[SOLVED] Draw static rect filling the screen infront of PeasyCam

The middle of the rect is static at the origin, where the camera is facing, and the rect shall also face the camera.
Lik if it's stuck on a stick infront of it.

ignore the text on the picture, it's the best i found
I want to know the coordinates of the corners so can not use camera.beginHUD() or popMatrix() to achieve this since this doesn't give me any coordinates.
Also screenX/Y and the picker library isn't doing what I wan't to do.
Tried to read up on how to do rotation in 3D but euler angles, rotation matrices,quaternions etc is not something I understand at the moment.
Here is my code, with with just Yaw+Roll it works, but with Pitch any other angle than 0 it doesn't.
Use R, Y, P keys to rotate and Enter to reset

import peasy.*;
PeasyCam camera;
float[] rot; 
float disx;
float disy;
float yaw,pitch,roll;
void setup(){
  size(600,400,P3D);
  disx=width*0.6;
  disy=height/10;
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
}
float [] rec;

void draw(){
 background(180);
 disx=(float)camera.getDistance()*0.86;
 disy=(float)camera.getDistance()*0.57;
 rec = new float [] {-disx,-disy,0,disx,-disy,0,disx,disy,0,-disx,disy,0};
 //rot = camera.getRotations();
 //yaw=rot[0]; pitch=rot[1]; roll=rot[2];

 if(keyPressed){
 float rotspeed=0.03;
 if(key=='p') { pitch += rotspeed; }
 if(key=='y') {   yaw += rotspeed; }
 if(key=='r') {  roll += rotspeed; }
 if(key==ENTER) {  yaw=pitch=roll=0; }
 }
 camera.setRotations(yaw,pitch,roll);

 float sinyaw,cosyaw, sinpitch,cospitch, sinroll, cosroll;
 sinyaw=sin(-yaw-HALF_PI);
 cosyaw=cos(-yaw-HALF_PI);
 sinpitch=sin(pitch-HALF_PI);
 cospitch=cos(pitch-HALF_PI);
 cosroll=cos(roll);
 sinroll=sin(roll);

 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];

 x=x0*cosroll-y0*sinroll;
 y=y0*cosroll+x0*sinroll;

 z=x0*cospitch;
 y*=sinpitch;

 z=y*cosyaw;
 y*=sinyaw;

 rec[i]=x; rec[i+1]=y; rec[i+2]=z;

 }

 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);

 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

A bit simpler example just a rotating square and static camera, only rotating in one axis at the time.
Also just found this https://khanacademy.org/computer-programming/3d-tutorial-4/1648921303

import peasy.*;
PeasyCam camera;
float S,C,R,D;
float [] rec;
void setup(){
  size(600,400,P3D);
  camera = new PeasyCam(this, 100);
  camera.setCenterDragHandler(null);
  strokeWeight(3);
  D=30;
}
void draw(){
 background(180);
 rec = new float [] {-D,-D,0,D,-D,0,D,D,0,-D,D,0};
 camera.setRotations(0,0,0);
 R+=PI/60;
 S=sin(R);
 C=cos(R);
 for(int i=0; i<12; i+=3){
 float x,y,z,x0,y0,z0;
 x0=x=rec[i]; y0=y=rec[i+1]; z=z0=rec[i+2];
 if(frameCount%180<60){
 x=x0*C-y0*S;
 y=y0*C+x0*S;
 }
 else if(frameCount%180<120){
 z=z0*C-x0*S;
 x=x0*C+z0*S;
 }
 else{
 y=y0*C-z0*S;
 z=z0*C+y0*S;
 }
 rec[i]=x; rec[i+1]=y; rec[i+2]=z;
 }
 stroke(#ff0000);
 line(0,0,0,100,0,0);
 stroke(#00ff00);
 line(0,0,0,0,100,0);
 stroke(#0000ff);
 line(0,0,0,0,0,100);
 stroke(0);
 line(rec[0],rec[1],rec[2], rec[3],rec[4],rec[5]);
 line(rec[3],rec[4],rec[5], rec[6],rec[7],rec[8]);
 line(rec[6],rec[7],rec[8], rec[9],rec[10],rec[11]);
 line(rec[9],rec[10],rec[11], rec[0],rec[1],rec[2]);
}

Answers

  • edited April 17

    Seems that cube example on khanacademy was made in p5 maybe?
    Just changed the syntax a little bit and it's running in processing.
    Note I don't need a whole cube, just one side but anyways... Is it possible to tweak the cube to always face the camera?
    EDIT: finally got it working

    /********************************************************
     * See tutorial at:
     * petercollingridge.appspot.com/3D-tutorial
    *********************************************************/
    import peasy.*;
    PeasyCam camera;
    int backgroundColour = color(255, 255, 255);
    int nodeColour = color(40, 168, 107);
    int edgeColour = color(34, 68, 204);
    int ghostColour = color(180);
    int nodeSize = 8;
    
    float [] node0,node1,node2,node3,node4,node5,node6,node7;
    float [][] nodes;
    
    int [] edge0  = new int [] {0, 1};
    int [] edge1  = new int [] {1, 3};
    int [] edge2  = new int [] {3, 2};
    int [] edge3  = new int [] {2, 0};
    int [] edge4  = new int [] {4, 5};
    int [] edge5  = new int [] {5, 7};
    int [] edge6  = new int [] {7, 6};
    int [] edge7  = new int [] {6, 4};
    int [] edge8  = new int [] {0, 4};
    int [] edge9  = new int [] {1, 5};
    int [] edge10 = new int [] {2, 6};
    int [] edge11 = new int [] {3, 7};
    int [][] edges = new int [][] {edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11};
    
    // Rotate shape around the z-axis
    void rotateZ3D (float theta) {
        float sin_t = sin(theta);
        float cos_t = cos(theta);
    
        for (int n=0; n<nodes.length; n++) {
            float [] node = nodes[n];
            float x = node[0];
            float y = node[1];
            node[0] = x * cos_t - y * sin_t;
            node[1] = y * cos_t + x * sin_t;
        }
    };
    
    void rotateY3D (float theta) {
        float sin_t = sin(theta);
        float cos_t = cos(theta);
    
        for (int n=0; n<nodes.length; n++) {
            float [] node = nodes[n];
            float x = node[0];
            float z = node[2];
            node[0] = x * cos_t - z * sin_t;
            node[2] = z * cos_t + x * sin_t;
        }
    };
    
    void rotateX3D (float theta) {
        float sin_t = sin(theta);
        float cos_t = cos(theta);
    
        for (int n=0; n<nodes.length; n++) {
            float [] node = nodes[n];
            float y = node[1];
            float z = node[2];
            node[1] = y * cos_t - z * sin_t;
            node[2] = z * cos_t + y * sin_t;
        }
    };
    
    void setup(){
      size(400,400,P3D);
      camera = new PeasyCam(this, 400);
      camera.setCenterDragHandler(null);
    }
    void draw() {
      node0 = new float [] {-100, -100, -100};
      node1 = new float [] {-100, -100,  100};
      node2 = new float [] {-100,  100, -100};
      node3 = new float [] {-100,  100,  100};
      node4 = new float [] { 100, -100, -100};
      node5 = new float [] { 100, -100,  100};
      node6 = new float [] { 100,  100, -100};
      node7 = new float [] { 100,  100,  100};
      nodes = new float [][] {node0, node1, node2, node3, node4, node5, node6, node7};
        background(backgroundColour);
    
        float[] rot; 
        rot = camera.getRotations();
        float yaw=rot[0], pitch=rot[1], roll=rot[2];
        // Draw ghost cube
        stroke(ghostColour);
        for (int e=0; e<edges.length; e++) {
            int n0 = edges[e][0];
            int n1 = edges[e][1];
            float [] node0 = nodes[n0];
            float [] node1 = nodes[n1];
            line(node0[0], node0[1],node0[2], node1[0], node1[1],node1[2]);
        }
    
        rotateZ3D(roll);
        rotateY3D(-pitch);
        rotateX3D(yaw);
    
        // Draw cube facing camera
        stroke(edgeColour);
        for (int e=0; e<edges.length; e++) {
            int n0 = edges[e][0];
            int n1 = edges[e][1];
            float [] node0 = nodes[n0];
            float [] node1 = nodes[n1];
            line(node0[0], node0[1],node0[2], node1[0], node1[1],node1[2]);
        }
    }
    
  • Answer ✓

    Seems that cube example on KhanAcademy was made in p5 maybe?

    KhanAcademy uses a spinoff of ProcessingJS (Pjs) w/ JS syntax in place of Java's. ~O)

  • edited September 11 Answer ✓

    Refactored the 3D Rotating Cube Tutorial code, removing PeasyCam and using more Java syntax. ~O)

    Also hosted the code online at this link: https://OpenProcessing.org/sketch/421281

    Original code is at: https://KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303

    /*****************************************************************
     * Rotating Cube (v1.0.4)
     * PeterCollingridge.AppSpot.com/3D-tutorial
     * Mod: GoToLoop (2017-Apr-17)
     *
     * Forum.Processing.org/two/discussion/22047/
     * draw-static-rect-filling-the-screen-infront-of-peasycam#Item_3
     *
     * OpenProcessing.org/sketch/421281
     * Bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267
     * KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303
     *****************************************************************/
    
    static final color BG = 0350;
    static final color NODE_COL = #28A86B;
    static final color EDGE_COL = #2244CC;
    
    static final int NODE_DIAM = 8, ALIASING = 3;
    static final float INIT_ANGLE = 30 * DEG_TO_RAD, BOLD = 1.5;
    
    static final byte[][] EDGES = {
      {0, 1}, {1, 3}, {3, 2}, {2, 0}, 
      {4, 5}, {5, 7}, {7, 6}, {6, 4}, 
      {0, 4}, {1, 5}, {2, 6}, {3, 7}
    };
    
    final float[][] nodes = {
      {-100, -100, -100}, 
      {-100, -100, +100}, 
      {-100, +100, -100}, 
      {-100, +100, +100}, 
      {+100, -100, -100}, 
      {+100, -100, +100}, 
      {+100, +100, -100}, 
      {+100, +100, +100}
    };
    
    void setup() {
      size(400, 400);
      smooth(ALIASING);
      noLoop();
    
      ellipseMode(CENTER);
      strokeWeight(BOLD);
      strokeCap(SQUARE);
      fill(NODE_COL);
    
      rotateZ3D(INIT_ANGLE, nodes);
      rotateY3D(INIT_ANGLE, nodes);
      rotateX3D(INIT_ANGLE, nodes);
    }
    
    void draw() {
      background(BG);
      translate(width>>1, height>>1);
    
      stroke(EDGE_COL);
      for (final byte[] indices : EDGES) {
        final float[] n1 = nodes[indices[0]];
        final float[] n2 = nodes[indices[1]];
        line(n1[0], n1[1], n2[0], n2[1]);
      }
    
      noStroke();
      for (final float[] xyz : nodes)
        ellipse(xyz[0], xyz[1], NODE_DIAM, NODE_DIAM);
    }
    
    void mouseDragged() {
      rotateY3D(radians(mouseX - pmouseX), nodes);
      rotateX3D(radians(mouseY - pmouseY), nodes);
      redraw();
    }
    
    static final void rotateZ3D(final float t, final float[][] vecs) {
      final float c = cos(t), s = sin(t);
      for (final float[] xyz : vecs) {
        final float x = xyz[0], y = xyz[1];
        xyz[0] = x*c - y*s;
        xyz[1] = y*c + x*s;
      }
    }
    
    static final void rotateY3D(final float t, final float[][] vecs) {
      final float c = cos(t), s = sin(t);
      for (final float[] xyz : vecs) {
        final float x = xyz[0], z = xyz[2];
        xyz[0] = x*c - z*s;
        xyz[2] = z*c + x*s;
      }
    }
    
    static final void rotateX3D(final float t, final float[][] vecs) {
      final float c = cos(t), s = sin(t);
      for (final float[] xyz : vecs) {
        final float y = xyz[1], z = xyz[2];
        xyz[1] = y*c - z*s;
        xyz[2] = z*c + y*s;
      }
    }
    
  • edited September 11

    Made a p5.js version as well. But w/ a twist: 1D arrays. The 2D-arrays were flattened as 1D. :ar!

    And visit this link below in order to see it online in action: :bz http://Bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267

    /*****************************************************************
     * Rotating Cube (v1.0.4)
     * PeterCollingridge.AppSpot.com/3D-tutorial
     * Mod: GoToLoop (2017-Apr-19)
     *
     * Forum.Processing.org/two/discussion/22047/
     * draw-static-rect-filling-the-screen-infront-of-peasycam#Item_4
     *
     * Bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267
     * OpenProcessing.org/sketch/421281
     * KhanAcademy.org/computer-programming/3d-tutorial-4/1648921303
     *****************************************************************/
    
    "use strict";
    
    const NODE_DIAM = 8, INIT_DEGREE = 30, BOLD = 1.5,
          BG = 0o350, NODE_COL = '#28A86B', EDGE_COL = '#2244CC';
    
    let bg, edgeCol;
    
    const EDGES = Uint8Array.of(
      0, 1, 1, 3, 3, 2, 2, 0,
      4, 5, 5, 7, 7, 6, 6, 4,
      0, 4, 1, 5, 2, 6, 3, 7
    );
    
    EDGES.forEach((val, idx, arr) => arr[idx] = 3 * val);
    
    const nodes = Float32Array.of(
      -100, -100, -100,
      -100, -100, +100,
      -100, +100, -100,
      -100, +100, +100,
      +100, -100, -100,
      +100, -100, +100,
      +100, +100, -100,
      +100, +100, +100
    );
    
    function setup() {
      createCanvas(400, 400).mouseMoved(rotateCube);
    
      ellipseMode(CENTER).angleMode(DEGREES);
      strokeWeight(BOLD).strokeCap(SQUARE);
      fill(NODE_COL).noLoop();
    
      bg = color(BG), edgeCol = color(EDGE_COL);
    
      rotateZ3D(INIT_DEGREE, nodes);
      rotateY3D(INIT_DEGREE, nodes);
      rotateX3D(INIT_DEGREE, nodes);
    }
    
    function draw() {
      background(bg).translate(width>>1, height>>1);
    
      stroke(edgeCol);
      for (let i = 0, len = EDGES.length; i < len; i += 2) {
        const indA = EDGES[i], indB = EDGES[i+1],
              x1 = nodes[indA], y1 = nodes[indA+1],
              x2 = nodes[indB], y2 = nodes[indB+1];
        line(x1, y1, x2, y2);
      }
    
      noStroke();
      for (let i = 0, len = nodes.length; i < len; i += 3)
        ellipse(nodes[i], nodes[i+1], NODE_DIAM);
    }
    
    function rotateCube() {
      if (mouseIsPressed) {
        rotateY3D(mouseX - pmouseX, nodes);
        rotateX3D(mouseY - pmouseY, nodes);
        redraw();
      }
    
      pmouseX = mouseX;
      pmouseY = mouseY;
    }
    
    function rotateZ3D(t, xyz) {
      const c = cos(t), s = sin(t), len = xyz.length;
      for (let i = 0; i < len; i += 3) {
        const x = xyz[i], y = xyz[i+1];
        xyz[i]   = x*c - y*s;
        xyz[i+1] = y*c + x*s;
      }
    }
    
    function rotateY3D(t, xyz) {
      const c = cos(t), s = sin(t), len = xyz.length;
      for (let i = 0; i < len; i += 3) {
        const x = xyz[i], z = xyz[i+2];
        xyz[i]   = x*c - z*s;
        xyz[i+2] = z*c + x*s;
      }
    }
    
    function rotateX3D(t, xyz) {
      const c = cos(t), s = sin(t), len = xyz.length;
      for (let i = 1; i < len; i += 3) {
        const y = xyz[i], z = xyz[i+1];
        xyz[i]   = y*c - z*s;
        xyz[i+1] = z*c + y*s;
      }
    }
    
Sign In or Register to comment.