From a1a0fc49f293773d5dee387e9304c0b2cfc39184 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 24 Oct 2024 09:18:42 +0200 Subject: [PATCH] ChatGPT --- index.html | 19 +++++++ main.js | 148 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 167 insertions(+) create mode 100644 index.html create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d804e1 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + WebGL Plot + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..ff40eeb --- /dev/null +++ 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;