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

prince_polka

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

prince_polka

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

GoToLoop

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)

GoToLoop

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

GoToLoop

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.5)
 * 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;
  ({ mouseX: pmouseX, mouseY: pmouseY } = window);
}

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