diff --git a/index.html b/index.html
index 3dbbd24..c559a99 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
const HISTOGRAMME = 2;
let mode_affichage = HORIZONTAL;
- let type_dessin = HISTOGRAMME;
+ let type_dessin = LIGNE_AXES;
function toVertices(index)
{
@@ -85,14 +85,14 @@
// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
- console.log(vertices);
+ //console.log(vertices);
return vertex_buffer;
}
/*=================== Shaders ====================*/
- function setShader()
+ function setShader(red)
{
// Vertex shader source code
var vertCode =
@@ -111,11 +111,19 @@
gl.compileShader(vertShader);
// Fragment shader source code
- var fragCode =
+ var fragCode = "";
+ if(red == false)
+ {
+ var fragCode =
'void main(void) {' +
'gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);' +
'}';
-
+ }else{
+ var fragCode =
+ 'void main(void) {' +
+ 'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' +
+ '}';
+ }
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
@@ -144,7 +152,8 @@
return shaderProgram;
}
- var shaderProgram = setShader();
+ var shaderProgramRed = setShader(true);
+ var shaderProgram = setShader(false);
function draw(index)
{
@@ -169,6 +178,79 @@
gl.drawArrays(gl.LINE_STRIP, 0, courbe[index][0]);
}
+ function axe(index, ax)
+ {
+ const size = courbe[index][0];
+
+ x_start = -1.0;
+ x_end = map(1, size, ax+1, -1, 1);
+
+ y_start = -1;
+ y_end = map(valmin[index], valmax[index], courbe[index][ax+1], -1, 1);
+ if(mode_affichage != SUPERPOSER)
+ {
+ y_start = map(0, nc, index, -1, 1);
+ var end = map(0, nc, index+1, -1, 1);
+ y_end = map(valmin[index], valmax[index], courbe[index][ax+1], y_start, end);
+ }
+
+ if(mode_affichage == VERTICAL)
+ {
+ [x_start, y_start] = [y_start, x_start];
+ [x_end, y_end] = [y_end, x_end];
+ }
+
+ var vertices = [
+ x_start, y_end, 0.0,
+ x_end, y_end, 0.0,
+ x_end, y_end, 0.0,
+ x_end, y_start, 0.0,
+ ]
+
+ return vertices;
+ }
+
+ function drawAxes(index)
+ {
+ const size = courbe[index][0];
+ var vertices = [];
+ for(let i = 1; i < size; i++)
+ {
+ let v = axe(index, i);
+ vertices.push(...v);
+ }
+
+ console.log(vertices);
+
+ // Create an empty buffer object
+ var vertex_buffer = gl.createBuffer();
+
+ // Bind appropriate array buffer to it
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
+
+ // Pass the vertex data to the buffer
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+ // Get the attribute location
+ var coord = gl.getAttribLocation(shaderProgram, "coordinates");
+
+ // Point an attribute to the currently bound VBO
+ gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
+
+ // Enable the attribute
+ gl.enableVertexAttribArray(coord);
+
+ // Set the view port
+ gl.viewport(0,0,canvas.width,canvas.height);
+
+ gl.useProgram(shaderProgramRed);
+
+ // Draw the triangle
+ gl.drawArrays(gl.LINES, 0, (courbe[index][0]-1) * 4);
+
+ gl.useProgram(shaderProgram);
+ }
+
function square(index, squ)
{
const size = courbe[index][0];
@@ -208,8 +290,8 @@
{
var vertices = square(index, i);
- console.log(i);
- console.log(vertices);
+ //console.log(i);
+ //console.log(vertices);
indices = [0, 2, 1, 0, 3, 2];
@@ -268,8 +350,12 @@
if(type_dessin == HISTOGRAMME)
{
drawHisto(i);
- }else if(type_dessin == LIGNE){
+ }else{
draw(i);
+ if(type_dessin == LIGNE_AXES)
+ {
+ drawAxes(i);
+ }
}
}