Somma di razionali

Per sommare i due razionali clicca su uno dei due bottoni, quindi clicca sulle frazioni equivalenti per visualizzare i grafici a torta. (Il numeratore deve essere maggiore o uguale a 0. Il denominatore deve essere maggiore o uguale a 1.)















function mcd(a, b) {
var aux = function(a, b) {
if(b == 0)
return a;
return aux(b, a % b);
};
return a >= b ? aux(a, b) : aux(b, a);
};
var Rational = function(numerator, denominator) {
this.numerator = numerator > 0 ? numerator : 0;
this.denominator = denominator > 0 ? denominator : 1;
this.reduce();
};
Rational.prototype.reduce = function() {
var d = mcd(this.numerator, this.denominator);
this.numerator /= d;
this.denominator /= d;
};
Rational.prototype.toString = function() {
return this.numerator + “/” + this.denominator;
};
Rational.prototype.add = function(rational) {
this.numerator = this.numerator * rational.denominator + this.denominator * rational.numerator;
this.denominator *= rational.denominator;
this.reduce();
};
Rational.prototype.clone = function() {
return new Rational(this.numerator, this.denominator);
};
Rational.prototype.toDouble = function() {
return this.numerator / this.denominator;
};
Rational.prototype.isLessThan = function(rational) {
return this.toDouble() <= rational.toDouble(); }; Rational.prototype.drawText = function(canvas, denominator) { var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "black"; context.font = "bold 32px Arial"; context.textAlign = 'center'; context.fillText(this.numerator * denominator / this.denominator, canvas.width / 2, canvas.height / 2-32); context.fillText(this.denominator * denominator / this.denominator, canvas.width / 2, canvas.height / 2 + 32); var numerator = this.numerator * denominator / this.denominator; var n = 0; while(numerator > 0) {
numerator = Math.floor(numerator / 10);
n++;
}

context.beginPath();
context.moveTo(canvas.width / 2-n * 16, canvas.height / 2-10);
context.lineTo(canvas.width / 2 + n * 16, canvas.height / 2-10);
context.closePath();
context.strokeStyle = “black”;
context.stroke();
};
Rational.prototype.draw = function(canvas, denominator, thisColor, shift, shiftColor) {
var context = canvas.getContext(“2d”);
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = “black”;

var slice = 0;
var slices = this.numerator * denominator / this.denominator;
var shiftSlices = shift.numerator * denominator / shift.denominator;

var n = Math.ceil(this.toDouble());
var x = Math.floor(canvas.width / 2);
var yStep = Math.floor(canvas.height / (2*n));
var y = -yStep;
var radius = Math.min(x,yStep)-3;

var arc = Math.PI*2 / denominator;

var draw = function() {
if(slice % denominator == 0) {
y += 2*yStep;
context.moveTo(x, y);
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, false);
context.closePath();
context.stroke();
}

context.beginPath();
context.moveTo(x, y);
context.arc(x, y, radius, (slice % denominator) * arc, (slice % denominator + 1) * arc, false);
context.closePath();
context.fill();
context.stroke();

slice++;
};

context.fillStyle = shiftColor;
while(slice < shiftSlices) draw(); context.fillStyle = thisColor; while(slice < slices) draw(); context.fillStyle = "white"; while(slice % denominator != 0) { draw(); } }; function drawText(canvas, text) { var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "black"; context.font = "bold 32px Arial"; context.textAlign = 'center'; context.fillText(text, canvas.width / 2, canvas.height / 2); } jQuery(function() { jQuery("div.ui-widget-content").css("padding", "1em 1em"); jQuery("div.rational").css("display", "inline-block").css("text-align", "center"); jQuery(".rational input").css("text-align", "center").css("width", "100px"); jQuery(".rational button").css("top", "-30px"); jQuery("#resultRational input, .rational input.numerator:last-child, .rational input.denominator:last-child").prop('readonly', true); jQuery(".rational canvas").attr('width', '100px'); jQuery(".rational canvas").attr('height', '300px'); jQuery("button").button().click(function() { var zero = new Rational(0, 1); var r1 = new Rational(jQuery("#firstRational .numerator").val(), jQuery("#firstRational .denominator").val()); var r2 = new Rational(jQuery("#secondRational .numerator").val(), jQuery("#secondRational .denominator").val()); var sum = r1.clone(); sum.add(r2); jQuery("#firstRational .numerator").val(r1.numerator); jQuery("#firstRational .denominator").val(r1.denominator); jQuery("#secondRational .numerator").val(r2.numerator); jQuery("#secondRational .denominator").val(r2.denominator); jQuery("#resultRational .numerator").val(sum.numerator); jQuery("#resultRational .denominator").val(sum.denominator); var den = r1.denominator * r2.denominator / mcd(r1.denominator, r2.denominator); var c1 = jQuery("#firstRational canvas"); r1.drawText(c1\[0\], den); c1.click(function() { r1.draw(c1\[0\], den, "red", zero); }); var c2 = jQuery("#secondRational canvas"); r2.drawText(c2\[0\], den); c2.click(function() { r2.draw(c2\[0\], den, "blue", zero); }); var c3 = jQuery("#resultRational canvas"); sum.drawText(c3\[0\], den); c3.click(function() { sum.draw(c3\[0\], den, "blue", r1, "red"); }); drawText(jQuery("#plusRational canvas")\[0\], "+"); drawText(jQuery("#equalsRational canvas")\[0\], "="); }); }); [/js]

Leave a Reply

Your email address will not be published. Required fields are marked *