Slavi a tutti!Sto progettando da tempo l'algoritmo di bisezione da portare alla mia tesina di maturità. Non mi hanno mai insegnato a scuola js o css, quindi mi sono creata una piccola conoscenza pian piano che bazzicavo cercando soluzioni ai miei problemi. Ho creato un elaborato che mi permetteva di calcolare le radici di qualunque funzione immessa dall'utente utilizzando il metodo di bisezione. Inoltre mi crea il grafico (ho modificato un algoritmo trovato in rete) ed individua in tale grafico la radice della funzione.
Ho solo un piccolo problemino con il grafico. Di seguito vi metto il codice eliminando tutta la parte dell'algoritmo di bisezione:
(puntox è una text area dove, al termine dell'algoritmo di bisezione, verrà scritto "P("+radicetrovata+";0)" e f è un inputbox)
function f(x){return eval(dati.f.value)};
function draw() {
var canvas = document.getElementById("canvas");
if (null==canvas || !canvas.getContext) return;
var axes={}, ctx=canvas.getContext("2d"); //in due dimensioni
axes.x0 = .5 + .5*canvas.width; // scala asse x
axes.y0 = .5 + .5*canvas.height; // scala asse y
axes.scale = 15;
axes.doNegativeX = true;
showAxes(ctx,axes);
funGraph(ctx,axes,f,"rgb(11,153,11)",2);
}
//DISEGNA LA FUNZIONE
function funGraph (ctx,axes,func) {
var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
var iMax = Math.round((ctx.canvas.width-x0)/dx);
var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "#008080";
for (var i=iMin;i<=iMax;i++) {
xx = dx*i; yy = scale*func(xx/scale);
if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
else ctx.lineTo(x0+xx,y0-yy);
}
ctx.stroke();
}
//DISEGNA IL SISTEMA DI RIFERIMENTO
function showAxes(ctx,axes) {
var x0=axes.x0, w=ctx.canvas.width;
var y0=axes.y0, h=ctx.canvas.height;
var xmin = axes.doNegativeX ? 0 : x0;
ctx.strokeStyle = "#696969";
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(x0-480,y0);
ctx.lineTo(w-20,y0); // asse x
ctx.moveTo(w-20,y0-4); //punta asse x
ctx.lineTo(w-20,y0+4);
ctx.lineTo(w-12,y0);
ctx.lineTo(w-20,y0-4);
ctx.moveTo(x0,20);
ctx.lineTo(x0,h-20); // asse y
ctx.moveTo(x0-4,20); //punta asse y
ctx.lineTo(x0+4,20);
ctx.lineTo(x0,12);
ctx.lineTo(x0-4,20);
ctx.stroke(); //disegna
ctx.fill() //riempimento frecce
ctx.fillStyle="rgb(0,0,0)"
// scrive x, y, O, f(x) e P
var testofunzione
var punto
testofunzione=new String(dati.f.value);
//PUNTO
punto=new String(dati.puntox.value);
var res = punto.replace("P(", " ");
res = res.replace(";0)", " ");
var t=parseInt(res); //converto la stringa in numero
var u=.5; //unità di misura
ctx.font="20px Arial"
ctx.fillText('x',w-20,y0-10)
ctx.fillText('y',x0+10,20)
ctx.fillText('O',x0+2,y0-5)
ctx.font="25px Arial "
ctx.fillText('f(x)='+ testofunzione, x0+100,y0-180)
// Coordinate e punto P
ctx.fillStyle='#FF9900'
ctx.fillRect(x0+u*t,y0,2,2)
ctx.fillText('P',x0+u*t,y0)
ctx.font = "50px Verdana"
}
Per esempio se traccio la funzione (x-5)/(x+2) trovo un fastidioso punto di discontinuità in x=-2. Vorrei che l'algoritmo escludesse i punti di discontinuità trovati perchè ora come ora tende a tracciare la retta in x=-2.
Inoltre il punto P appare disegnato sotto la funzione, mentre mi piacerebbe averlo sopra, come posso fare?
Ringrazio chiunque mi risponderà!!
ps) un'ultima richiesta:
//PULISCI GRAFICO
function clear() {
var canvas = document.getElementById("canvas");
if (null==canvas || !canvas.getContext) return;
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,800,430);
}
potete dirmi l'errore in questa funzione per favore, perchè non funge (scusate il gioco di parole)?^-^