6лаба

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="images/faviconSTD.png" type="image/png">
</head>
    <body>
        <canvas id="pic" width="700" height="700" style="border:1px solid red">
        </canvas><br>
        <button onclick="ctx.clearRect(0,0,500,500);">clear</button><br>
        <input type="checkbox" id="plot" onchange="isNowDrawing=this.checked; drawingId=endlessDraw(isNowDrawing);">
        <label for="plot">Click to toggle plot</label>
        </input></br>

        <script type="text/javascript">
            let _ = undefined;
            let ctx=document.getElementById('pic').getContext('2d');
            let xPr, yPr;
            let xRotation, yRotation, zRotation;
            let xRotation_raw, yRotation_raw, zRotation_raw;
            let isNowDrawing = false;
            let drawingId = -1;
            ctx.lineWidth = 1;

            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 endlessDraw(act)
            {
                if(act)
                {
                    let a = 0.02;
                    console.log('now drawing');
                    return setInterval(function(){draw(a); a+=0.01; if(a>6.28)a=0;}, 80);
                }
                else
                {
                    clearInterval(drawingId);
                    console.log('stopped drawing');
                }
            }

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

            function draw(angle=0)
            {
                ctx.clearRect(0, 0, 700, 700);

                for(let x=-5; x<5; x+=0.1)
                {
                    [xRotation, yRotation, zRotation] = rotate(x, Math.sin(x-5)/(x-5)*2, -5, 2, angle);
                    [xRotation, yRotation, zRotation] = rotate(xRotation, yRotation, zRotation, 1, 185);
                    ctx.beginPath();
                    ctx.moveTo(...getProjectionXY(xRotation, yRotation, zRotation, 12, 350, 350));
                    for(let z=-5; z<5; z+=0.45)
                    {
                        //ctx.strokeStyle = 'red';
                        [xRotation, yRotation, zRotation] = rotate(x, Math.sin(x+z)/(x+z)*2, z, 2, angle);
                        [xRotation, yRotation, zRotation] = rotate(xRotation, yRotation, zRotation, 1, 185);
                        [xPr, yPr] = getProjectionXY(xRotation, yRotation, zRotation, 12, 350, 350);
                        ctx.lineTo(xPr, yPr);
                    }
                    ctx.stroke();
                    ctx.closePath();
                }
            }
        </script>
    </body>
</html>