<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Algebra liniara - Vasilescu Andrei</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            box-sizing: border-box;
            background-color: #1f202c;
        }
        .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            width: 90%;
            max-width: 1650px;
        }
        #interactiv {
            padding: 20px;
            border: 3px solid #64909c;
            background-color: #1f202c;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: max-content;
            position: sticky;
            top: 0;
        }
        #centru {
            flex: 1;
            padding: 20px;
            border: 3px solid #64909c;
            background-color: #1f202c;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }
        h1 {
            color: #50727B;
            font-size: 2em;
            text-align: center;
        }
        h3 {
            color: #50727B;
            line-height: 1.6;
            font-size: 1em;
            text-align: justify;
        }
        label {
            font-weight: bold;
        }
        input {
            margin: 5px 0;
        }
        canvas {
            display: block;
            margin: 10px auto;
            border: 1px solid #ddd;
        }
        #applyMatrix {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            background-color: #64909c;
            color: #fff;
            border: none;
            cursor: pointer;
            font-size: 1em;
        }
        #applyMatrix:hover {
            background-color: #64909c;
        }
        .butonRaspuns {
            background-color: #64909c;
        }
        .butonRaspuns:hover {
            background-color: #64909c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="interactiv">
            <label style="color: #64909c">Enter a 2x2 Matrix:</label><br>
            <input type="number" id="m11" value="1"> <input type="number" id="m12" value="0"><br>
            <input type="number" id="m21" value="0"> <input type="number" id="m22" value="1"><br><br>

            <label style="color: #64909c">Vector Coordinates:</label><br>
            <input type="number" id="v1x" value="1"> <input type="number" id="v1y" value="1"><br><br>

            <button id="applyMatrix">Apply Transformation</button>
            <br>
            <label for="zoomSlider" style="color: #64909c">Zoom:</label>
            <input type="range" id="zoomSlider" min="10" max="100" value="40">
            <canvas id="mCanvas" width="300" height="300"></canvas>
        </div>
        <div id="centru">
            <h1>Introducere</h1>
            <h3>
                <p>Algebra liniara este o ramura a matematicii care se ocupa cu ecuatii liniare, adesea reprezentate ca vectori sau matrici. Dar ce inseamna asta?</p>
                <p>Pentru a intelege, trebuie sa incepem cu inceputul: vectorii</p>
            </h>
            <h1>Versori si vectori</h1>
            <h3>
                <p>Daca iti intrebi profesorii ce este un vector, probabil vei primi raspunsuri diferite: un profesor de informatica probabil va explica vectorul ca o lista de valori ordonate pentru stocare, un profesor de fizica va zice ca este o sageata orientata in spatiu cu directie, magnitudine si sens.</p>
                <p>Un profesor de matematica, insa, s-ar putea sa dea un exemplu intre cele doua, asa incat in algebra liniara vectorul este simultan o lista de valori si o sageata in spatiu.</p>
                <p>Un profesor de matematica, insa, s-ar putea sa dea un exemplu intre cele doua, asa incat in algebra liniara vectorul este simultan o lista de valori si o sageata in spatiu.</p>
                <p>Cum ajungi de la o lista de valori la un vector? Cheia acestei dileme este un set special de vectori: versorii</p>
                <p>Stim inca din clasa a 4a de sistemul de coordonate carteziene xOy, ce nu stim pana mai tarziu, insa, este ca el e definit de 2 versori: $ \vec i $ si $ \vec j $. Acestia arata distanta dintre unitati si directia axelor. Atunci cand vorbim despre vectorul $ \begin{bmatrix} 2  \\ 6 \end{bmatrix} $, vrem sa spunem ca adunam 2$ \vec i $ si 6$ \vec j $ pentru a obtine vectorul. Dat fiind ca este definita de versori, pe axa xOy, varful vectorului pica fix pe punctul $ \begin{bmatrix} 1  && 0 \end{bmatrix} $. Convenient!</p>
                <p>Dat fiind cele spuse anterior, deducem ca putem inmulti un vector cu o valoare numerica, numita scalara, caz in care inmultim toate valorile vectorului cu numarul si putem aduna vectori de aceeasi marime, numita ordin, unul cu celalalt, caz in care adunam valorile de pe aceeasi pozitie a listei intre ele.</p>
                <p>Pana aici este clar, dar daca am avea urmatoarea problema: incordarea unui muschi(flexezi bicepsul) sau intinderea un cub de gelatina. Se intampla ceva ciudat. Da ,am putea recalcula toti vectorii, dar se schimba ceva mai mult decat doar vectorii: spatiul in care se aplica.</p>
            </h3>
            <h1>Matrici</h1>
            <h3>
                <p>Cum am zis, sistemul de coordonate xOy este determinat de versori si fiecare vector este determinat de compunerea lor. Deci nu ar fi mai simplu sa intindem versorii?</p>
                <p>Exact asta facem, si obtinem versorul $ \vec i $ neschimbat $ \begin{bmatrix} 1  \\ 0 \end{bmatrix} $ si versorul j, acum $ \begin{bmatrix} 1  \\ 1 \end{bmatrix} $(axa xOy continua sa fie reprezentata de versorii originali, indiferent de cei noi)</p>
                <p>Ca sa reprezentam asta mai usor folosim matrici: $ \begin{bmatrix} 1 && 1 \\ 0 && 1 \end{bmatrix} $. Matricile sunt astfel intuitive, impreuna cu inmultirea lor cu vectori: doar continuam sa calculam xi +yj.</p>
                <p>Asta duce si la unele matrici specifice pe care le stim, cu proprietati specifice: I si O.</p>
                <p>I este matricea identitate, si putem vedea ca, intr-adevar, $ \vec i $ este $ \begin{bmatrix} 1  \\ 0 \end{bmatrix} $ si $ \vec j $ este $ \begin{bmatrix} 0  \\ 1 \end{bmatrix} $, deci, nu schimba cu nimic vectorul sau spatiul. In schimb, in matricea O, $ \vec i $ si $ \vec j $ se transforma in $ \begin{bmatrix} 0  \\ 0 \end{bmatrix} $, deci orice vector va pica in punctul $ \begin{bmatrix} 0 && 0 \end{bmatrix} $.</p>
                <p>Acest fenomen, in care vector ajunge pe punctul de origine se numeste colaps intr-un singur punct. Putem colapsa si in linie, caz in care toti vectorii devin proiectia lor pe o linie.</p>
                <p>Inmultirea matricilor una cu alta este, la fel, logica, doar reprezentam $ \vec i $ si $ \vec j $ dupa cealalta matrice pentru a forma spatiul nou. Inmultirea matricilor schimba versorii ca pe orice alti 2 vectori.</p>
                <p>Incearca sa "intinzi" spatiul, modificand matricea de pe partea stanga in $ \begin{bmatrix} 1 && 1 \\ 0 && 1 \end{bmatrix} $ si colapsul in punctul de origine(folosind matricea nula) sau colapsul pe o linie prin matrici cum ar fi $ \begin{bmatrix} 1 && 0 \\ 1 && 0 \end{bmatrix} $ sau $ \begin{bmatrix} 0 && 3 \\ 0 && 5 \end{bmatrix} $</p>
            </h3>
            <h1>Determinanti</h1>
            <h3>
                <p>Pana acum, am reprezentat spatiul cu aceste linii, formand o plasa. Acest lucru are un motiv important: determinantul. Determinantul este ultimul concept mare din algebra liniara prezent in materie.</p>
                <p>Este si foarte simplu de inteles acum: determinantul este aria unui ochi din aceasta plasa. Cu alte cuvinte, aria formei geometrice descrise de i, j, $ \vec i $ translatat la varful lui $ \vec j $ si vice versa. Are formula asta geometrica:</p>
                <img src="geometric.gif">
                <p>O intrebare valida este, atunci: cum avem determinanti negativi, daca sunt arii?</p>
                <p>Si aici avem un raspuns foarte simplu: oricum am invarti punctul de origine, $ \vec i $ este in sensul acelor de ceasornic fata de j. Daca avem o matrice cu un determinant negativ, ii putem vizualiza transformarea ca intoarcerea unei foi de hartie pe care se afla planul. Acum $ \vec i $ este in sens trigonometric fata de j, lucru desemnat de un determinant negativ.</p>
                <p>Poti observa cum se modifica determinantul, marcat in stanga ca o arie colorata in grafic</p>
                <p>Cam multa teorie, ar merge bine niste exemple practice:</p>
            </h3>
            <h1>Aplicatii</h1>
            <h3>
                <p>Aproape tot ce face un calculator modern utilizeaza algebra liniara in ceva masura, exemplul cel mai vizibil fiind simularea. Fie ca vorbim de jocuri sau animatie sau chiar simulari foarte complexe ale miscarii atomilor intr-o substanta, folosim vectori si matrici. Defapt, pe langa CPU, aproape toate calculatoarele au un GPU, un procesor grafic, optimizat pentru operatii cu matrici, mai ales inmultire cu matrici. Optimizarea aceasta a dat apoi nastere unui nou fenomen, ChatGPT. Modelele de invatare pe care le folosim au la baza algebra liniara.</p>
                <p>Alte aplicatii sunt in geometrie si, normal, in fizica.</p>
                <p>Astea sunt doar cateva exemple, algebra liniara este una dintre cele mai folosite ramuri ale matematicii in stiinta moderna si faptul ca putem sa o procesam rapid este ceea ce a dat nastere erei informatiei.</p>
            </h3>
            <h1>Test</h1>
            <h3>
                <p>Cum se numeste aria "paralelogramului unitate"?</p>
                <input type="text" id="intrebare1" placeholder="###########">
                <button class="butonRaspuns" onclick="if(document.getElementById('intrebare1').value.toLowerCase() == 'determinant'){document.getElementById('intrebare1').style.border = '7px solid green'}">Verifica</button>
                <br>
                <p>Cum se numeste matricea care colapseaza toti vectorii in punctul de origine?</p>
                <input type="text" id="intrebare2" placeholder="####">
                <button class="butonRaspuns" onclick="if(document.getElementById('intrebare2').value.toLowerCase() == 'nula'){document.getElementById('intrebare2').style.border = '7px solid green'}">Verifica</button>
                <br>
                <p>Care este versorul axei x?</p>
                <input type="text" id="intrebare3" placeholder="#">
                <button class="butonRaspuns" onclick="if(document.getElementById('intrebare3').value.toLowerCase() == 'i'){document.getElementById('intrebare3').style.border = '7px solid green'}">Verifica</button>
                <br>
                <p>Cati versori sunt in sistemul X0Y?</p>
                <input type="text" id="intrebare4" placeholder="#">
                <button class="butonRaspuns" onclick="if(document.getElementById('intrebare4').value.toLowerCase() == '2'){document.getElementById('intrebare4').style.border = '7px solid green'}">Verifica</button>
            </h3>
        </div>
    </div>
    <script>
        const canvas = document.getElementById('mCanvas');
        const ctx = canvas.getContext('2d');
    
        const width = canvas.width;
        const height = canvas.height;
        const padding = width / 2;
        let gridSize = 40;
    
        let matrix = [[1, 0], [0, 1]];
        let vector = { x: 1, y: 1 };
    
        function graphToCanvasX(x) {
            return padding + x * gridSize;
        }
    
        function graphToCanvasY(y) {
            return height - padding - y * gridSize;
        }
    
        function applyMatrixToPoint(x, y) {
            return {
                x: matrix[0][0] * x + matrix[0][1] * y,
                y: matrix[1][0] * x + matrix[1][1] * y
            };
        }
    
        function applyMatrixToGridPoint(x, y) {
            const transformed = applyMatrixToPoint(x, y);
            return {
                x: graphToCanvasX(transformed.x),
                y: graphToCanvasY(transformed.y)
            };
        }
    
        function drawGrid() {
    ctx.clearRect(0, 0, width, height);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(graphToCanvasX(-30), graphToCanvasY(0));
    ctx.lineTo(graphToCanvasX(30), graphToCanvasY(0));
    ctx.moveTo(graphToCanvasX(0), graphToCanvasY(-30));
    ctx.lineTo(graphToCanvasX(0), graphToCanvasY(30));
    ctx.stroke();

    ctx.strokeStyle = "gray";
    ctx.lineWidth = 1;

    const xMin = -Math.ceil(width / (gridSize/3));
    const xMax = Math.ceil(width / (gridSize/3));
    const yMin = -Math.ceil(height / (gridSize/3));
    const yMax = Math.ceil(height / (gridSize/3));

    for (let x = xMin; x <= xMax; x++) {
        ctx.beginPath();
        const start = applyMatrixToGridPoint(x, yMin);
        const end = applyMatrixToGridPoint(x, yMax);
        ctx.moveTo(start.x, start.y);
        ctx.lineTo(end.x, end.y);
        ctx.stroke();
    }

    for (let y = yMin; y <= yMax; y++) {
        ctx.beginPath();
        const start = applyMatrixToGridPoint(xMin, y);
        const end = applyMatrixToGridPoint(xMax, y);
        ctx.moveTo(start.x, start.y);
        ctx.lineTo(end.x, end.y);
        ctx.stroke();
    }

    ctx.fillStyle = "rgba(100, 150, 255, 0.3)";
    ctx.beginPath();

    const p0 = applyMatrixToGridPoint(0, 0);
    const p1 = applyMatrixToGridPoint(1, 0);
    const p2 = applyMatrixToGridPoint(1, 1);
    const p3 = applyMatrixToGridPoint(0, 1);

    ctx.moveTo(p0.x, p0.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.lineTo(p3.x, p3.y);
    ctx.closePath();
    ctx.fill();

    drawVector();
}

    
        function drawVector() {
            const transformed = applyMatrixToPoint(vector.x, vector.y);
    
            ctx.strokeStyle = "red";
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(graphToCanvasX(0), graphToCanvasY(0));
            ctx.lineTo(graphToCanvasX(transformed.x), graphToCanvasY(transformed.y));
            ctx.stroke();
    
            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.arc(graphToCanvasX(transformed.x), graphToCanvasY(transformed.y), 5, 0, 2 * Math.PI);
            ctx.fill();
        }
    
        function updateMatrix() {
            const m11 = parseFloat(document.getElementById('m11').value);
            const m12 = parseFloat(document.getElementById('m12').value);
            const m21 = parseFloat(document.getElementById('m21').value);
            const m22 = parseFloat(document.getElementById('m22').value);
            matrix = [[m11, m12], [m21, m22]];
    
            vector.x = parseFloat(document.getElementById('v1x').value);
            vector.y = parseFloat(document.getElementById('v1y').value);
    
            drawGrid();
        }
    
        const zoomSlider = document.getElementById('zoomSlider');
        zoomSlider.addEventListener('input', () => {
            gridSize = parseInt(zoomSlider.value);
            drawGrid();
        });
    
        document.getElementById('applyMatrix').addEventListener('click', updateMatrix);
    
        drawGrid();
    </script>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
              jax: ["input/TeX", "output/HTML-CSS"],
              extensions: ["tex2jax.js"],
              "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
              tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
              TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } } },
              messageStyle: "none"
            });
            </script>    
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
        
    </body>
</html>