graf

<!DOCTYPE html>
<html>
<head>
</head>
    <body>
        <canvas id="pic" width="700" height="700" style="border:1px solid red">
        </canvas><br>
        <button onclick="ctx.clearRect(0,0,700,700);">clear</button><br>
        <button onclick="draw(0,0)">draw</button>

        <script type="text/javascript">
            let _ = undefined;
            let c = document.getElementById('pic');
            let ctx = c.getContext('2d');
            let shape = []
            let xRotation=0, yRotation=0;
            let testDegreeX = 200/(Math.PI*180);
            let testDegreeY = 200/(Math.PI*180);
            let prevPointer = [];
            let ctxClicked = false;
            ctx.lineWidth = 1;

            //DIRECT COMPUTATION PART
            let temp;
            for(let x=-5; x<5; x+=0.1)
            {
                temp = [];
                for(let z=-5; z<5; z+=0.45)
                {
                    temp.push([x, Math.sin(x+z)/(x+z)*(-4), z]);
                }
                shape.push(temp);
            }

            let osi = [[0, 0, 0], [10, 0, 0], [0,-10,0], [0, 0, 10]]
            let colOSI = ["red", "green", "blue"]
            //EVENT ATTACHMENT
            c.onmousedown = (e)=>{ ctxClicked = true; prevPointer = [e.pageX-8, e.pageY-8];}
            c.onmouseup   = (e)=>
            {
                ctxClicked = false;
                prevPointer = [];
                //saveShape(xRotation, yRotation);
            }
            c.onmousemove = (e)=>
            {
                if(ctxClicked)
                {
                    x = e.pageX-8;
                    y = e.pageY-8;
                    if(prevPointer[0]!=x || prevPointer[1]!=y)
                    {
                        xRotation = ((x - prevPointer[0]))/(Math.PI*180);
                        yRotation = ((y - prevPointer[1]))/(Math.PI*180);
                        //console.log(xRotation, yRotation);
                        draw(yRotation, -xRotation);
                        prevPointer = [x, y];
                    }
                }
            }

            function rotate(x, y, z, axis=0, alpha=undefined) // axis 1=x, 2=y, 3=z. 0=no rotation
            {
                if(axis==0 || alpha===undefined) return [x, y, z];
                else if(axis==1) return [x, y*Math.cos(alpha)+z*Math.sin(alpha), -y*Math.sin(alpha)+z*Math.cos(alpha)];
                else if(axis==2) return [x*Math.cos(alpha)+z*Math.sin(alpha), y, -x*Math.sin(alpha)+z*Math.cos(alpha)];
                else if(axis==3) return [x*Math.cos(alpha)+y*Math.sin(alpha), -x*Math.sin(alpha)+y*Math.cos(alpha), z];
            }

            function getProjectionXY(x, y, z, k=30, x_bias=350, y_bias=350) // default is k=120, coeff=0.1, bias=20
            {
                let scale = 45;
                return [((k*x)/(z+k))*scale+x_bias, ((k*y)/(z+k))*scale+y_bias];
            }

            function draw(degreesX, degreesY)
            {
                ctx.clearRect(0, 0, 700, 700);

                console.log(vector_addition());
                //for(s of shape)
                for(const i in shape)
                {
                    ctx.beginPath();
                    shape[i][0] =  rotate(...rotate(...shape[i][0], 1, degreesX), 2, degreesY);

                    ctx.moveTo(...getProjectionXY(...shape[i][0]));
                    for(const j in shape[i])
                    {
                        if(j != 0)
                        {
                            shape[i][j] = rotate(...rotate(...shape[i][j], 1, degreesX), 2, degreesY);
                            ctx.lineTo(...getProjectionXY(...shape[i][j]));
                            ctx.strokeStyle = "black"
                        }
                    }
                    ctx.stroke();
                    ctx.closePath();
                }


                osi[0] =  rotate(...rotate(...osi[0], 1, degreesX), 2, degreesY);


                for(const j in osi)
                {   ctx.beginPath();
                    ctx.moveTo(...getProjectionXY(...osi[0]));
                    if(j != 0)
                    {
                        osi[j] = rotate(...rotate(...osi[j], 1, degreesX), 2, degreesY);
                        ctx.lineTo(...getProjectionXY(...osi[j]));
                        ctx.strokeStyle = colOSI[j-1];
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
                ctx.stroke();
                ctx.closePath();
            }

            function vector_addition(){
              let res = []
              let rres = []
              let vZ_z = -30
              for(const i in shape) {
                for(const j in shape[i]) {
                  res = shape[i][j][2] + vZ_z
                  rres.push(res);
                }
              }
              return rres
            }
            vector_addition()
            draw(0,0)
        </script>
    </body>
</html>