cRIRIc

<canvas id="canvas"></canvas>
<script>
    const container = document.getElementsByClassName("article")[0];
    const m = container.getBoundingClientRect();
    canvas.width = m.width;
    canvas.height = 350;
    const ctx = canvas.getContext("2d");
    const centerX = canvas.width / 4;
    const centerY = canvas.height / 2;
    const senoGrafico = [];
    const cosenoGrafico = [];
    const raggio = 100;
    let angolo = 0;
    animate();
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const valoreSeno = Math.sin(angolo);
        const valoreCoseno = Math.cos(angolo);
        senoGrafico.push(valoreSeno);
        cosenoGrafico.push(valoreCoseno);
        if (senoGrafico.length > 400) {
            senoGrafico.shift();
            cosenoGrafico.shift();
        }
        drawGraficoCoseno();
        drawGraficoSeno();

        drawCartesian();

        drawCircle(centerX, centerY, raggio);
        drawPunto(centerX + valoreSeno * raggio, centerY + valoreCoseno * raggio, 5, "red");

        drawRad();
        drawPunto(centerX + valoreCoseno * raggio, centerY + valoreSeno * raggio, 5);

        drawCoseno();
        const x = centerX + raggio * Math.cos(angolo);
        drawPunto(x, centerY, 3, "blue");

        drawSeno();
        const y = centerY + raggio * Math.sin(angolo);
        drawPunto(centerX, y, 3, "green");

        drawText(valoreCoseno, valoreSeno);

        angolo += 0.02;
        requestAnimationFrame(animate);
    }

    function drawPunto(x, y, r = 20, color = "black") {
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fill();
    }

    function drawGraficoSeno() {
        // Grafico del seno (in verde)
        ctx.beginPath();
        for (let i = 0; i < senoGrafico.length; i++) {
            const px = (canvas.width / 4 - 400) + i;
            const py = centerY + senoGrafico[i] * raggio;
            if (i === 0) {
                ctx.moveTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        }
        ctx.strokeStyle = 'green';
        ctx.stroke();
    }

    function drawGraficoCoseno() {
        // Grafico del coseno (in blu)
        ctx.beginPath();
        for (let i = 0; i < cosenoGrafico.length; i++) {
            const py = (canvas.height / 2 - 400) + i;
            const px = centerX + cosenoGrafico[i] * raggio;
            if (i === 0) {
                ctx.moveTo(px, py);
            } else {
                ctx.lineTo(px, py);
            }
        }
        ctx.strokeStyle = 'blue';
        ctx.stroke();
    }

    function drawText(valoreCoseno, valoreSeno) {
        // Etichette
        ctx.fillStyle = 'blue';
        ctx.font = "bold 18px Arial";
        ctx.fillText('coseno: ' + valoreCoseno.toFixed(2), canvas.width / 4 + raggio + 20, canvas.height / 2);
        ctx.fillStyle = 'green';
        ctx.fillText('seno: ' + valoreSeno.toFixed(2), canvas.width / 4, canvas.height / 2 + raggio + 20);

    }

    function drawSeno() {
        // Seno (linea verticale)
        const y = centerY + raggio * Math.sin(angolo);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(centerX, y);
        ctx.strokeStyle = 'green';
        ctx.stroke();
    }

    function drawCoseno() {
        // Coseno (linea orizzontale)
        const x = centerX + raggio * Math.cos(angolo);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(x, centerY);
        ctx.strokeStyle = 'blue';
        ctx.stroke();
    }

    function drawRad() {
        const x = centerX + raggio * Math.cos(angolo);
        const y = centerY + raggio * Math.sin(angolo);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(x, y);
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }

    function drawCircle(x, y, r) {
        ctx.beginPath();
        ctx.strokeStyle = "gray";
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.stroke();
    }

    function drawCartesian() {
        ctx.beginPath();
        ctx.strokeStyle = "lightgray";
        ctx.moveTo(canvas.width / 4, 0);
        ctx.lineTo(canvas.width / 4, canvas.height);
        ctx.moveTo(0, canvas.height / 2);
        ctx.lineTo(canvas.width, canvas.height / 2);
        ctx.setLineDash([4, 2]);
        ctx.stroke();
        ctx.setLineDash([]);
    }
</script>