Lignes + AXES

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 = "";
+        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(i);
-                console.log(vertices);
+                //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);
+                }
             }
         }