Untitled

<html>

<head>
<title>HTML5 Canvas &mdash; Basic Geometry</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">

<script type="text/javascript" src="dat.gui.js"></script>
<script type="text/javascript" src="gl-matrix.js"></script>

<style>
    canvas {border: solid 1px black;}
    .matrixTable {
       display: inline-block;
       text-align:center;
       vertical-align: middle;
       border-left: solid 1pt;
       border-right: solid 1pt;
    }
    .matrixTable td {padding: 2px 10px;}
</style>
</head>

<script type="text/javascript">
    var ctx1, ctx2;
    var dragging = false;
    var params = {
        'x0': 150,
        'y0': 20,
        'scale' : 1.0,
        'angle': 0,
        'showImage': true
    }

    /* ### GUI ### */
    var gui;
    function initGUI() {
        gui = new dat.GUI({ autoPlace: true });

        gui.add(params, 'x0').min(0).max(w2).listen().onChange(drawAll);
        gui.add(params, 'y0').min(0).max(h2).listen().onChange(drawAll);
        gui.add(params, 'scale').min(0.01).max(2.5).step(0.01).listen().onChange(drawAll);
        gui.add(params, 'angle').min(-180).max(180).listen().onChange(drawAll);
        gui.add(params, 'showImage').onChange(drawAll);

        //var parent = document.getElementById('controls');
        //parent.appendChild(gui.domElement);
    }

    /* ### Mouse ### */
    var dragRedPin = 0
    function initMouse() {
        // To be called in start() after defininf canvas1 and canvas2
        canvas1.addEventListener("mousedown", onMouseDown, false);
        canvas2.addEventListener("mousedown", onMouseDown, false);
        canvas1.addEventListener("mousemove", onMouseMove, false);
        canvas2.addEventListener("mousemove", onMouseMove, false);
        canvas1.addEventListener("mouseup", onMouseUp, false);
        canvas2.addEventListener("mouseup", onMouseUp, false);
        //canvas1.addEventListener('mousedown',engage);
//canvas1.addEventListener('mousemove', putPoint);
//canvas1.addEventListener('mouseup',disengage);
    }
var dragging = false;


    function onMouseDown(event) {
        var rect = event.target.getBoundingClientRect()
        xpix = event.clientX - rect.left
        ypix = event.clientY - rect.top

        // Uncomment for debugging
        console.log("Mouse Down", event)
        console.log("Pixel coordinates", xpix,ypix)

        if (event.target == canvas1) {

            // TODO: Q1 - Add functionality to draw polylines instead of just single squares

            ctx1.strokeStyle = '#ff8000'; // Orange
            ctx1.lineWidth = 4;
           ctx1.setTransform(1, 0, 0, 1, 0, 0)
            drawSquare(ctx1, xpix,ypix, 4)
             dragging = true;
             onMouseMove();
            /*ctx1.lineTo(event.clientX, event.clientY);
           ctx1.stroke();
            ctx1.beginPath();
            ctx1.moveTo(event.clientX, event.clientY);*/

            drawAll()
        } else if (event.target == canvas2) {
            // If close to the red pin
            if ((Math.abs(xpix-params.x0)<10) && (Math.abs(ypix-params.y0)<10)) {
                dragRedPin=1 // Set drag state to 1
                // Not really required to change (x0,y0) if this is done in mouseDrag
                // Uncomment for debugging
                //params.x0 = xpix; params.y0 = ypix;
                //drawAll()
            }
        }
    }
    function onMouseMove(event) {
        // Dispatch move event to drag if we are currently dragging the red pin
        if ((dragRedPin>0)&&(event.target == canvas2)) return onDragRedPin(event)
        // Ignore else

            var rect = event.target.getBoundingClientRect()
            xpix = event.clientX - rect.left
            ypix = event.clientY - rect.top
            if(dragging ==true){
            ctx1.lineTo(xpix, ypix);
            ctx1.stroke();
            ctx1.beginPath();
            ctx1.moveTo(xpix, ypix);
}
    }
    function onMouseUp(event) {
        // Stop dragging
        dragRedPin = 0;
        dragging = false;
    }
    function onDragRedPin(event) {
        var rect = event.target.getBoundingClientRect()
        xpix = event.clientX - rect.left
        ypix = event.clientY - rect.top

        // Assume (event.target == canvas2)
        params.x0 = xpix;
        params.y0 = ypix;
        drawAll()
    }

    /* ### Drawing ### */
    function drawSquare(ctx, x,y, w) {
        ctx.beginPath();
        ctx.moveTo(x-w/2, y-w/2);
        ctx.lineTo(x+w/2, y-w/2);
        ctx.lineTo(x+w/2, y+w/2);
        ctx.lineTo(x-w/2, y+w/2);
        ctx.lineTo(x-w/2, y-w/2);
        ctx.stroke();
    }


    function drawShape(ctx, pts) {

        // TODO: Q2 - Draw shape corresponding to pts
       //ctx.setTransform(pts[0],pts[1], pts[2], pts[3], pts[4], pts[5]);

       ctx.beginPath()
       ctx.moveTo(0, 0)
       ctx.lineTo(pts[0], pts[1])
        ctx.lineTo(pts[2], pts[3])
        ctx.lineTo(pts[4], pts[5])
        ctx.lineTo(pts[6], pts[7])
        ctx.closePath();
        ctx.stroke();
        ctx.closePath();
        console.log("pts from ds")
console.log(pts)
    }
    function transformPoints(M, pts) { //pts is an array containing 4 x's and 4 y's
        var pts2=[];

        // TODO: Q3 - Transform shapes using affine transform

       pts2[0]= pts[0]*M[0];
       pts2[1]= pts[1]*M[1];
       pts2[2]= pts[2]*M[2];
       pts2[3]= pts[3]*M[3];
       pts2[4]= pts[4]*M[4];
       pts2[5]= pts[5]*M[5];
       pts2[6]= pts[6]*M[6];
       pts2[7]= pts[7]*M[7];

        return pts2
    }
    // Auxiliary: display mat3 matrix as HTML
    mat3.toHTML = function(m) {
        var str = '<table class="matrixTable"><tbody>'

        str += '<tr><td>'+m[0].toFixed(2)+'</td><td>'+m[3].toFixed(2)+'</td><td>'+m[6].toFixed(2)+'</td></tr>';
        str += '<tr><td>'+m[1].toFixed(2)+'</td><td>'+m[4].toFixed(2)+'</td><td>'+m[7].toFixed(2)+'</td></tr>';
        str += '<tr><td>'+m[2].toFixed(2)+'</td><td>'+m[5].toFixed(2)+'</td><td>'+m[8].toFixed(2)+'</td></tr>';

        str += '</tbody></table>'

        return str
    }

    function drawAll() {
        // Reset canvases
        ctx1.setTransform(1, 0, 0, 1, 0, 0) // Reset transform
        ctx2.setTransform(1, 0, 0, 1, 0, 0)
        //ctx1.clearRect(0,0,w1,h1)  // Clear canvas
        ctx2.clearRect(0,0,w2,h2)

        // Draw red pin on canvas 1
        ctx1.strokeStyle = '#ff0000';
        ctx1.lineWidth = 3;
        drawSquare(ctx1, w1/2,0, 10)

        // Draw red pin directly to canvas 2
        ctx2.strokeStyle = '#ff0000';
        ctx2.lineWidth = 3;
        drawSquare(ctx2, params.x0,params.y0, 10)


        // TODO: Q2 - Draw bounding box of canvas1 using drawShape()
        //var pts = [1,0.5, -0.5,1, 30,10,];
        var pts = [0,0, w1,0, w1,h1, 0,h1]; //change to size of canvas!!!!!!
        ctx1.strokeStyle = 'blue'
        ctx1.lineWidth = 3
        drawShape(ctx1, pts);

        var M = mat3.create()


        // TODO: Q3 - define the content of M
        /*mat3.identity(M)
        mat3.translate(M, M, [params.x0, params.y0])*/
        mat3.identity(M)
        mat3.translate(M, M, [w1/2, 0])
        mat3.rotate(M, M, params.angle)
        mat3.scale(M, M, [params.scale, params.scale])
        var pts2 = transformPoints(M, pts)
        matElem = document.getElementById('mat')
        matElem.innerHTML = 'M = '+mat3.toHTML(M)
        console.log(M)
        console.log("This is pts2");
        console.log(pts2)
        console.log(pts)
        // TODO: Q3 - Draw bounding box of canvas1 transformed to canvas2
        ctx2.strokeStyle = 'blue'
        ctx2.lineWidth = 3
        drawShape(ctx2, pts2)
        // TODO: Q5 - Copy canvas1 transformed into canvas2

    }


    /* ### Initialization ### */
    function start() {
        canvas1 = document.getElementById('canvas1');
        canvas2 = document.getElementById('canvas2');
        ctx1 = canvas1.getContext('2d')
        ctx2 = canvas2.getContext('2d')

        w1 = canvas1.width;
        h1 = canvas1.height;
        w2 = canvas2.width;
        h2 = canvas2.height;

        initGUI()
        initMouse()

        drawAll()
        // Note: no animation here: drawAll is called only when it needs refreshing

    }
</script>

<body onload="start();">
    <h2>Mouse interaction and geometry</h2>

    <div style="display:inline-block">
    Original <br/>
    <canvas id="canvas1" width="200" height="200"></canvas>
    </div>

    <div style="display:inline-block">
    Transformed        <br/>
    <canvas id="canvas2" width="300" height="300"></canvas>
    </div>

    <div style="display:inline-block">
    <!-- GUI <br/> -->
    <span id="controls"></span>
    </div>

    <div id='mat'></div>

</body>
</html>