var parentHeight = document.getElementById("model_01").offsetHeight;

var centerPointX = parentWidth / 2;

var centerPointY = parentHeight / 2;

​

let radius;

let wrench;

var fade;

var fadeAmount = 0.5;

​

function preload() {

  wrench = loadModel('wrench.obj', true);

  archivo = loadFont('ArchivoNarrow-Regular.ttf');

​

}

​

function setup() {

  var canvas = createCanvas(parentWidth, parentHeight, WEBGL);

  canvas.parent('model_01');

​

  // 3D OBJECT (BUTTONS) POSITION ON SCREEN 

  addScreenPositionFunction();

​

  scaleFactor = parentWidth/400;

​

​

  ellipseMode(CENTER);

  alpha = 0;

  beta = 0;

  gamma = 0;

  fade = 0;

  radius = 20*scaleFactor/2;

​

  textFont(archivo);

}

​

function draw() {

  // MODEL PROPERTIES   

  scale(scaleFactor);

  background(0);

  noFill();

  stroke(255, fade);

  rotateX(0);

  rotateY(0);

  rotateZ(0);

  if (fade < 0) fadeAmount = 0.5;

  if (fade > 10) fadeAmount = 0;

  fade += fadeAmount;

​

​

  //  ROTATION CONTROLS  

​

  rotateX(-(mouseY - centerPointY) / 1400);

  rotateY((mouseX - centerPointX) / 1000);

  rotateZ((mouseX - centerPointX) / 4000);

​

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

​

​

    rotateY(radians(gamma * 0.3));

    rotateX(radians(45) - radians(beta));

  }

​

  // ROTATION CONTROLS END

​

  // LOADING MODEL

  model(wrench);

  push();

​

  // BUTTONS

  scale(1);

  rotateY(0);

  stroke(255, fade + 100);

  strokeWeight(2);

​

  var strokeOn = color('rgba(255,255,255, 1)');

  var strokeOff = color('rgba(255,255,255, 0.5)');

  var fillOn = color('rgba(255,0,0, 0.9)');

  var fillOff = color('rgba(255,0,0, 0.0)');

​

  var b01 = screenPosition(-20*scaleFactor/2, -20*scaleFactor/2, 10);

  var d01 = dist(mouseX - centerPointX - b01.x , mouseY - centerPointY - b01.y, b01.x, b01.y);

  if (d01 < radius) {

    fill(fillOn);

    stroke(strokeOn);

  } else {

    stroke(strokeOff);

    fill(fillOff);

  }

  ellipse(b01.x, b01.y, radius, radius);

  ellipse(b01.x, b01.y, radius / 4, radius / 4);

​

  var b02 = screenPosition(22*scaleFactor/2, -6*scaleFactor/2, 10);

  var d02 = dist(mouseX - centerPointX - b02.x, mouseY - centerPointY - b02.y, b02.x, b02.y);

  if (d02 < radius) {

    fill(fillOn);

    stroke(strokeOn);

  } else {

    stroke(strokeOff);

    fill(fillOff);

  }

  ellipse(b02.x, b02.y, radius, radius);

  ellipse(b02.x, b02.y, radius / 4, radius / 4);

​

  var b03 = screenPosition(-22*scaleFactor/2, 20*scaleFactor/2, 10);

  var d03 = dist(mouseX - centerPointX - b03.x, mouseY - centerPointY - b03.y, b03.x, b03.y);

​

  if (d03 < radius) {

    fill(fillOn);

    stroke(strokeOn);

  } else {

    stroke(strokeOff);

    fill(fillOff);

  }

  ellipse(b03.x, b03.y, radius, radius);

  ellipse(b03.x, b03.y, radius / 4, radius / 4);

​

  // BUTTONS END

​

  push();

  fill(255);

  text(b01.x, 80, 80);

  text(mouseX, 80, 100);

​

}

​

// GLOBAL FUNCTIONS

​

window.addEventListener('deviceorientation', function(e) {

  alpha = e.alpha;

  beta = e.beta;

  gamma = e.gamma;

});

​

function windowResized() {

  resizeCanvas(parentWidth, parentHeight);

}