Operaciones con Matrices 3x3

UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO
Centro Universitario UAEM Atlacomulco
FUNDAMENTOS DE ROBÓTICA
MAESTRO: Ing. Marco Antonio López Paredes
REPORTE:
PROGRAMA QUE RESUELVE OPERACIONES BASICAS (SUMA, RESTA,
MULTIPLICACIÓN Y DIVISIÓN) CON MATRICES DE 3X3
INTEGRANTES DE EQUIPO:
David González Segundo
Alfredo Marcelo Hipólito
Nayeli González Quintana
FEBRERO 2015
INTRODUCCIÓN
Una matriz de 3 x 3 es una matriz rectangular a menudo cuadrada de números de
3 columnas y 3 filas o expresiones que pueden evaluarse como números. Las
dimensiones m x n se refieren al número de filas (m) y columnas (n)
respectivamente. Los valores individuales que constituyen una matriz se
denominan sus elementos, generalmente mencionados por sus números de fila y
columna, llamadas índices.
Para poder elaborar este programa lo primero que se requirió fueron los
conocimientos previos de cómo se resuelve una matriz de 3x3, como a
continuación se describe de manera breve.
SUMA DE MATRICES 3X3
Existen restricciones específicas sobre las dimensiones de las matrices que se
pueden agregar. En la adición de matriz a y B, el número de columnas de la matriz
debe ser igual al número de filas de matriz B. La adición de matriz resultante
tendrá el mismo número de filas como matriz a y el mismo número de columnas
que b.
RESTA DE MATRICES 3X3
En la matriz de resta a y B, el número de columnas de la matriz debe ser igual al
número de filas de matriz B. La matriz resultante resta tendrá el mismo número de
filas como matriz a y el mismo número de columnas que b.
MULTIPLICACIÓN DE MATRICES 3X3
En las matrices de AB, el número de columnas de la matriz debe ser igual al
número de filas de matriz B. La matriz de producto resultante tendrá el mismo
número de filas como matriz a y el mismo número de columnas que b.
DIVISIÓN DE MATRICES 3X3
Para elaborar la división de una matriz se decidió tomar el método que permite
dividir a la matriz por un valor escalar.
DESARROLLO
Una vez adquiridos los conocimientos de cómo se resuelven las matrices,
optamos por el elaborar un pseudocódigo previo para el que será nuestro
programa. Posteriormente, elegimos el lenguaje donde se encuentra plasmado
nuestro código fuente (HTML) elaboramos también un diagrama de flujo que nos
servirá como guía de dicho procedimiento de resolución.
DIAGRAMA DE FLUJO
INICIO
matrizA
matrizB
Ingresa matrizA
Ingresa matrizB
for i=0; i<3; i=i+1
for j=0; j<3; j=j+1
SUMA
matrizA+matrizB
IMPRIME
SUMA
RESTA
matrizA-matrizB
IMPRIME
RESTA
MULTIPLICA
matrizA*matrizB
IMPRIME
MULTIPLICACIÓN
DIVIDE
matrizA/matrizB
IMPRIME
DIVISIÓN
FIN
PSEUDOCODIGO
Var A[,]: entero
Var B[,] :entero
Var matriz_resultado[,] :double
PASO 1: DECLARACIÓN DE ARREGLOS
Desde i=0 hasta longitud A hacer
Desde j=0 hasta longitud A.renglon hacer
Lee A(i, j)
Desde i=0 hasta longitud B hacer
Desde j=0 hasta longitud B.renglon hacer
Lee B(i, j)
PASO 2: ESTABLECER RECORRIDO DEL
ARREGLO, PARA PODER OCUPAR LOS ESPACIOS
VACIOS DE NUESTRA MATRIZ
Var elección: entero
Entero ← tipo_operacion
Procedimiento tipo_operacion
Caso suma:
Desde i=0 hasta longitud matriz_resultado hacer
Desde j=0 hasta longitud matriz_resultado.renglon hacer
matriz_resultado (i,j)←A(i,j)+B(i,j)
Caso resta:
Desde i=0 hasta longitud matriz_resultado hacer
Desde j=0 hasta longitud matriz_resultado.renglon hacer
matriz_resultado (i,j)←A(i,j)-B(i,j)
Caso multiplicación:
Desde i=0 hasta longitud matriz_resultado hacer
Desde j=0 hasta longitud matriz_resultado.renglon hacer
matriz_resultado (i,j)← A(i,j)*B(i,j)
Caso división:
Var k :entero
Lee k
Desde i=0 hasta longitud matriz_resultado hacer
Desde j=0 hasta longitud matriz_resultado.renglon hacer
matriz_resultado (i,j)←A(i,j)/k
procedimiento imprimir_resultado
Desde i=0 hasta longitud matriz_resultado hacer
Desde j=0 hasta longitud matriz_resultado.renglon hacer
Imprimir matriz_resultado (i,j)←A(i,j)+B(i,j)
CÓDIGO FUENTE
PASO 3: LA FUNCION QUE SE REALIZA EN
ESTA PARTE, ES RETORNAR COMO
PARAMATRO LA OPERACIÓN A REALIZAR
PASO 4: SE REALIZA LA TAREA DE ACUERDO A
LA OPERACIÓN, Y SE RETORNAN LOS VALORES
EN UNA NUEVA MATRIZ MOSTRANDOSE COMO
RESULTADO.
Interfaz
La interfaz está diseñada con HTML, la cual contiene listas en formato tabla con
identificadores cada una, las cuales permiten que estos interactúen con los
números introducidos y las funciones a realizar.
<!DOCTYPE html>
<html>
<head>
<title>Operaciones con matrices</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<hr>
<br>
<span class="titulo">OPERACIONES CON MATRICES</span>
<br>
<div class="matriz" id="matrizA">
<ul class="cuadro">
<li><input type="text" id="a11"/></li>
<li><input type="text" id="a12"/></li>
<li><input type="text" id="a13"/></li>
</ul>
<ul class="cuadro">
<li><input type="text" id="a21"/></li>
<li><input type="text" id="a22"/></li>
<li><input type="text" id="a23"/></li>
</ul>
<ul class="cuadro">
<li><input type="text" id="a31"/></li>
<li><input type="text" id="a32"/></li>
<li><input type="text" id="a33"/></li>
</ul>
</div>
<div class="operacion">
<select id="tipo">
<option value="suma">SUMA</option>
<option value="resta">RESTA</option>
<option value="multiplicacion">MULTIPLICACION</option>
<option value="division">DIVISION</option>
</select>
</div>
<div class="operacion" style="top:160px;">
K
<input type="text" id="txtDivision" value="0"/>
</div>
<div class="matriz" id="matrizB" style="left:500px">
<ul class="cuadro">
<li><input type="text" id="b11"/></li>
<li><input type="text" id="b12"/></li>
<li><input type="text" id="b13"/></li>
</ul>
<ul class="cuadro">
<li><input type="text" id="b21"/></li>
<li><input type="text" id="b22"/></li>
<li><input type="text" id="b23"/></li>
</ul>
<ul class="cuadro">
<li><input type="text" id="b31"/></li>
<li><input type="text" id="b32"/></li>
<li><input type="text" id="b33"/></li>
</ul>
</div>
<div class="matriz" id="resultado" style="left:850px">
<ul class="cuadro">
<li id="r11">0</li>
<li id="r12">0</li>
<li id="r13">0</li>
</ul>
<ul class="cuadro">
<li id="r21">0</li>
<li id="r22">0</li>
<li id="r23">0</li>
</ul>
<ul class="cuadro">
<li id="r31">0</li>
<li id="r32">0</li>
<li id="r33">0</li>
</ul>
</div>
<button id="btnCalcular" onclick="operar()">Calcular</button>
<button id="btnLimpiar" onclick="limpiar()">Limpiar</button>
<div id="respuesta" style="top:180px; position: relative; left: 60px;">para
division usa la primera matriz
</div>
</body>
</html>
Estilos
Los estilos de la interfaz del programa operaciones con matrices solo dan forma a
los objetos del documento para mejor uso.
body
{
background-color: #F5DA81;
}
.cuadro
{
margin: 0px;
padding: 0px;
}
.cuadro > li
{
display: table-cell;
font-family:arial;
width: 70px;
max-height: 50px;
border-style: solid;
border-width: 1px;
}
.matriz
{
left: 100px;
position: absolute;
top:90px;
width: 215px;
background-color: white;
border-color: #FF0000;
}
input
{
width: 68px;
margin: 0px;
padding: 0px;
font-size: 40px;
text-align: center;
}
.operacion
{
left: 340px;
top: 130px;
position:absolute;
}
.titulo
{
color: red;
font-size: 30px;
font-family: georgia;
position: relative;
left: 200px;
}
#btnCalcular
{
position:absolute;
right:780px;
top:11em;
}
#resultado1
{
font-size: 40px;
color:red;
text-align: center;
min-height: 50px;
position: absolute;
}
Funciones
Esta parte del programa es la más importante, ya que permite realizar las
operaciones de acuerdo a los números introducidos, las cuales están
programadas con javascript
En esta parte solo se alerta que la página ya esté lista.
window.onload = function()
{
alert("listo");
};
Esta función realiza el tipo de operación que el usuario eligió.
function operar()
{
try
{
var posicion=document.getElementById('tipo').options.selectedIndex;
var tipo_operacion =
document.getElementById('tipo').options[posicion].text;
calcular(tipo_operacion);
}
catch(error)
{
alert(error);
}
};
Función que crea una nueva matriz en blanco para que pueda ocuparse con las
operaciones, va de acuerdo con los valores que el usuario introdujo en el
programa
function getMatriz(id)
{
var M = new Array(3);
for (i = 0; i < 3; i++)
{
M[i]=new Array(3);
}
for(var i=0; i<M.length; i++)
{
for(var j=0; j<M[i].length; j++)
{
M[i][j]=parseFloat(document.getElementById(id+(i+1)+""+(j+1)).value);
}
}
return M;
};
Aquí es la función que se realiza cuando se presiona el botón calcular, la función
recibe de parámetro el tipo de operación para hacer la tarea y el resultado lo
retorna en una nueva matriz que se construye después de realizar la operación.
function calcular(tipo_operacion)
{
var A = getMatriz("a");
var B = getMatriz("b");
switch (tipo_operacion)
{
case "SUMA":
for(var i=0; i<A.length; i++)
{
for(var j=0; j<A[i].length; j++)
{
document.getElementById("r"+(i+1)+""+(j+1)).innerHTML
= A[i][j] + B[i][j];
}
}
break;
case "RESTA":
for(var i=0; i<A.length; i++)
{
for(var j=0; j<A[i].length; j++)
{
document.getElementById("r"+(i+1)+""+(j+1)).innerHTML
= A[i][j] - B[i][j];
}
}
break;
case "MULTIPLICACION":
document.getElementById("r11").innerHTML = (A[0][0] * B[0][0]) +
(A[0][1] * B[1][0]) + (A[0][2] * B[2][0]);
document.getElementById("r12").innerHTML = (A[0][0] * B[0][1]) +
(A[0][1] * B[1][1]) + (A[0][2] * B[2][1]);
document.getElementById("r13").innerHTML = (A[0][0] * B[0][2]) +
(A[0][1] * B[1][2]) + (A[0][2] * B[2][2]);
document.getElementById("r21").innerHTML = (A[1][0] * B[0][0]) +
(A[1][1] * B[1][0]) + (A[1][2] * B[2][0]);
document.getElementById("r22").innerHTML = (A[1][0] * B[0][1]) +
(A[1][1] * B[1][1]) + (A[1][2] * B[2][1]);
document.getElementById("r23").innerHTML = (A[1][0] * B[0][2]) +
(A[1][1] * B[1][2]) + (A[1][2] * B[2][2]);
document.getElementById("r31").innerHTML = (A[2][0] * B[0][0]) +
(A[2][1] * B[1][0]) + (A[2][2] * B[2][0]);
document.getElementById("r32").innerHTML = (A[2][0] * B[0][1]) +
(A[2][1] * B[1][1]) + (A[2][2] * B[2][1]);
document.getElementById("r33").innerHTML = (A[2][0] * B[0][2]) +
(A[2][1] * B[1][2]) + (A[2][2] * B[2][2]);
break;
case "DIVISION":
var k =parseFloat(document.getElementById("txtDivision").value);
for(var i=0; i<A.length; i++)
{
for(var j=0; j<A[i].length; j++)
{
document.getElementById("r"+(i+1)+""+(j+1)).innerHTML
= A[i][j] /k;
}
}
break;
default:
alert("no se encontro operacion")
break;
}
};
Esta función solo limpia los campos de las matrices si el usuario desea introducir
nuevos valores para operar con matrices
function limpiar()
{
var A = getMatriz("a");
var B = getMatriz("b");
for(var i=0; i<A.length; i++)
{
for(var j=0; j<A[i].length; j++)
{
document.getElementById("a"+(i+1)+""+(j+1)).value = "";
document.getElementById("b"+(i+1)+""+(j+1)).value = "";
}
}
}
ANEXOS
SUMA
RESTA
MULTIPLICACIÓN
DIVISIÓN