156 lines
3.8 KiB
JavaScript
156 lines
3.8 KiB
JavaScript
// 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++) {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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
|
|
|
|
console.log(courbe);
|
|
console.log(nc);
|
|
|
|
display(gl); // Render the curves
|
|
}
|
|
|
|
// Run the WebGL program
|
|
window.onload = main;
|