From 4de675fb599e62cc5a93378246ee5eb2d203e1f9 Mon Sep 17 00:00:00 2001
From: Theo <theo@theothenault.fr>
Date: Thu, 24 Oct 2024 09:46:38 +0200
Subject: [PATCH] gpt2

---
 index.html | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 main.js    |   7 +++
 2 files changed, 139 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 1d804e1..aa9f968 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,141 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebGL Plot</title>
+    <title>WebGL Line Strip</title>
     <style>
-        canvas {
-            display: block;
-            margin: 0 auto;
-            background-color: black;
-        }
+        canvas { width: 100%; height: 100%; }
     </style>
 </head>
 <body>
-    <canvas id="glCanvas" width="700" height="700"></canvas>
-    <script src="main.js"></script>
+    <canvas id="glCanvas"></canvas>
+
+    <script>
+        // Vertex Shader Source
+        const vertexShaderSource = `
+            attribute vec2 a_position;
+            uniform vec2 u_resolution;
+
+            void main() {
+                // Convert the position from pixels to clipspace
+                vec2 zeroToOne = a_position / u_resolution;
+                vec2 zeroToTwo = zeroToOne * 2.0;
+                vec2 clipSpace = zeroToTwo - 1.0;
+
+                gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // Flip Y axis
+            }
+        `;
+
+        // Fragment Shader Source
+        const fragmentShaderSource = `
+            precision mediump float;
+            uniform vec4 u_color;
+            void main() {
+                gl_FragColor = u_color;
+            }
+        `;
+
+        function createShader(gl, type, source) {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error("Shader compile error:", gl.getShaderInfoLog(shader));
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        }
+
+        function createProgram(gl, vertexShader, fragmentShader) {
+            const program = gl.createProgram();
+            gl.attachShader(program, vertexShader);
+            gl.attachShader(program, fragmentShader);
+            gl.linkProgram(program);
+            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+                console.error("Program link error:", gl.getProgramInfoLog(program));
+                return null;
+            }
+            return program;
+        }
+
+        function main() {
+            const canvas = document.getElementById("glCanvas");
+            const gl = canvas.getContext("webgl");
+            if (!gl) {
+                console.error("WebGL not supported");
+                return;
+            }
+
+            // Resize canvas to full screen
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+
+            // Create shaders
+            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+
+            
+            // Create program
+            const program = createProgram(gl, vertexShader, fragmentShader);
+            
+            // Look up attributes and uniforms
+            const positionLocation = gl.getAttribLocation(program, "a_position");
+            const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
+            const colorUniformLocation = gl.getUniformLocation(program, "u_color");
+            
+            // Create buffer and bind
+            const positionBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+            
+            // Create some points for the curve (You would populate this with your data)
+            const points = [
+                100, 150,
+                200, 250,
+                300, 50,
+                400, 300
+            ];
+            
+            // Send points to buffer
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+            
+            // Resize the viewport to match canvas size
+            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+            
+            // Use the program
+            gl.useProgram(program);
+            
+            // Set the resolution
+            gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+            
+            // Set the color (white)
+            gl.uniform4f(colorUniformLocation, 1, 1, 1, 1);
+            
+            // Enable the position attribute
+            gl.enableVertexAttribArray(positionLocation);
+            
+            // Bind the position buffer
+            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+            
+            // Tell the attribute how to get data out of positionBuffer
+            const size = 2;          // 2 components per iteration (x, y)
+            const type = gl.FLOAT;   // the data is 32bit floats
+            const normalize = false; // don't normalize the data
+            const stride = 0;        // move forward size * sizeof(type) each iteration
+            const offset = 0;        // start at the beginning of the buffer
+            gl.vertexAttribPointer(positionLocation, size, type, normalize, stride, offset);
+            
+            // Clear the canvas
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            
+            // Draw the curve as a line strip
+            const primitiveType = gl.LINE_STRIP;
+            const offsetIndex = 0;
+            const count = points.length / 2; // 2D points
+            gl.drawArrays(primitiveType, offsetIndex, count);
+        }
+
+        window.onload = main;
+    </script>
 </body>
 </html>
diff --git a/main.js b/main.js
index ff40eeb..fb79e17 100644
--- a/main.js
+++ b/main.js
@@ -112,10 +112,13 @@ function display(gl) {
 
     if (mode_affichage === HORIZONTAL) {
         for (let i = 0; i < nc; i++) {
+            console.log(i);
             let haut = map(0, nc, i, 1.0, -1.0);
             let bas = map(0, nc, i + 1, 1.0, -1.0);
             if (type_dessin === LIGNE || type_dessin === LIGNE_AXES) {
+                console.log("drawCurve");
                 drawCurve(gl, i, -1.0, haut, 1.0, bas);
+                console.log("drawCurve");
             } else if (type_dessin === HISTOGRAMME) {
                 drawHistogram(gl, i, -1.0, haut, 1.0, bas);
             }
@@ -141,6 +144,10 @@ function main() {
     if (!gl) return;
 
     loadFile();  // Load example data
+
+    console.log(courbe);
+    console.log(nc);
+
     display(gl); // Render the curves
 }
 
