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

gpt2

Browse Source
This commit is contained in:
Theo 2024-10-24 09:46:38 +02:00
parent a1a0fc49f2
commit 4de675fb59
2 changed files with 139 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
index.html
View File

@ -3,17 +3,141 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Plot</title> <title>WebGL Line Strip</title>
<style> <style>
canvas { canvas { width: 100%; height: 100%; }
display: block;
margin: 0 auto;
background-color: black;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="glCanvas" width="700" height="700"></canvas> <canvas id="glCanvas"></canvas>
<script src="main.js"></script>
<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> </body>
</html> </html>

7
main.js
View File

@ -112,10 +112,13 @@ function display(gl) {
if (mode_affichage === HORIZONTAL) { if (mode_affichage === HORIZONTAL) {
for (let i = 0; i < nc; i++) { for (let i = 0; i < nc; i++) {
console.log(i);
let haut = map(0, nc, i, 1.0, -1.0); let haut = map(0, nc, i, 1.0, -1.0);
let bas = map(0, nc, i + 1, 1.0, -1.0); let bas = map(0, nc, i + 1, 1.0, -1.0);
if (type_dessin === LIGNE || type_dessin === LIGNE_AXES) { if (type_dessin === LIGNE || type_dessin === LIGNE_AXES) {
console.log("drawCurve");
drawCurve(gl, i, -1.0, haut, 1.0, bas); drawCurve(gl, i, -1.0, haut, 1.0, bas);
console.log("drawCurve");
} else if (type_dessin === HISTOGRAMME) { } else if (type_dessin === HISTOGRAMME) {
drawHistogram(gl, i, -1.0, haut, 1.0, bas); drawHistogram(gl, i, -1.0, haut, 1.0, bas);
} }
@ -141,6 +144,10 @@ function main() {
if (!gl) return; if (!gl) return;
loadFile(); // Load example data loadFile(); // Load example data
console.log(courbe);
console.log(nc);
display(gl); // Render the curves display(gl); // Render the curves
} }