Extension:EmbedScript/Pythagorean theorem

The live version allows you to grab the corners of the triangle to change the size of the two perpendicular sides, and updates the calculation to show you how the areas change.



var width = 640, height = 480, $canvas = $(' '), ctx = $canvas[0].getContext('2d');

// Avoid scrollbars $('body').css('overflow', 'hidden');

$canvas .attr('width', width) .attr('height', height) .css('position', 'absolute') .css('top', 0) .css('left', 0) .css('right', 0) .css('bottom', 0) .appendTo('body');

var $labels = $(' '); $labels .css('position', 'absolute') .css('width', '200px') .css('right', 0) .appendTo('body');

var a = 10, b = 15, mina = 5, maxa = 25, minb = 5, maxb = 35, c,   scale = 10, sa, sb, sc, x = 120, y = 300;

function round1(a) { return Math.round(a * 10) / 10; }

function redraw { ctx.clearRect(0, 0, 640, 480);

c = Math.sqrt(a*a + b*b);

// Math it up!

$('.a').text(round1(a)); $('.b').text(round1(b)); $('.a2').text(round1(a*a)); $('.b2').text(round1(b*b)); $('.c2').text(round1(a*a + b*b)); $('.c').text(round1(c));

// Draw! sa = a * scale; sb = b * scale; sc = c * scale;

// a^2 ctx.fillStyle = '#bfc4e3'; ctx.fillRect(x - sa, y - sa, sa, sa);

// b^2 ctx.fillStyle = '#bfe3c3'; ctx.fillRect(x, y, sb, sb);

// c^2 ctx.fillStyle = '#bfe3e3'; var theta = Math.atan(b / a); ctx.beginPath; ctx.moveTo(x, y - sa); ctx.lineTo(x + Math.cos(theta)*sc, y - sa - Math.sin(theta)*sc); ctx.lineTo(x + sb + Math.cos(theta)*sc, y - Math.sin(theta)*sc); ctx.lineTo(x + sb, y); ctx.fill;

// main triangle ctx.strokeStyle = 'solid 1px black'; ctx.beginPath; ctx.moveTo(x, y); ctx.lineTo(x, y - sa); ctx.lineTo(x + sb, y); ctx.closePath; ctx.stroke;

// right tri marker ctx.strokeRect(x, y - 10, 10, 10); }

redraw;

$canvas.bind('mousedown', function(event) {  var hot = 24,       mx = event.clientX,       my = event.clientY;   if (Math.abs(mx - x) <= hot && Math.abs(my - (y - sa)) <= hot) {       // changing a       $canvas.bind('mousemove.a', function(event) { dy = my - event.clientY; my = event.clientY; a += (dy / scale); if (a < mina) { a = mina; } else if (a > maxa) { a = maxa; }        redraw; });      $canvas.bind('mouseup.a', function(event) { $canvas.unbind('.a'); });  }   if (Math.abs(mx - (x + sb)) <= hot && Math.abs(my - y) <= hot) {       // changing b       $canvas.bind('mousemove.b', function(event) { dx = event.clientX - mx; mx = event.clientX; b += (dx / scale); if (b < minb) { b = minb; } else if (b > maxb) { b = maxb; }        redraw; });      $canvas.bind('mouseup.b', function(event) { $canvas.unbind('.b'); });  } });