En esta entrada te compartiré un recurso educativo digital que puedes usar sin conexión a internet. Es perfecto para docentes de geometría que desean enseñar las líneas y puntos notables de un triángulo de forma divertida, interactiva y offline.
Con este material podrás manipular un simulador de líneas y puntos notables de un triángulo sin internet y ejecutarlo directamente desde tu computador, sin necesidad de conexión. Ideal para aulas rurales o zonas sin conectividad.
Déjanos apoyarte en demostrar que las matemáticas son fáciles si se enseñan bien. Dale un vistazo a nuestra súper clase de Líneas y puntos notables de un triángulo full explicada a detalle aquí.
¿Por qué usar juegos o simuladores interactivos para enseñar matemáticas?
Los juegos educativos interactivos ayudan a que los niños aprendan matemáticas de manera visual y entretenida.
Al no depender de internet, este material offline garantiza que el aprendizaje continúe en cualquier entorno.
Además, los profesores pueden proyectar el juego en clase o dejar que los estudiantes practiquen desde un computador escolar.
Existen varios tipos de juegos didácticos para practicar o enseñar matemáticas… aquí en nuestro sitio encontrarás muchos RETOS MATEMÁTICOS, además de MATEGRAMAS y CRUCIOPERACIONES!
¿Cómo utilizo el simulador de líneas y puntos notables de un triángulo con mis estudiantes sin internet?
Lo primero es copiar el código que aparece a continuación y seguir las instrucciones de de nuestro vídeo YouTube (está después del código)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIMULADOR DE LINEAS Y PUNTOS NOTABLES DE UN TRIÁNGULO</title>
<style>
body {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.panel {
width: 45%;
padding: 20px;
background-color: #f0f0f0;
overflow-y: auto;
}
canvas {
width: 50%;
height: 100%;
background-color: white;
border: 1px solid #333;
}
.group {
margin-bottom: 15px;
}
h2 {
margin-top: 0;
}
button {
margin-top: 15px;
padding: 5px 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="panel">
<div style="text-align: center; font-family: Arial, sans-serif;">
<h2> <a href="https://www.lasmatesfaciles.com" target="_blank"
style="color: red; font-weight: bold; text-decoration: none;">
www.lasmatesfaciles.com
</a></h2>
<h3 style=" color: blue;">
Las matemáticas son fáciles si se enseñan bien
</p>
</div>
<h3 style="font-family: Arial, sans-serif;">Propiedades Notables del Triángulo</h3>
<div class="group">
<label><input type="checkbox" id="bisectrices"> Mostrar bisectrices</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="incentro"> Incentro</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="incircle"> Circunferencia inscrita</label>
</div>
<div class="group">
<label><input type="checkbox" id="medianas"> Mostrar medianas</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="baricentro"> Baricentro</label><br>
<small style="margin-left:20px; display:block;">El baricentro divide la mediana en dos segmentos, uno el doble del otro.</small>
</div>
<div class="group">
<label><input type="checkbox" id="mediatrices"> Mostrar mediatrices</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="circuncentro"> Circuncentro</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="circuncircle"> Circunferencia circunscrita</label>
</div>
<div class="group">
<label><input type="checkbox" id="alturas"> Mostrar alturas</label><br>
<label style="margin-left:20px;"><input type="checkbox" id="ortocentro"> Ortocentro</label><br>
</div>
<div class="group">
<label><input type="checkbox" id="euler"> Mostrar Recta de Euler</label>
<div style="margin-left:20px;">
<span style="color:red">Ortocentro</span><br>
<span style="color:blue">Baricentro</span><br>
<span style="color:green">Circuncentro</span>
</div>
<button id="clearAll">Borrar todo</button>
</div>
<div style="font-family: Arial, sans-serif; font-size: 14px;">
<p><b>Bisectrices:</b> Son las líneas que dividen en dos partes iguales a cada ángulo del triángulo.</p>
<p><b>Incentro:</b> Punto donde se cortan las bisectrices. Es el centro de la circunferencia inscrita en el triángulo.</p>
<br>
<p><b>Medianas:</b> Son los segmentos que unen cada vértice con el punto medio del lado opuesto.</p>
<p><b>Baricentro:</b> Punto donde se cortan las medianas. Divide a cada mediana en una razón 2:1 y es el centro de gravedad del triángulo.</p>
<br>
<p><b>Mediatrices:</b> Son las rectas perpendiculares a cada lado que pasan por su punto medio.</p>
<p><b>Circuncentro:</b> Punto donde se cortan las mediatrices. Es el centro de la circunferencia circunscrita al triángulo.</p>
<br>
<p><b>Alturas:</b> Son los segmentos perpendiculares trazados desde un vértice hacia el lado opuesto o su prolongación.</p>
<p><b>Ortocentro:</b> Punto donde se cortan las alturas del triángulo.</p>
<br>
<p><b>Recta de Euler:</b> Es la línea que pasa por el ortocentro, baricentro y circuncentro del triángulo.</p>
</div>
</div>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = Math.floor(window.innerWidth * 0.5);
canvas.height = Math.floor(window.innerHeight);
draw();
}
window.addEventListener('resize', resizeCanvas);
let points = [
{ x: 150, y: 400, label: 'A' },
{ x: 450, y: 400, label: 'B' },
{ x: 300, y: 150, label: 'C' }
];
let draggingPoint = null;
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
for (let p of points) {
if (Math.hypot(p.x - mouseX, p.y - mouseY) < 10) {
draggingPoint = p;
break;
}
}
});
canvas.addEventListener('mouseup', () => draggingPoint = null);
canvas.addEventListener('mousemove', (e) => {
if (!draggingPoint) return;
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
draggingPoint.x = Math.min(Math.max(mouseX, 0), canvas.width);
draggingPoint.y = Math.min(Math.max(mouseY, 0), canvas.height);
draw();
});
function midpoint(p1, p2) { return { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 }; }
function extendLine(p, q) { const dx = q.x - p.x, dy = q.y - p.y; return [{ x: p.x - dx*1000, y: p.y - dy*1000 }, { x: p.x + dx*1000, y: p.y + dy*1000 }]; }
function intersectLines(p1,p2,p3,p4){const x1=p1.x,y1=p1.y,x2=p2.x,y2=p2.y,x3=p3.x,y3=p3.y,x4=p4.x,y4=p4.y;const denom=(x1-x2)*(y3-y4)-(y1-y2)*(x3-x4);if(Math.abs(denom)<1e-9)return null;const xi=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/denom;const yi=((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/denom;return {x:xi,y:yi};}
function drawTriangle(){ctx.fillStyle='rgba(0,150,255,0.3)';ctx.strokeStyle='#007bff';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(points[0].x,points[0].y);for(let i=1;i<points.length;i++)ctx.lineTo(points[i].x,points[i].y);ctx.closePath();ctx.fill();ctx.stroke();}
function drawPoints(){ctx.fillStyle='red';ctx.font='16px Arial';for(let p of points){ctx.beginPath();ctx.arc(p.x,p.y,6,0,Math.PI*2);ctx.fill();ctx.fillText(p.label,p.x+8,p.y-8);}}
function drawBisectors(){const [A,B,C]=points;function bisectorPoint(p1,p2,p3){const v1={x:p2.x-p1.x,y:p2.y-p1.y};const v2={x:p3.x-p1.x,y:p3.y-p1.y};const l1=Math.hypot(v1.x,v1.y),l2=Math.hypot(v2.x,v2.y);return{x:p1.x+(v1.x/l1+v2.x/l2),y:p1.y+(v1.y/l1+v2.y/l2)}}
const dA=bisectorPoint(A,B,C),dB=bisectorPoint(B,A,C),dC=bisectorPoint(C,A,B);
ctx.strokeStyle='orange';ctx.lineWidth=1.5;
[dA,dB,dC].forEach((d,p)=>{const ext=extendLine(points[p],d);ctx.beginPath();ctx.moveTo(ext[0].x,ext[0].y);ctx.lineTo(ext[1].x,ext[1].y);ctx.stroke();});
const incentro=intersectLines(A,dA,B,dB);
if(document.getElementById('incentro').checked && incentro){ctx.fillStyle='orange';ctx.beginPath();ctx.arc(incentro.x,incentro.y,6,0,Math.PI*2);ctx.fill();}
if(document.getElementById('incircle').checked && incentro){const a=Math.hypot(B.x-C.x,B.y-C.y);const b=Math.hypot(A.x-C.x,A.y-C.y);const c=Math.hypot(A.x-B.x,A.y-B.y);const s=(a+b+c)/2;const area=Math.abs((A.x*(B.y-C.y)+B.x*(C.y-A.y)+C.x*(A.y-B.y))/2);const r=area/s;ctx.strokeStyle='orange';ctx.lineWidth=1.2;ctx.beginPath();ctx.arc(incentro.x,incentro.y,r,0,Math.PI*2);ctx.stroke();}}
function drawMedians(){const [A,B,C]=points;const M_AB=midpoint(B,C),M_BC=midpoint(A,C),M_CA=midpoint(A,B);ctx.strokeStyle='blue';ctx.lineWidth=1.5;ctx.beginPath();ctx.moveTo(A.x,A.y);ctx.lineTo(M_AB.x,M_AB.y);ctx.moveTo(B.x,B.y);ctx.lineTo(M_BC.x,M_BC.y);ctx.moveTo(C.x,C.y);ctx.lineTo(M_CA.x,M_CA.y);ctx.stroke();const baricentro={x:(A.x+B.x+C.x)/3,y:(A.y+B.y+C.y)/3};if(document.getElementById('baricentro').checked){ctx.fillStyle='blue';ctx.beginPath();ctx.arc(baricentro.x,baricentro.y,6,0,Math.PI*2);ctx.fill();}}
function drawMediatrices(){const [A,B,C]=points;const M_AB=midpoint(A,B),M_BC=midpoint(B,C),M_CA=midpoint(C,A);
const pAB={x:M_AB.x-(B.y-A.y),y:M_AB.y+(B.x-A.x)};
const pBC={x:M_BC.x-(C.y-B.y),y:M_BC.y+(C.x-B.x)};
const pCA={x:M_CA.x-(A.y-C.y),y:M_CA.y+(A.x-C.x)};
ctx.strokeStyle='green';ctx.lineWidth=1.5;[[M_AB,pAB],[M_BC,pBC],[M_CA,pCA]].forEach(pair=>{const ext=extendLine(pair[0],pair[1]);ctx.beginPath();ctx.moveTo(ext[0].x,ext[0].y);ctx.lineTo(ext[1].x,ext[1].y);ctx.stroke();});
const circuncentro=intersectLines(M_AB,pAB,M_BC,pBC);
if(document.getElementById('circuncentro').checked && circuncentro){ctx.fillStyle='green';ctx.beginPath();ctx.arc(circuncentro.x,circuncentro.y,6,0,Math.PI*2);ctx.fill();}
if(document.getElementById('circuncircle').checked && circuncentro){const r=Math.hypot(circuncentro.x-A.x,circuncentro.y-A.y);ctx.strokeStyle='green';ctx.lineWidth=1.2;ctx.beginPath();ctx.arc(circuncentro.x,circuncentro.y,r,0,Math.PI*2);ctx.stroke();}}
function drawAlturas(){const [A,B,C]=points;function foot(p1,p2,p3){const dx=p3.x-p2.x,dy=p3.y-p2.y;const t=((p1.x-p2.x)*dx+(p1.y-p2.y)*dy)/(dx*dx+dy*dy);return{x:p2.x+t*dx,y:p2.y+t*dy}}const Ha=foot(A,B,C),Hb=foot(B,A,C),Hc=foot(C,A,B);ctx.strokeStyle='red';ctx.lineWidth=1.5;ctx.beginPath();ctx.moveTo(A.x,A.y);ctx.lineTo(Ha.x,Ha.y);ctx.moveTo(B.x,B.y);ctx.lineTo(Hb.x,Hb.y);ctx.moveTo(C.x,C.y);ctx.lineTo(Hc.x,Hc.y);ctx.stroke();const ortocentro=intersectLines(A,Ha,B,Hb);if(document.getElementById('ortocentro').checked && ortocentro){ctx.fillStyle='red';ctx.beginPath();ctx.arc(ortocentro.x,ortocentro.y,6,0,Math.PI*2);ctx.fill();}}
function drawEuler(){const [A,B,C]=points;
const Ha=intersectLines(A,B,C,C); // just to avoid nulls if needed
const Hb=intersectLines(A,B,C,C);
const Hc=intersectLines(A,B,C,C);
const foot = (p1,p2,p3)=>{const dx=p3.x-p2.x,dy=p3.y-p2.y,t=((p1.x-p2.x)*dx+(p1.y-p2.y)*dy)/(dx*dx+dy*dy);return {x:p2.x+t*dx,y:p2.y+t*dy}};
const H_point = intersectLines(A,foot(A,B,C),B,foot(B,A,C));
const G_point = {x:(A.x+B.x+C.x)/3,y:(A.y+B.y+C.y)/3};
const M_AB=midpoint(A,B),M_BC=midpoint(B,C),M_CA=midpoint(C,A);
const pAB={x:M_AB.x-(B.y-A.y),y:M_AB.y+(B.x-A.x)},pBC={x:M_BC.x-(C.y-B.y),y:M_BC.y+(C.x-B.x)};
const O_point = intersectLines(M_AB,pAB,M_BC,pBC);
if(H_point && G_point && O_point){
ctx.strokeStyle='black';ctx.lineWidth=1.5;ctx.setLineDash([5,5]);
const linePoints = extendLine(H_point,O_point);
ctx.beginPath();ctx.moveTo(linePoints[0].x,linePoints[0].y);ctx.lineTo(linePoints[1].x,linePoints[1].y);ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle='red';ctx.beginPath();ctx.arc(H_point.x,H_point.y,6,0,Math.PI*2);ctx.fill();
ctx.fillStyle='blue';ctx.beginPath();ctx.arc(G_point.x,G_point.y,6,0,Math.PI*2);ctx.fill();
ctx.fillStyle='green';ctx.beginPath();ctx.arc(O_point.x,O_point.y,6,0,Math.PI*2);ctx.fill();
}}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawTriangle();
drawPoints();
if(document.getElementById('euler').checked){
drawEuler();
} else {
if(document.getElementById('bisectrices').checked) drawBisectors();
if(document.getElementById('medianas').checked) drawMedians();
if(document.getElementById('mediatrices').checked) drawMediatrices();
if(document.getElementById('alturas').checked) drawAlturas();
}
}
document.querySelectorAll('input[type=checkbox]').forEach(cb=>cb.addEventListener('change',draw));
document.getElementById('clearAll').addEventListener('click',()=>{
document.querySelectorAll('input[type=checkbox]').forEach(cb=>cb.checked=false);
draw();
});
resizeCanvas();
</script>
</body>
</html>
Beneficios de aprender con juegos matemáticos
Jugar con las matemáticas hace que el aprendizaje sea más interactivo, divertido y efectivo. Este tipo de actividades mejora la agilidad mental, el razonamiento lógico y la memoria visual.
Además, permite que los estudiantes asocien los números con emociones positivas, reduciendo el miedo o aburrimiento hacia la materia.
Por eso en lasmatesfaciles.com creemos firmemente que “las matemáticas son fáciles si se enseñan bien”.
No olvides suscribirte a nuestro Canal de YouTube y descubrir que las matemáticas son fáciles si se enseñan bien.
Si lo que deseas es imprimir nuestro mategrama de geometría te lo dejamos aquí en versión pdf para que te diviertas con tus estudiantes o pongas a prueba tus conocimientos.
¿Odias las matemáticas pero amas los crucigramas? Pues acá te tenemos más de nuestros Crucigramas Matemáticos – MATEGRAMAS para que odies ambas cosas al tiempo!
De momento tenemos disponibles estos mategramas pero iremos añadiendo muchos más!
Si te gustaría descargar más de nuestras actividades y material didáctico de matemáticas no dudes en visitar nuestra sección MATERIAL.
¿Te gusto nuestro MATEGRAMA DE GEOMETRÍA – CRUCIGRAMAS MATEMÁTICOS?
Suscríbete gratis para ser el primero en enterarte de cada nuevo mategrama:
Tal vez te interese el CRUCIGRAMA de Las Matemáticas en la vida cotidiana
Si deseas que te avisemos a tu correo electrónico cada vez que publicamos algo nuevo, no dudes en suscribirte gratis!
¿Por qué no miramos un poco hacia el espacio y la inmensidad del universo?
¿Sabías que tenemos varias app que pueden ayudarte con tus tareas?
Descubre una gran colección de herramientas para echarte una mano con los deberes de Matemáticas, Física, Trigonometría y Geometría!
Si lo tuyo es ir directo al grano… aquí tenemos el enlace de descarga!!
Nuestra App es gratuita y la puedes buscar en la tienda de aplicaciones de Google Play en tu teléfono Android con el nombre de Ayudante de Tareas (lo sentimos pero todavía no estamos disponibles para dispositivos iOS… pronto!)
¿Problemas con estadística?
Descargar GRATIS nuestra CALCULADORA DE ESTADÍSTICA
