orbitControl.v2

/* 

A new and improved version of 

orbitControl() is coming in

the next release of p5.js, 

thanks to 'mathfoxLab'!

This sketch demonstrates how 

to create two forms of HUD:

1) HTML elements, and 

2) screen-aligned drawing

​

sketch update log:

2023.0525 initial release 

(problems with mobile)

2023.0526 use css grid to 

align HUD items; init cam loc

2023.0527 switch to orbitControl

patch from github

2023.0528 reduce html element

rate of update to prevent middle-

click mouse cursor state lock

​

en.wikipedia.org/wiki/Head-up_display

For additional camera 

functionality such as animation,

view reset, a rich API, and zero

gimbal lock, see:

github.com/freshfork/p5.EasyCam

​

The p5.EasyCam version of this sketch:

freshfork.github.io/p5.EasyCam/examples/HeadUpDisplay

*/

​

function setup() {  

  pixelDensity(2);

  createCanvas(windowWidth, windowHeight, WEBGL);

  setAttributes('antialias', true);

  camera(0,0,300, 0,0,0, 0,1,0); // initialize location of camera

  initHUD();

} 

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

// utility function to get some GL/GLSL/WEBGL information

function getGLInfo(){

  var gl = this._renderer.GL;

  var info = {};

  info.gl = gl;

  var debugInfo  = gl.getExtension("WEBGL_debug_renderer_info");

  if (debugInfo) {

    info.gpu_renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

    info.gpu_vendor   = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);

  }

  info.wgl_renderer = gl.getParameter(gl.RENDERER);

  info.wgl_version  = gl.getParameter(gl.VERSION);

  info.wgl_glsl     = gl.getParameter(gl.SHADING_LANGUAGE_VERSION);

  info.wgl_vendor   = gl.getParameter(gl.VENDOR);

​

  return info;

}

var HUDgrid;

function setGridCell(c,r, d) {

  var gridItems = Array.from(HUDgrid.elt.querySelectorAll('*'));

  gridItems[(c-1)*8 + (r-1)].innerHTML = d;

}

​

function initHUD(){

  // init hud

  HUDgrid = select('.gwrap');

​

  createElement('div', "gpu_renderer: ").parent(HUDgrid);

  createElement('div', "wgl_version:" ).parent(HUDgrid);

  createElement('div', "wgl_glsl:"    ).parent(HUDgrid);

  createElement('div', "Framerate:"  ).parent(HUDgrid).attribute('gap', '');

  createElement('div', "Viewport:"   ).parent(HUDgrid);

  createElement('div', "Distance:"   ).parent(HUDgrid).attribute('gap', '');

  createElement('div', "Center:"     ).parent(HUDgrid);

  createElement('div', "Rotation:"   ).parent(HUDgrid);

  var info = getGLInfo();

  createElement('div', info.gpu_renderer || '.').parent(HUDgrid).class('green'); 

  createElement('div', info.wgl_version  || '.').parent(HUDgrid).class('green'); 

  createElement('div', info.wgl_glsl     || '.').parent(HUDgrid).class('green'); 

  createElement('div', '.'                     ).parent(HUDgrid).class('').attribute('gap', '');

  createElement('div', '.'                     ).parent(HUDgrid).class(''); 

  createElement('div', '.'                     ).parent(HUDgrid).class('orange').attribute('gap', '');

  createElement('div', '.'                     ).parent(HUDgrid).class('orange'); 

  createElement('div', '.'                     ).parent(HUDgrid).class('orange'); 

}

​

​

function displayHUD(cam){

  push();

  camera(width/2,height/2,(height/2)/tan(PI/6), width/2,height/2,0, 0,1,0);

  // update data list

  if(frameCount%60==0){

    setGridCell(2,4, nfs(frameRate(), 1, 1));

    setGridCell(2,5, nfs([0,0,width,height], 1));

​

​

    let z0 = cam.eyeX - cam.centerX;

    let z1 = cam.eyeY - cam.centerY;

    let z2 = cam.eyeZ - cam.centerZ;

    const eyeDist = Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);

    setGridCell(2,6, nfs(eyeDist, 1, 2));

    setGridCell(2,7, nfs([cam.centerX,cam.centerY,cam.centerZ], 1, 2));

    let lax = cam._getLocalAxes();

    setGridCell(2,8, nfs([lax.z[0],lax.z[1],lax.z[2]], 1, 3));

  }

​

  // draw screen-aligned rectangles

  var ny = 10; 

  var off = 20;

  var rs = (height-off) / ny - off;

  for(var y = 0; y < ny; y++){

    var r = 255 * y / ny;

    var g = 255 - r;

    var b = r+g;

    var px = width - off - rs;

    var py = off + y * (rs+off);

    noStroke();

    fill(r,g,b);

    rect(px, py, rs, rs);

  }

  pop();

}

​

​

function draw(){

  // projection

  perspective(60 * PI/180, width/height, 1, 5000);

  // BG

  background(32);

​

  orbitControl();

  // gizmo

  strokeWeight(1);

  stroke(255, 32,  0); line(0,0,0, 100,0,0);

  stroke( 32,255, 32); line(0,0,0, 0,100,0); // y-axis is green

  stroke(  0, 32,255); line(0,0,0, 0,0,100);

  // objects

  strokeWeight(0.5);

  stroke(0);

  push();

  translate(50, 50, 0);

  fill(255);

  box(50, 50, 25);

  pop();

  push();

  translate(-50, -50, 0);

  fill(255,0,128);

  box(50, 50, 25);

  pop();

  push();

  translate(+50, -50, 0);

  fill(0,128,255);

  box(50, 50, 25);

  pop();

  push();

  translate(-50, +50, 0);

  rotateX(PI/2);

  fill(128);

  sphere(30);

  pop();

  // HeadUpDisplay

  displayHUD(this._renderer._curCamera);

}