carolinesalib/wireframe.html

## wireframe.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Rotating Wireframe cube</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            height: 100%;
            width: 100%;
        }
        canvas
        {
            display:block;
            visibility:hidden;
        }
        #editor
        {
            background-color: #ffffff;
            width: 100%;
            padding-left: 25px;
            padding-top: 15px;
            padding-bottom: 15px;
            font-family: arial;
        }
        #target
        {
            background: #001022;
        }
        .edit{
            width: 35px;
            height: 18px;
            text-align: right;
        }
        #btnCreate{
            padding : 8px 18px;
            border-radius: 4px;
            border: 1px solid #ffffff;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="editor">

        <form>
            Escala:
            <input class="edit" type="text" id="sx" placeholder="0.5 X">
            <input class="edit" type="text" id="sy" placeholder="0.5 Y">
            <input class="edit" type="text" id="sz" placeholder="0.5 Z">
            Translação:
            <input class="edit" type="text" id="tx" placeholder="1 X">
            <input class="edit" type="text" id="ty" placeholder="0 Y">
            <input class="edit" type="text" id="tz" placeholder="0 Z">
            Rotação:
            <input class="edit" type="text" id="rx" placeholder="1 X">
            <input class="edit" type="text" id="ry" placeholder="1 Y">
            <input class="edit" type="text" id="rz" placeholder="1 Z">

            <input type="button" id="btnCreate" value="Create cube">
        </form>
    </div>
    <canvas id="target">
    </canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            var canvas = $("#target");
            canvas.css("visibility", "visible");
            var context = canvas.get(0).getContext("2d");
            var canvasWidth = canvas.width();
            var canvasHeight = canvas.height();
            var entities = [];

            $(window).resize(resizeCanvas);

            function resizeCanvas() {
                canvas.attr("width", $(window).get(0).innerWidth);
                canvas.attr("height", $(window).get(0).innerHeight);
                canvasWidth = canvas.width();
                canvasHeight = canvas.height();
            };

            resizeCanvas();

            // ---------------------------------------------------------------------
            var MatrixUtils = {
                identity: function () {
                    return new Matrix([
                    [1, 0, 0, 0],
                    [0, 1, 0, 0],
                    [0, 0, 1, 0],
                    [0, 0, 0, 1]
                ]);
                },

                rotationZ: function (q) {
                    return new Matrix([
                    [Math.cos(q), Math.sin(q), 0, 0],
                    [-Math.sin(q), Math.cos(q), 0, 0],
                    [0, 0, 1, 0],
                    [0, 0, 0, 1]
                ]);
                },

                rotationX: function (q) {
                    return new Matrix([
                    [1, 0, 0, 0],
                    [0, Math.cos(q), Math.sin(q), 0],
                    [0, -Math.sin(q), Math.cos(q), 0],
                    [0, 0, 0, 1]
                ]);
                },

                rotationY: function (q) {
                    return new Matrix([
                    [Math.cos(q), 0, -Math.sin(q), 0],
                    [0, 1, 0, 0],
                    [Math.sin(q), 0, Math.cos(q), 0],
                    [0, 0, 0, 1]
                ]);
                },

                translation: function (tx, ty, tz) {

                    return new Matrix([
                        [1, 0, 0, parseInt(tx)],
                        [0, 1, 0, parseInt(tx)],
                        [0, 0, 1, parseInt(tx)],
                        [0, 0, 0, 1]
                    ]);
                },

                scale: function (sx, sy, sz) {
                    return new Matrix([
                        [sx, 0, 0, 0],
                        [0, sx, 0, 0],
                        [0, 0, sz, 0],
                        [0, 0, 0, 1]
                    ]);
                }
            };

            function Matrix(cells) {
                this.cells = cells;

                this.mult = function (m) {
                    var result = [];
                    for (var i = 0; i < 4; i++) {
                        result[i] = [];
                        for (var j = 0; j < 4; j++) {
                            result[i][j] = this.cells[i][0] * m.cells[0][j] +
                                this.cells[i][1] * m.cells[1][j] +
                                this.cells[i][2] * m.cells[2][j] +
                                this.cells[i][3] * m.cells[3][j];
                        }
                    }
                    return new Matrix(result)
                }
            }

            // ---------------------------------------------------------------------

            function Vector3D(x, y, z) {
                this.x = x;
                this.y = y;
                this.z = z;

                this.perspective = function (viewWidth, viewHeight, fov, viewDistance) {
                    var factor, x, y
                    factor = fov / (viewDistance + this.z)
                    x = this.x * factor + viewWidth / 2
                    y = this.y * factor + viewHeight / 2
                    return new Vector3D(x, y, this.z)
                };

                this.mult = function (m) {
                    var nx, ny, nz;
                    nx = m.cells[0][0] * this.x +
                     m.cells[0][1] * this.y +
                     m.cells[0][2] * this.z +
                     m.cells[0][3];

                    ny = m.cells[1][0] * this.x +
                     m.cells[1][1] * this.y +
                     m.cells[1][2] * this.z +
                     m.cells[1][3];

                    nz = m.cells[2][0] * this.x +
                     m.cells[2][1] * this.y +
                     m.cells[2][2] * this.z +
                     m.cells[2][3];

                    return new Vector3D(nx, ny, nz);
                };

                this.normalize = function () {
                    var d = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
                    return new Vector3D(this.x / d, this.y / d, this.z / d);
                };

                this.cross = function (another) {
                    x = this.y * another.z - this.z * another.y;
                    y = this.z * another.x - this.x * another.z;
                    z = this.x * another.y - this.y * another.x;
                    return new Vector3D(x, y, z);
                }

                this.dot = function (another) {
                    return this.X * another.X + this.Y * another.Y + this.Z * another.Z;
                }
            }

            // ---------------------------------------------------------------------
            function Cube(scaleMatrix, rotationMatrix, translationMatrix, rotationX, rotationY, rotationZ) {
                var vertices = [
                    new Vector3D(-1, 1, -1),
                    new Vector3D(1, 1, -1),
                    new Vector3D(1, -1, -1),
                    new Vector3D(-1, -1, -1),
                    new Vector3D(-1, 1, 1),
                    new Vector3D(1, 1, 1),
                    new Vector3D(1, -1, 1),
                    new Vector3D(-1, -1, 1)
                ];

                var faces = [
                    [0, 1, 2, 3],
                    [1, 5, 6, 2],
                    [5, 4, 7, 6],
                    [4, 0, 3, 7],
                    [0, 4, 5, 1],
                    [3, 2, 6, 7]
                ];

                this.scaleMatrix = scaleMatrix;
                this.rotationMatrix = rotationMatrix;
                this.translationMatrix = translationMatrix;


                this.rotationX = rotationX;
                this.rotationY = rotationY;
                this.rotationZ = rotationZ;

                this.draw = function (context, w, h) {
                    var t = new Array();
                    for (var i = 0; i < 8; i++) {
                        var v = vertices[i];
                        var r = v
                            .mult(this.scaleMatrix)
                            .mult(this.rotationMatrix)
                            .mult(this.translationMatrix)
                            .perspective(
                                canvasWidth,
                                canvasHeight,
                                Math.min(canvasWidth, canvasHeight) * 0.9,
                                3.5);

                        t.push(r);
                    }
                    context.strokeStyle = "rgb(255,255,255)"

                    for (var i = 0; i < faces.length; i++) {
                        var f = faces[i];
                        context.beginPath();
                        context.moveTo(t[f[0]].x, t[f[0]].y);
                        context.lineTo(t[f[1]].x, t[f[1]].y);
                        context.lineTo(t[f[2]].x, t[f[2]].y);
                        context.lineTo(t[f[3]].x, t[f[3]].y);
                        context.closePath();
                        context.stroke();
                    }
                }
            }

            // ---------------------------------------------------------------------
            function DTR(x) {
                return x * Math.PI / 180;
            }

            function loadContent() {
                animate();
            }

            loadContent();

            function animate() {
                update();
                draw();
                setTimeout(animate, 33);
            }

            function update() {
                for (var i = 0; i < entities.length; i++) {

                    var rx = entities[i].rotationX;
                    var ry = entities[i].rotationY;
                    var rz = entities[i].rotationZ;

                    entities[i].rotationMatrix = entities[i].rotationMatrix
                    .mult(MatrixUtils.rotationX(DTR(rx)))
                    .mult(MatrixUtils.rotationY(DTR(ry)))
                    .mult(MatrixUtils.rotationZ(DTR(rz)));
                }
            }

            function draw() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                for (var i = 0; i < entities.length; i++) {
                    entities[i].draw(context, canvasWidth, canvasHeight);
                }
            }

            $("#btnCreate" ).click(function() {

                var formInsert = document.forms[0];
                var fieldsValues = generateFieldsValues(formInsert);

                var sx = $( "#sx" ).val();
                var sy = $( "#sy" ).val();
                var sz = $( "#sz" ).val();

                var tx = $( "#tx" ).val();
                var ty = $( "#ty" ).val();
                var tz = $( "#tz" ).val();

                var rx = $( "#rx" ).val();
                var ry = $( "#ry" ).val();
                var rz = $( "#rz" ).val();

                entities.push(new Cube(
                    MatrixUtils.scale(sx, sy, sz),
                    MatrixUtils.identity(),
                    MatrixUtils.translation(tx, ty, tz), rx, ry, rz
                ));

                var frTabelaAcompanhamento = document.getElementById("target");

                var XMLHttp = generateXMLHttp();

                XMLHttp.open("post", url, true);
                XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                XMLHttp.onreadystatechange = function (){

                if(XMLHttp.readyState == 4)
                    frTabelaAcompanhamento.innerHTML = XMLHttp.responseText;
                else
                    frTabelaAcompanhamento.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
                };
                XMLHttp.send(fieldsValues);
            });

            function generateXMLHttp() {
                if (typeof XMLHttpRequest != "undefined"){
                    return new XMLHttpRequest();
                }
                else{
                    if (window.ActiveXObject){
                        var versions = ["MSXML2.XMLHttp.5.0",
                                        "MSXML2.XMLHttp.4.0",
                                        "MSXML2.XMLHttp.3.0",
                                        "MSXML2.XMLHttp",
                                        "Microsoft.XMLHttp"
                                        ];
                    }
                }
                for (var i=0; i < versions.length; i++){
                    try{
                        return new ActiveXObject(versions[i]);
                        }catch(e){}
                    }
                alert('Seu navegador não pode trabalhar com Ajax!');
            }

            function generateFieldsValues(formInsert){
                var strReturn = new Array();

                for(var i=0; i < formInsert.elements.length; i++){
                    var str = encodeURIComponent(formInsert.elements[i].name);
                    str += "=";
                    str += encodeURIComponent(formInsert.elements[i].value);
                    strReturn.push(str);
                }
                return strReturn.join("&");
            }

        });

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8">
	<title>Rotating Wireframe cube</title>
	<style type="text/css">
	*
	{
	margin: 0;
	padding: 0;
	}
	html, body
	{
	height: 100%;
	width: 100%;
	}
	canvas
	{
	display:block;
	visibility:hidden;
	}
	#editor
	{
	background-color: #ffffff;
	width: 100%;
	padding-left: 25px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-family: arial;
	}
	#target
	{
	background: #001022;
	}
	.edit{
	width: 35px;
	height: 18px;
	text-align: right;
	}
	#btnCreate{
	padding : 8px 18px;
	border-radius: 4px;
	border: 1px solid #ffffff;
	margin-left: 10px;
	}
	</style>
	</head>
	<body>
	<div id="editor">

	<form>
	Escala:
	<input class="edit" type="text" id="sx" placeholder="0.5 X">
	<input class="edit" type="text" id="sy" placeholder="0.5 Y">
	<input class="edit" type="text" id="sz" placeholder="0.5 Z">
	Translação:
	<input class="edit" type="text" id="tx" placeholder="1 X">
	<input class="edit" type="text" id="ty" placeholder="0 Y">
	<input class="edit" type="text" id="tz" placeholder="0 Z">
	Rotação:
	<input class="edit" type="text" id="rx" placeholder="1 X">
	<input class="edit" type="text" id="ry" placeholder="1 Y">
	<input class="edit" type="text" id="rz" placeholder="1 Z">

	<input type="button" id="btnCreate" value="Create cube">
	</form>
	</div>
	<canvas id="target">
	</canvas>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">

	$(function () {

	var canvas = $("#target");
	canvas.css("visibility", "visible");
	var context = canvas.get(0).getContext("2d");
	var canvasWidth = canvas.width();
	var canvasHeight = canvas.height();
	var entities = [];

	$(window).resize(resizeCanvas);

	function resizeCanvas() {
	canvas.attr("width", $(window).get(0).innerWidth);
	canvas.attr("height", $(window).get(0).innerHeight);
	canvasWidth = canvas.width();
	canvasHeight = canvas.height();
	};

	resizeCanvas();

	// ---------------------------------------------------------------------
	var MatrixUtils = {
	identity: function () {
	return new Matrix([
	[1, 0, 0, 0],
	[0, 1, 0, 0],
	[0, 0, 1, 0],
	[0, 0, 0, 1]
	]);
	},

	rotationZ: function (q) {
	return new Matrix([
	[Math.cos(q), Math.sin(q), 0, 0],
	[-Math.sin(q), Math.cos(q), 0, 0],
	[0, 0, 1, 0],
	[0, 0, 0, 1]
	]);
	},

	rotationX: function (q) {
	return new Matrix([
	[1, 0, 0, 0],
	[0, Math.cos(q), Math.sin(q), 0],
	[0, -Math.sin(q), Math.cos(q), 0],
	[0, 0, 0, 1]
	]);
	},

	rotationY: function (q) {
	return new Matrix([
	[Math.cos(q), 0, -Math.sin(q), 0],
	[0, 1, 0, 0],
	[Math.sin(q), 0, Math.cos(q), 0],
	[0, 0, 0, 1]
	]);
	},

	translation: function (tx, ty, tz) {

	return new Matrix([
	[1, 0, 0, parseInt(tx)],
	[0, 1, 0, parseInt(tx)],
	[0, 0, 1, parseInt(tx)],
	[0, 0, 0, 1]
	]);
	},

	scale: function (sx, sy, sz) {
	return new Matrix([
	[sx, 0, 0, 0],
	[0, sx, 0, 0],
	[0, 0, sz, 0],
	[0, 0, 0, 1]
	]);
	}
	};

	function Matrix(cells) {
	this.cells = cells;

	this.mult = function (m) {
	var result = [];
	for (var i = 0; i < 4; i++) {
	result[i] = [];
	for (var j = 0; j < 4; j++) {
	result[i][j] = this.cells[i][0] * m.cells[0][j] +
	this.cells[i][1] * m.cells[1][j] +
	this.cells[i][2] * m.cells[2][j] +
	this.cells[i][3] * m.cells[3][j];
	}
	}
	return new Matrix(result)
	}
	}

	// ---------------------------------------------------------------------

	function Vector3D(x, y, z) {
	this.x = x;
	this.y = y;
	this.z = z;

	this.perspective = function (viewWidth, viewHeight, fov, viewDistance) {
	var factor, x, y
	factor = fov / (viewDistance + this.z)
	x = this.x * factor + viewWidth / 2
	y = this.y * factor + viewHeight / 2
	return new Vector3D(x, y, this.z)
	};

	this.mult = function (m) {
	var nx, ny, nz;
	nx = m.cells[0][0] * this.x +
	m.cells[0][1] * this.y +
	m.cells[0][2] * this.z +
	m.cells[0][3];

	ny = m.cells[1][0] * this.x +
	m.cells[1][1] * this.y +
	m.cells[1][2] * this.z +
	m.cells[1][3];

	nz = m.cells[2][0] * this.x +
	m.cells[2][1] * this.y +
	m.cells[2][2] * this.z +
	m.cells[2][3];

	return new Vector3D(nx, ny, nz);
	};

	this.normalize = function () {
	var d = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
	return new Vector3D(this.x / d, this.y / d, this.z / d);
	};

	this.cross = function (another) {
	x = this.y * another.z - this.z * another.y;
	y = this.z * another.x - this.x * another.z;
	z = this.x * another.y - this.y * another.x;
	return new Vector3D(x, y, z);
	}

	this.dot = function (another) {
	return this.X * another.X + this.Y * another.Y + this.Z * another.Z;
	}
	}

	// ---------------------------------------------------------------------
	function Cube(scaleMatrix, rotationMatrix, translationMatrix, rotationX, rotationY, rotationZ) {
	var vertices = [
	new Vector3D(-1, 1, -1),
	new Vector3D(1, 1, -1),
	new Vector3D(1, -1, -1),
	new Vector3D(-1, -1, -1),
	new Vector3D(-1, 1, 1),
	new Vector3D(1, 1, 1),
	new Vector3D(1, -1, 1),
	new Vector3D(-1, -1, 1)
	];

	var faces = [
	[0, 1, 2, 3],
	[1, 5, 6, 2],
	[5, 4, 7, 6],
	[4, 0, 3, 7],
	[0, 4, 5, 1],
	[3, 2, 6, 7]
	];

	this.scaleMatrix = scaleMatrix;
	this.rotationMatrix = rotationMatrix;
	this.translationMatrix = translationMatrix;


	this.rotationX = rotationX;
	this.rotationY = rotationY;
	this.rotationZ = rotationZ;

	this.draw = function (context, w, h) {
	var t = new Array();
	for (var i = 0; i < 8; i++) {
	var v = vertices[i];
	var r = v
	.mult(this.scaleMatrix)
	.mult(this.rotationMatrix)
	.mult(this.translationMatrix)
	.perspective(
	canvasWidth,
	canvasHeight,
	Math.min(canvasWidth, canvasHeight) * 0.9,
	3.5);

	t.push(r);
	}
	context.strokeStyle = "rgb(255,255,255)"

	for (var i = 0; i < faces.length; i++) {
	var f = faces[i];
	context.beginPath();
	context.moveTo(t[f[0]].x, t[f[0]].y);
	context.lineTo(t[f[1]].x, t[f[1]].y);
	context.lineTo(t[f[2]].x, t[f[2]].y);
	context.lineTo(t[f[3]].x, t[f[3]].y);
	context.closePath();
	context.stroke();
	}
	}
	}

	// ---------------------------------------------------------------------
	function DTR(x) {
	return x * Math.PI / 180;
	}

	function loadContent() {
	animate();
	}

	loadContent();

	function animate() {
	update();
	draw();
	setTimeout(animate, 33);
	}

	function update() {
	for (var i = 0; i < entities.length; i++) {

	var rx = entities[i].rotationX;
	var ry = entities[i].rotationY;
	var rz = entities[i].rotationZ;

	entities[i].rotationMatrix = entities[i].rotationMatrix
	.mult(MatrixUtils.rotationX(DTR(rx)))
	.mult(MatrixUtils.rotationY(DTR(ry)))
	.mult(MatrixUtils.rotationZ(DTR(rz)));
	}
	}

	function draw() {
	context.clearRect(0, 0, canvasWidth, canvasHeight);
	for (var i = 0; i < entities.length; i++) {
	entities[i].draw(context, canvasWidth, canvasHeight);
	}
	}

	$("#btnCreate" ).click(function() {

	var formInsert = document.forms[0];
	var fieldsValues = generateFieldsValues(formInsert);

	var sx = $( "#sx" ).val();
	var sy = $( "#sy" ).val();
	var sz = $( "#sz" ).val();

	var tx = $( "#tx" ).val();
	var ty = $( "#ty" ).val();
	var tz = $( "#tz" ).val();

	var rx = $( "#rx" ).val();
	var ry = $( "#ry" ).val();
	var rz = $( "#rz" ).val();

	entities.push(new Cube(
	MatrixUtils.scale(sx, sy, sz),
	MatrixUtils.identity(),
	MatrixUtils.translation(tx, ty, tz), rx, ry, rz
	));

	var frTabelaAcompanhamento = document.getElementById("target");

	var XMLHttp = generateXMLHttp();

	XMLHttp.open("post", url, true);
	XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	XMLHttp.onreadystatechange = function (){

	if(XMLHttp.readyState == 4)
	frTabelaAcompanhamento.innerHTML = XMLHttp.responseText;
	else
	frTabelaAcompanhamento.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
	};
	XMLHttp.send(fieldsValues);
	});

	function generateXMLHttp() {
	if (typeof XMLHttpRequest != "undefined"){
	return new XMLHttpRequest();
	}
	else{
	if (window.ActiveXObject){
	var versions = ["MSXML2.XMLHttp.5.0",
	"MSXML2.XMLHttp.4.0",
	"MSXML2.XMLHttp.3.0",
	"MSXML2.XMLHttp",
	"Microsoft.XMLHttp"
	];
	}
	}
	for (var i=0; i < versions.length; i++){
	try{
	return new ActiveXObject(versions[i]);
	}catch(e){}
	}
	alert('Seu navegador não pode trabalhar com Ajax!');
	}

	function generateFieldsValues(formInsert){
	var strReturn = new Array();

	for(var i=0; i < formInsert.elements.length; i++){
	var str = encodeURIComponent(formInsert.elements[i].name);
	str += "=";
	str += encodeURIComponent(formInsert.elements[i].value);
	strReturn.push(str);
	}
	return strReturn.join("&");
	}

	});

	</script>
	</body>
	</html>