AR PowerPoint

aldonunez319 — 2018-01-16 18:44:22 UTC
EXPLORATION WITH TREES

aldonunez319 — 2018-10-31 07:16:46 UTC
html>
<html>
<body>
<canvas width = "300" height = "300" id = "my_Canvas">canvas>

<script>

    /*======= Creating a canvas =========*/

    var canvas = document.getElementById('my_Canvas');
    var gl = canvas.getContext('experimental-webgl');


    /*======= Defining and storing the geometry ======*/
/*
    var vertices = [
        -0.7,-0.1,0,
        -0.3,0.6,0,
        -0.3,-0.3,0,
        0.2,0.6,0,
        0.3,-0.3,0,
        0.7,0.6,0
    ]
*/
    var L = 0.1;
    var thetaDeg = 30.0;
    var theta = (thetaDeg*Math.PI)/180.0;


    var vertices = [
        0.0, 0.0, 0.0,
        0.0, L, 0.0,
        0.0, L, 0.0,
        -L*Math.sin(theta), L+L*Math.cos(theta), 0.0,
        0.0, L, 0.0,
        L*Math.sin(theta), L+L*Math.cos(theta), 0.0
    ]


    // Create an empty buffer object
    var vertex_buffer = gl.createBuffer();

    // Bind appropriate array buffer to it
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

    // Pass the vertex data to the buffer
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    // Unbind the buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    /*=================== Shaders ====================*/

    // Vertex shader source code
    var vertCode =
        'attribute vec3 coordinates;' +
        'void main(void) {' +
        ' gl_Position = vec4(coordinates, 1.0);' +
        ' gl_PointSize = 10.0;' +
        '}';

    // Create a vertex shader object
    var vertShader = gl.createShader(gl.VERTEX_SHADER);

    // Attach vertex shader source code
    gl.shaderSource(vertShader, vertCode);

    // Compile the vertex shader
    gl.compileShader(vertShader);

    // Fragment shader source code
    var fragCode =
        'void main(void) {' +
        'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' +
        '}';

    // Create fragment shader object
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

    // Attach fragment shader source code
    gl.shaderSource(fragShader, fragCode);

    // Compile the fragmentt shader
    gl.compileShader(fragShader);

    // Create a shader program object to store
    // the combined shader program
    var shaderProgram = gl.createProgram();

    // Attach a vertex shader
    gl.attachShader(shaderProgram, vertShader);

    // Attach a fragment shader
    gl.attachShader(shaderProgram, fragShader);

    // Link both the programs
    gl.linkProgram(shaderProgram);

    // Use the combined shader program object
    gl.useProgram(shaderProgram);

    /*======= Associating shaders to buffer objects ======*/

    // Bind vertex buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

    // Get the attribute location
    var coord = gl.getAttribLocation(shaderProgram, "coordinates");

    // Point an attribute to the currently bound VBO
    gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

    // Enable the attribute
    gl.enableVertexAttribArray(coord);

    /*============ Drawing the triangle =============*/

    // Clear the canvas
    gl.clearColor(0.5, 0.5, 0.5, 0.9);

    // Enable the depth test
    gl.enable(gl.DEPTH_TEST);

    // Clear the color and depth buffer
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Set the view port
    gl.viewport(0,0,canvas.width,canvas.height);

    // Draw
    //gl.drawArrays(gl.POINTS, 0, 6);

    gl.drawArrays(gl.LINES, 0, 6);
    //gl.drawArrays(gl.LINE_STRIP, 0, 6);
    //gl.drawArrays(gl.LINE_LOOP, 0, 6);
    //gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
    //gl.drawArrays(gl.TRIANGLE_FAN, 0, 6);
    //gl.drawArrays(gl.TRIANGLES, 0, 6);

script>

<script>
    var thePoint = [25,25];
    var rotPoint = new Array();
    rotPoint[0] = new Array();
    rotPoint[1] = new Array();

    var rotatedPoint = new Array();
    var alpha = 30 * Math.PI / 180;

    function calculateVertices2D(point, iterations){
        console.log("----- Iteration " + iterations + "------");
        if (iterations > 0) {
            rotPoint[0] = rotate2D(point,  alpha);
            rotPoint[1] = rotate2D(point, -alpha);

            console.log("Rotated Lx: " + rotPoint[0][0]);
            console.log("Rotated Ly: " + rotPoint[0][1]);
            console.log("Rotated Rx: " + rotPoint[1][0]);
            console.log("Rotated Ry: " + rotPoint[1][1]);

            calculateVertices2D(rotPoint[0], iterations-1)
            calculateVertices2D(rotPoint[1], iterations-1)
        }
            //return rotPoint;
    }

    function rotate2D(point, angle){
        console.log("in rotate2D -- x: " + point[0] + ",y: " + point[1] + " angle: " + angle);

        rotatedPoint[0] = 2*point[0]*Math.cos(angle)-point[1]*Math.sin(angle);
        rotatedPoint[1] = 2*point[0]*Math.sin(angle)+point[1]*Math.cos(angle);
        return rotatedPoint;
    }

    thePoint = calculateVertices2D(thePoint, 2);

script>

body>
html>
SMURF Augmented Reality by Aldo Nunez

AR Video

AR Virtual Buttons

AR PowerPoint

EXPLORATION WITH TREES
