Having Trouble Changing Color By Pressing Left Or Right Button

I'm having trouble changing change the color when you from left to right button. Holding down the left mouse button and moving it inside the canvas should draw a trajectory of the

Solution 1:

For each point you add to g_points you need to remember what color the point was created as. So you can create another array to keep track of the point colors.

var g_points = []; // The array for the position of a mouse mousePressedvar g_colors = []; 

And add the color to the array every time you add a point.

// Store the coordinates to g_points array
g_points.push(x); g_points.push(y);

// Store the color
g_colors.push([1.0, 0.0, 0.0, 1.0]);

Then update your for loop to use the given color for each point.

for(var i = 0; i < len; i += 2) 
{
    // Pass the position of a point to a_Position variable
    gl.uniform4fv(u_FragColor, g_colors[i/2]);
    gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);


    // Draw
    gl.drawArrays(gl.POINTS, 0, 1);
}

Remember to update both the left click code and the right click code to store and use the color.

Here is your full code with the fix:

// Vertex shader programvarVSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'void main() {\n' +
    '  gl_Position = a_Position;\n' +
    '  gl_PointSize = 10.0;\n' +
    '}\n';

// Fragment shader programvarFSHADER_SOURCE =
    'precision mediump float;\n' +
    'uniform vec4 u_FragColor;\n' + 
    'void main() {\n' +
    '  gl_FragColor = u_FragColor;\n' +
    '}\n';

 var mousePressed = false;      // Holds boolean if mouse is pressed downvar leftClick = false;         // Holds boolean if left click is pressed downvar rightClick = false;        // Holds boolean if right click is pressed downfunctionmain() 
 {
    // Retrieve <canvas> elementvar canvas = document.getElementById('webgl');
    canvas.oncontextmenu = function (e) {
        e.preventDefault();
    };

    // Get the rendering context for WebGL//var gl = getWebGLContext(canvas);var gl = canvas.getContext('webgl');
    if (!gl) 
    {
        console.log('Failed to get the rendering context for WebGL');

        return;
    }

    // Initialize shadersif (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) 
    {
        console.log('Failed to intialize shaders.');
        return;
    }

    // Get the storage location of a_Positionvar a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) 
    {
        console.log('Failed to get the storage location of a_Position');
        return;
    }

    // Get the storage location of u_FragColorvar u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
    if (!u_FragColor) 
    {
        console.log('Failed to get the storage location of u_FragColor');
        return;
    }

    // Register function (event handler) to be called on a mouse mousePressed
    canvas.onmousedown = function(ev)
    { 
    console.log('f1 called');
        // Identify which click is being press downswitch (ev.which)
        {
            case1:         // leftClick click
            leftClick = true;
            break;
            case3:         // rightClick click
            rightClick = true;
            break;
        }

        // Mouse click is being pressed down
        mousePressed = true;

        // call function//console.log('calling f1');//drawDots(ev, gl, canvas, a_Position, u_FragColor, false); //drawDots(ev, gl, a_Position, u_FragColor, false); 
    };

    canvas.onmousemove = function(ev)
    {
        console.log('f2 called');
        if (mousePressed)
        {
            console.log('calling drawDots');
            drawDots(ev, gl, canvas, a_Position, u_FragColor, true); 
        }
            //drawDots(ev, gl, a_Position, u_FragColor, true);
    };

    canvas.onmouseup = function(ev)
    {
        console.log('f3 called');
        mousePressed = false;
        leftClick = false;
        rightClick = false;
    };

    // Specify the color for clearing <canvas>
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    console.log('clearColor call');

    // Clear <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
    console.log('clear call');
}

var g_points = []; // The array for the position of a mouse mousePressedvar g_colors = []; 

functiondrawDots(ev, gl, canvas, a_Position, u_FragColor, down) 
//function drawDots(ev, gl, a_Position, u_FragColor, down)
{
    console.log('drawDots called');
    var rect = ev.target.getBoundingClientRect() ;

    var x = ev.clientX; // x coordinate of a mouse pointervar y = ev.clientY; // y coordinate of a mouse pointer

    x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
    y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);

    // For left clickif (down == true && leftClick == true)
    {
        console.log('called left');
        // Store the coordinates to g_points array
        g_points.push(x); g_points.push(y);

        // Store the color
        g_colors.push([1.0, 0.0, 0.0, 1.0]);

        // Clear <canvas>
        gl.clear(gl.COLOR_BUFFER_BIT);

        var len = g_points.length;

        for(var i = 0; i < len; i += 2) 
        {
            // Pass the position of a point to a_Position variable
            gl.uniform4fv(u_FragColor, g_colors[i/2]);
            gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);


            // Draw
            gl.drawArrays(gl.POINTS, 0, 1);
        }
    }
    // Right clickelseif (down == true && rightClick == true)
    {
        console.log('called right');
        // Store the coordinates to g_points array
        g_points.push(x); g_points.push(y);

        // Store the color
        g_colors.push([0.0, 0.0, 1.0, 1.0]);

        // Clear <canvas>
        gl.clear(gl.COLOR_BUFFER_BIT);

        var len = g_points.length;
        for(var i = 0; i < len; i += 2) 
        {
            // Pass the position of a point to a_Position variable
            gl.uniform4fv(u_FragColor, g_colors[i/2]);
            gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);


            // Draw
            gl.drawArrays(gl.POINTS, 0, 1);
        }
    }
}

<html><scripttype="text/javascript">functioninitShaders(gl, vertexStr, fragmentStr) {
    var fragmentShader = getShader(gl, fragmentStr, true);
    var vertexShader = getShader(gl, vertexStr, false);

    gl.program = gl.createProgram();
    gl.attachShader(gl.program, vertexShader);
    gl.attachShader(gl.program, fragmentShader);
    gl.linkProgram(gl.program);

    if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(gl.program);

    returntrue;
}

functiongetShader(gl, str, isFrag) {
    var shader;
    if (isFrag) {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else {
        shader = gl.createShader(gl.VERTEX_SHADER);
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        returnnull;
    }

    return shader;
}
</script><bodyonload="main();"><canvasid="webgl"style="border: none;"width="500"height="500"></canvas></body></html>