Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Grafico javascript per tesi maturità HELP!!

    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)?^-^

  2. #2
    Utente di HTML.it L'avatar di MySQL
    Registrato dal
    May 2015
    Messaggi
    729
    Quote Originariamente inviata da DilettaS Visualizza il messaggio
    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.
    Bhè non è che puoi disegnare facilmente una qualsiasi funzione, c'è dietro una gigantesca teoria su continuità e differenziabilità.
    Disegnandola però in modo scemo (scemo nel senso privo di intelligenza, cioè per punti) ti basta mettere dei controlli per le situazioni più "classiche" che sono divisioni per zero ed eventualmente (se le usi) punti critici di funzioni trigonometriche (tipo tan) e così via.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.