let viewPhi = 2;

let viewPos, viewFwd;

let seed;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  colorMode( HSB, 1, 1, 1, 1 );

  rectMode( CENTER );

  viewPos = createVector( 0, 0, 10 );

  // default right-mouse and mouse-wheel behaviors (context menu and scrolling,

  // respectively) are disabled here to allow use of those events for panning and

  // zooming.

​

  // disable context menu for canvas element and add 'contextMenuDisabled'

  // flag to p5 instance

  // this.canvas.oncontextmenu = () => false;

  // this._setProperty('contextMenuDisabled', true);

​

  // disable default scrolling behavior on the canvas element and add

  // 'wheelDefaultDisabled' flag to p5 instance

  this.canvas.onwheel = () => false;

  this._setProperty('wheelDefaultDisabled', true);

​

  // disable default touch behavior on the canvas element and add

  // 'touchActionsDisabled' flag to p5 instance

  this.canvas.style['touch-action'] = 'none';

  this._setProperty('touchActionsDisabled', true);

  seed = int( random( 1<<24 ) );

}

​

let rotateTouch = { id: -1 };

let moveTouch = { id: -1 };

​

function draw() {

  viewFwd = createVector( cos(viewTheta)*sin(viewPhi),

                          sin(viewTheta)*sin(viewPhi),

                          cos(viewPhi));

  let viewRt = createVector( sin(viewTheta), -cos(viewTheta) );

  let vel = createVector();

​

  let foundRotate = false;

  let foundMove = false;

  for( let touch of touches ) {

    if( touch.id == rotateTouch.id ) {

      foundRotate = true;

      // turn the view

      viewTheta += (touch.x - rotateTouch.x) / width * 0.08;

      viewPhi += (touch.y - rotateTouch.y) / width * 0.05;

      viewPhi = min( max( viewPhi, 0.01 ), PI-0.01 );

    } else if( touch.id == moveTouch.id ) {

      foundMove = true;

      // update the velocity

      vel.add( p5.Vector.mult( viewRt, (moveTouch.x - touch.x) / width * 3 ) );

      vel.add( p5.Vector.mult( viewFwd, (moveTouch.y - touch.y) / width * 3 ) );

    } else {

      // new touch

      if( touch.x < width/2 ) {

        if( rotateTouch.id == -1 ) {

          foundRotate = true;

          rotateTouch = { x: touch.x, y: touch.y, id: touch.id };

        }

      } else {

        if( moveTouch.id == -1 ) {

          foundMove = true;

          moveTouch = { x: touch.x, y: touch.y, id: touch.id };

        }

      }

    }

  }

  if( !foundRotate && rotateTouch.id != -1 ) rotateTouch = { id: -1 };

  if( !foundMove && moveTouch.id != -1 ) moveTouch = { id: -1 };

​

  if( keyIsDown(87) ) vel.add(viewFwd);  // w

  if( keyIsDown(83) ) vel.sub(viewFwd);  // s

  let leftRight = 0;

  if( keyIsDown(65) ) leftRight--;  // a

  if( keyIsDown(68) ) leftRight++;  // d

  if( leftRight != 0 ) {

    vel.add( createVector( sin(viewTheta), -cos(viewTheta) ).mult(leftRight) );

  }

  if( keyIsDown(32) ) vel.z++;  // space

  if( keyIsDown(16) ) vel.z--;  // left-shift

  viewPos.add( vel.mult(0.5*deltaTime/60.0) );

​

  camera( viewPos.x, viewPos.y, viewPos.z,

          viewPos.x+viewFwd.x, viewPos.y+viewFwd.y, viewPos.z+viewFwd.z,

          0, 0, -1

        );

  perspective( PI/3, width/height, 1, 10000);

  background( 0, 0, 0.2 );

​

  // draw some stars to give us orientation feedback

  strokeWeight( 2 );

  stroke( 0, 0, 1 );

  randomSeed( seed );

  for( let i=0; i<100; i++ ) {

    let ang = random(TAU);

    let z = random(-1, 1);

    let r = sqrt(max(0, 1-z*z));

    let dir = createVector(r*cos(ang), r*sin(ang), z).mult(5000);

    point( dir.x, dir.y, dir.z );

  }

​

  // draw some boxes as a ground plane

  strokeWeight( 0.1 );

  fill( 0, 0, 0.75 );

  stroke(0);

  for(let y=-5; y<=5; y++ ) {

    for( let x=-5; x<=5; x++ ) {

      push();

      translate( x*10, y*10, -1 );

      box( 9.5, 9.5, 1 );

      pop();

    }

  }

  fill( 0, 0.5, 1 );

  push();

  translate( 30, 0, 5 );

  box( 2, 2, 2 );

  pop();

  fill( 0.3333, 0.5, 1 );

  push();

  translate( 0, 30, 5 );

  box( 2, 2, 2 );

  pop();

  fill( 0.6666, 0.5, 1 );

  push();

  translate( 0, 0, 30 );

  box( 2, 2, 2 );

  pop();

  camera();

  perspective();

  clearDepth();

  if( navigator.maxTouchPoints > 0 ) {

    // draw touch controls overlay

    fill( 0, 0, 1, 0.25 );

    noStroke();

    circle( -width*0.25, height*0.25, width*0.1 );

    rect( width*0.25, height*0.25, width*0.1, width*0.1 );

  }

  let s = "";

  strokeWeight(2);

  for (let touch of touches) {

    stroke( (touch.id * 0.618) % 1, 0.7, 1 );

    let x = touch.x - width/2;

    let y = touch.y - height/2;

    line( -width, y, width, y );

    line( x, -height, x, height );

    s += touch.id + "  ";

  }

  //if( s != "" ) { console.log(s); }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function touchStarted( e ) {

  //console.log( touches.length );

}

​

function touchEnded() {

}

​

function touchMoved() {

}

​

/**/

function mousePressed() {

  //console.log( "mousePressed" );

  if ( document.pointerLockElement === canvas ) {

    exitPointerLock();

  } else {

    requestPointerLock();

  }

}

​

​

function mouseMoved() {

  if ( document.pointerLockElement === canvas ) {

    //console.log("moved");

    viewTheta += 2.0*movedX/width;

    viewPhi += 2.0*movedY/height;

    viewPhi = min( max( viewPhi, 0.01 ), PI-0.01 );

  }

}

​

function mouseDragged() {

  if ( document.pointerLockElement === canvas ) {

    //console.log("dragged");

    viewTheta += 2.0*movedX/width;

    viewPhi += 2.0*movedY/height;

    viewPhi = min( max( viewPhi, 0.01 ), PI-0.01 );

  }

}

/**/

​