Theo/IEM2_BOUWMANS_TP2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ChatGPT

Browse Source
This commit is contained in:
Theo 2024-10-24 09:18:42 +02:00
commit a1a0fc49f2
2 changed files with 167 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html Normal file
View File

@ -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>

148
main.js Normal file
View File

@ -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;