canvas{

background-color: #eee;

}

const canvas = document.getElementById("mdbs2");

const ctx = canvas.getContext("2d");

const w = canvas.width;

const h = canvas.height;

const pi = Math.PI;

​

const axisWidth = 2;

let scale = 20;

let fun = getf()

ctx.translate(w/2, h/2)

​

function tan(x){

return Math.tan(x);

}

function sin(x){

return Math.sin(x);

}

function cos(x){

    return Math.cos(x);

}

function log(x){

    return Math.log(x);

}

function sqrt(x){

    return Math.sqrt(x);

}

function rect(rx, ry, rw, rh, rc) {

    ctx.beginPath()

    ctx.rect(rx, ry, rw, rh);

    ctx.fillStyle = rc;

    ctx.fill();

    ctx.closePath();

}

function txt(text, x, y, size="7px", font="Arial"){

    ctx.font = size+" "+font;

    ctx.fillText(text, x, y)

}

function arc(ax, ay, ar=axisWidth, ac="#2bbbad"){

    ctx.beginPath()

    ctx.arc(ax, ay, ar, 0, 2*Math.PI)

    ctx.fillStyle=ac;

    ctx.fill();

    ctx.closePath();

}

function line(lx1, ly1, lx2, ly2, lc="#2bbbad", lw=axisWidth) {

    ctx.beginPath()

    ctx.moveTo(lx1, ly1)

    ctx.lineTo(lx2, ly2);

    ctx.strokeStyle = lc;

    ctx.lineWidth = lw;

    ctx.stroke();

    ctx.closePath();

}

function drawAxis() {

    let color = "#2bbbad"

    line(-w/2, 0, w/2, 0, color, axisWidth);

    line(-10, -h/2 + 12, 0, -h/2 + 1, color, axisWidth);

    line(0, -h/2 + 1, 10, -h/2 + 12, color, axisWidth);

​

    line(0, -h/2, 0, h/2, color, axisWidth);

    line(w/2 - 12, -10, w/2 - 1, 0, color, axisWidth);

    line(w/2 - 1, 0, w/2 - 12, 10, color, axisWidth);

}

function drawScale(s){

    let r=2;

    let c1="#ddd"

    let wl=1;

    for(let i = 0; i<w/2; i+=s){

        line(i, -w/2, i, w/2, c1, wl);

        line(-i, -w/2, -i, w/2, c1, wl);

        line(-h/2, i, h/2, i, c1, wl);

        line(-h/2, -i, h/2, -i, c1, wl);

        arc(i, 0, r);

        arc(-i, 0, r);

        arc(0, i, r);

        arc(0, -i, r);

        if(i!=0){

            txt(i/s, i-2, 10)

            txt(-i/s, -i+2, 10)

            txt(i/s, 10, i)

            txt(-i/s, 10, -i)

        }

    }

}

function multiplication(t){

​

        for(let i = 1; i<t.length; i++){

            if(t[i]=="x"&&!isNaN(t[i-1])){

                let p1 = t.substring(0, i);

                let p2 = t.substring(i);

                t=p1.concat("*", p2);

            }

​

        }

        for(let i = 1; i<t.length; i++){

            if(t[i]=="("&&t[i-1]==")"){

                let p1 = t.substring(0, i);

                let p2 = t.substring(i);

                t=p1.concat("*", p2);

                console.log(i);

            }

​

        }

    return t;

}

function powers(t){

​

​

    let pom1="";

    let pom2="";

    let j=0;

    let k=1;

    let x=1;

​

    for(let i = 0; i<t.length; i++){

        if(t[i]=="^"){

            if(t[i-1]=="x"){

                pom1="x";

            }else if(t[i-1]==")"){

                while(t[i-k]!="("){

                    k++;

                }

                for(let j=k-1; j>1; j--){

                    pom1+=t[i-j]

                }

            }else if(!isNaN(t[i-1])){

                while(!isNaN(t[i-k-1])){

                    k++;

                }

                console.log(k)

                for(let j=k; j>0; j--){

                    pom1+=t[i-j]

                }

            }

​

            if(t[i+1]=="x"){

                pom2="x";

            }else if(t[i+1]=="("){

                while(t[i+x]!=")"){

                    x++;

                }

                for(let j=2; j<x; j++){

                    pom2+=t[i+j]

                    console.log(pom2)

                }

            }else if(!isNaN(t[i+1])){

                while(!isNaN(t[i+x+1])){

                    x++;

                }

                console.log(x)

                for(let j=1; j<=x; j++){

                    pom2+=t[i+j]

                }

            }

            let p1 = t.substring(0, i-k);

            let p2 = t.substring(i+x+1);

            t=p1+"Math.pow("+pom1+","+pom2+")"+p2;

        }

​

    }

    console.log(t, x);

    return t

}

function getf(){

    fstring = document.getElementById("finput").value;

    if(fstring=="")fstring="x^(3)";

   fstring=multiplication(fstring);

   fstring=powers(fstring);

    return fstring;

}

​

​

function f(x){

​

        let res =  eval(fun)

        //res = Math.tan(x);

            return res;

​

}

function drawValues(scale){

    let r=2;

    let s=0.05;

    let px1;

    let px2;

    let py1;

    let py2;

    for(let i = 0; i<w/2; i+=s){

        let x1=i;

        let x2=-i;

        let y1=-f(i/scale)*scale;

        let y2=-f(-i/scale)*scale;

        if(i!=0){  

            if(py1<500 && py1>-500)

            line(px1, py1, x1, y1, "#E88");

            if(py2<1000 && py2>-1000)

            line(px2, py2, x2, y2, "#E88");

​

        }

        px1=x1;

        py1=y1;

        px2=x2;

        py2=y2;

        // arc(x1, y1, r, "#E88");

        // arc(x2, y2, r, "#E88");

    }

}

draw();

function draw() {

    ctx.clearRect(-w/2, -h/2, w, h);

    fun = getf();

    drawAxis(scale);

    drawScale(scale);

    drawValues(scale);

}

//setInterval(draw, 15);