d

"use strict"

var canvas;
var gl;
var select;
var toDraw = []
var thetaRot = [10, 10, 10];
var thetaLoc;
var coeff = 1;
var coeffLoc;
var trCoeff = [0, 0, 0];
var trCoeffLoc;

var flag = true;
var axis = 0;

var xAxis = 0;
var yAxis = 1;
var zAxis = 2;

var near = 0.3;
var far = 3.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI / 180.0;

var fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
var aspect;       // Viewport aspect ratio

var mvMatrix, pMatrix;
var modelView, projection;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);

var coord = {
  // For cube
  '1': vec3(0.1, 0.1, 0.1),
  '2': vec3(0.5, 0.1, 0.1),
  '3': vec3(0.5, 0.1, 0.5),
  '4': vec3(0.1, 0.1, 0.5),
  '5': vec3(0.1, 0.5, 0.1),
  '6': vec3(0.1, 0.5, 0.5),
  '7': vec3(0.5, 0.5, 0.5),
  '8': vec3(0.5, 0.5, 0.1),

}

var vertices = [
  // For cube
  coord[4], coord[3], coord[2],
  coord[2], coord[4], coord[1],
  coord[1], coord[2], coord[5],
  coord[5], coord[8], coord[2],
  coord[2], coord[3], coord[8],
  coord[8], coord[3], coord[7],
  coord[7], coord[3], coord[4],
  coord[4], coord[7], coord[6],
  coord[6], coord[4], coord[1],
  coord[1], coord[5], coord[6],
  coord[6], coord[7], coord[8],
  coord[8], coord[6], coord[5],

]

var colors = [
  // each face of the cube
  0, 0, 1, 1.0,
  0, 0, 1, 1.0,
  0, 0, 1, 1.0,
  0, 0, 1, 1.0,
  0, 0, 1, 1.0,
  0, 0, 1, 1.0,

  0, 1, 0, 1.0,
  0, 1, 0, 1.0,
  0, 1, 0, 1.0,
  0, 1, 0, 1.0,
  0, 1, 0, 1.0,
  0, 1, 0, 1.0,

  0, 0.7, 1, 1.0,
  0, 0.7, 1, 1.0,
  0, 0.7, 1, 1.0,
  0, 0.7, 1, 1.0,
  0, 0.7, 1, 1.0,
  0, 0.7, 1, 1.0,

  0.5, 0, 1, 1.0,
  0.5, 0, 1, 1.0,
  0.5, 0, 1, 1.0,
  0.5, 0, 1, 1.0,
  0.5, 0, 1, 1.0,
  0.5, 0, 1, 1.0,

  1, 0, 0, 1.0,
  1, 0, 0, 1.0,
  1, 0, 0, 1.0,
  1, 0, 0, 1.0,
  1, 0, 0, 1.0,
  1, 0, 0, 1.0,

  0.2, 0, 1, 1.0,
  0.2, 0, 1, 1.0,
  0.2, 0, 1, 1.0,
  0.2, 0, 1, 1.0,
  0.2, 0, 1, 1.0,
  0.2, 0, 1, 1.0,

]

theta = [9, 10, 78]
// add vertices for cone

function addFigureCube(shape, program){
  cube = new Drawable(vertices,colors,program)
  toDraw.push(cube)

}

window.onload = init;

function init() {
  canvas = document.getElementById("gl-canvas");

  gl = WebGLUtils.setupWebGL(canvas);

  if (!gl) { alert("WebGL isn't available"); }

  aspect = canvas.width / canvas.height;

  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  gl.enable(gl.DEPTH_TEST);


  var bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, 50000, gl.STATIC_DRAW);
  gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(vertices));

  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

  var bufferColor = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

  var vColors = gl.getAttribLocation(program, "vColors");
  gl.vertexAttribPointer(vColors, 4, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);
  gl.enableVertexAttribArray(vColors);

  thetaLoc = gl.getUniformLocation(program, "theta");


  document.getElementById("xButton").onclick = function () {
    flag = false
    axis = xAxis;
  };
  document.getElementById("yButton").onclick = function () {
    flag = false
    axis = yAxis;
  };
  document.getElementById("zButton").onclick = function () {
    flag = false
    axis = zAxis;
  };
  document.getElementById("stopButton").onclick = function () {
    flag = true;
  };


  document.getElementById("sUpButton").onclick = function () {
    select.coeff += 0.1;
  };
  document.getElementById("sDownButton").onclick = function () {
    select.coeff -= 0.1;
  };



  document.getElementById("leftButton").onclick = function () {
    select.trCoeff[0] += 0.1;
  };
  document.getElementById("rightButton").onclick = function () {
    select.trCoeff[0] -= 0.1;
  };
  document.getElementById("upButton").onclick = function () {
    select.trCoeff[1] += 0.1;
  };
  document.getElementById("downButton").onclick = function () {
    select.trCoeff[1] -= 0.1;
  };
  document.getElementById("closeButton").onclick = function () {
    select.trCoeff[2] += 0.1;
  };
  document.getElementById("furtherButton").onclick = function () {
   // select.trCoeff[2] -= 0.1;
   select.setScale(1,5,100);
  };
  document.getElementById("Button9").onclick = function () {
    var cube = new Drawable(vertices, colors, program);
    toDraw.push(cube);
    select = cube;

  };

  modelView = gl.getUniformLocation(program, "modelView");
  projection = gl.getUniformLocation(program, "projection");

  document.getElementById("Button1").onclick = function () { select.near *= 1.1; select.far *= 1.1; };
  document.getElementById("Button2").onclick = function () { select.near *= 0.9; select.far *= 0.9; };
  document.getElementById("Button3").onclick = function () { select.radius *= 2.0; };
  document.getElementById("Button4").onclick = function () { select.radius *= 0.5; };
  document.getElementById("Button5").onclick = function () { select.theta += select.dr; };
  document.getElementById("Button6").onclick = function () { select.theta -= select.dr; };
  document.getElementById("Button7").onclick = function () { select.phi += select.dr; };
  document.getElementById("Button8").onclick = function () { select.phi -= select.dr; };

 coeffLoc = gl.getUniformLocation(program, "coeff");
 trCoeffLoc = gl.getUniformLocation(program, "trCoeff");





  render();
}

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // if (select && rotation){
  //   select.theta[axis]+=1.5;
  // }
  toDraw.forEach(element => {element.draw();})

  requestAnimFrame(render);
}

class Drawable
{
    constructor(vertices, colors, program) {
        this.program = program;
        this.vBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); // SET THE DATA, SPECIFY THE ARRAY, vertices in this cas

        this.cBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.cBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

        this.vAttributeLocation = gl.getAttribLocation(program, 'vPosition');
        this.cAttributeLocation = gl.getAttribLocation(program, 'vColors');
        this.translationLocation = gl.getUniformLocation(program, 'translation');
        this.scaleLocation = gl.getUniformLocation(program, 'scale');
        this.vertices = vertices;
        this.translation = vec3(0, 0, 0);
        this.scale = vec3(1, 1, 1);
      //  coeffLoc = gl.getUniformLocation(program, "coeff");
      //  trCoeffLoc = gl.getUniformLocation(program, "trCoeff");
    }

    draw()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vBuffer);
        gl.vertexAttribPointer(this.vAttributeLocation, 3, gl.FLOAT, false, 0, 0); // DESCRIBE THE DATA: EACH vertex has 3 values of type FLOAT
        gl.enableVertexAttribArray(this.vAttributeLocation);

        gl.bindBuffer(gl.ARRAY_BUFFER, this.cBuffer);
        gl.vertexAttribPointer(this.cAttributeLocation, 4, gl.FLOAT, false, 0, 0); // DESCRIBE THE DATA: EACH vertex has 4 values of type FLOAT
        gl.enableVertexAttribArray(this.cAttributeLocation);

        // console.log(this.translationLocation);
        gl.uniform3fv(this.translationLocation, this.translation);
        gl.uniform3fv(this.scaleLocation, this.scale);

        //gl.uniform3fv(this.trCoeffLoc, this.coeff);
        //gl.uniform3fv(this.scaleLocation, this.scale);

        gl.drawArrays(gl.TRIANGLES, 0, this.vertices.length);
    }

    setTranslation(x, y, z)
    {
        this.translation = vec3(x, y, z);
    }
    setScale(x, y, z)
    {
        this.scale = vec3(x, y, z);
    }
}