ChatGPT

2024-10-24 09:18:42 +02:00 · 2024-10-24 09:18:42 +02:00 · a1a0fc49f2
commit a1a0fc49f2
2 changed files with 167 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGL Plot</title>
+    <style>
+        canvas {
+            display: block;
+            margin: 0 auto;
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="glCanvas" width="700" height="700"></canvas>
+    <script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,148 @@
+// Global variables
+const MAXC = 20;
+const MAXV = 100;
+
+let courbe = new Array(MAXC).fill().map(() => new Array(MAXV).fill(0));
+let valmin = new Array(MAXC).fill(0);
+let valmax = new Array(MAXC).fill(0);
+let nc = 0;
+
+// Drawing modes
+const HORIZONTAL = 0;
+const VERTICAL = 1;
+const SUPERPOSER = 2;
+
+// Drawing types
+const LIGNE = 0;
+const LIGNE_AXES = 1;
+const HISTOGRAMME = 2;
+
+let mode_affichage = HORIZONTAL;
+let type_dessin = LIGNE;
+
+// WebGL setup
+function initWebGL() {
+    const canvas = document.getElementById("glCanvas");
+    const gl = canvas.getContext("webgl");
+
+    if (!gl) {
+        console.error("Unable to initialize WebGL.");
+        return null;
+    }
+
+    return gl;
+}
+
+// Mapping function
+function map(smin, smax, val, omin, omax) {
+    const percent = (val - smin) / (smax - smin);
+    return (omax - omin) * percent + omin;
+}
+
+// Draw axes
+function drawAxes(gl, x1, x2, y1, y2) {
+    gl.lineWidth(1);
+    gl.strokeStyle = "#FF8080";
+    gl.beginPath();
+    gl.moveTo(x1, y2);
+    gl.lineTo(x2, y2);
+    gl.lineTo(x2, y1);
+    gl.stroke();
+}
+
+// Draw curve
+function drawCurve(gl, index, hgx, hgy, bdx, bdy) {
+    if (index >= nc) {
+        console.error("Invalid curve index");
+        return;
+    }
+
+    gl.strokeStyle = "#FFFFFF";  // Set line color to white
+
+    const size = courbe[index][0];
+
+    gl.beginPath();
+    for (let i = 1; i <= size; i++) {
+        let posX = map(0, size - 1, i - 1, hgx, bdx);
+        let posY = map(valmin[index], valmax[index], courbe[index][i], bdy, hgy);
+
+        if (mode_affichage === VERTICAL) {
+            // Swap x and y for vertical mode
+            [posX, posY] = [posY, posX];
+        }
+
+        if (i === 1) {
+            gl.moveTo(posX, posY);
+        } else {
+            gl.lineTo(posX, posY);
+        }
+    }
+    gl.stroke();
+}
+
+// Draw histogram
+function drawHistogram(gl, index, hgx, hgy, bdx, bdy) {
+    if (index >= nc) {
+        console.error("Invalid curve index");
+        return;
+    }
+
+    gl.fillStyle = "#FFFFFF";  // Set fill color to white
+
+    const size = courbe[index][0];
+    for (let i = 1; i <= size; i++) {
+        let gauche = map(0, size, i - 1, hgx, bdx);
+        let droite = map(0, size, i, hgx, bdx);
+        let haut = map(valmin[index], valmax[index], courbe[index][i], bdy, hgy);
+        let bas = bdy;
+
+        if (mode_affichage === VERTICAL) {
+            [gauche, haut] = [haut, droite];
+            [droite, bas] = [bas, gauche];
+        }
+
+        gl.fillRect(gauche, haut, droite - gauche, bas - haut);
+    }
+}
+
+// Display function (main rendering function)
+function display(gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    if (mode_affichage === HORIZONTAL) {
+        for (let i = 0; i < nc; 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) {
+                drawCurve(gl, i, -1.0, haut, 1.0, bas);
+            } else if (type_dessin === HISTOGRAMME) {
+                drawHistogram(gl, i, -1.0, haut, 1.0, bas);
+            }
+        }
+    }
+}
+
+// Load the data from file (simulated in JavaScript)
+function loadFile() {
+    nc = 3;  // Number of curves
+    courbe = [
+        [5, 0.1, 0.4, 0.7, 0.9, 1.0],  // Example data
+        [5, 0.2, 0.3, 0.6, 0.8, 0.95],
+        [5, 0.05, 0.15, 0.5, 0.75, 0.85],
+    ];
+    valmin = [0.1, 0.2, 0.05];
+    valmax = [1.0, 0.95, 0.85];
+}
+
+// Initialize everything and run
+function main() {
+    const gl = initWebGL();
+    if (!gl) return;
+
+    loadFile();  // Load example data
+    display(gl); // Render the curves
+}
+
+// Run the WebGL program
+window.onload = main;