Initial Query

Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.

LLM Generation

Query

Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.

Output

Certainly! Below is a single HTML file that uses WebGL to draw a triangle on a canvas that takes up the full page. 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Triangle</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="glcanvas"></canvas>
    <script>
        // Get the canvas element and set its size to fill the window
        const canvas = document.getElementById('glcanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Get the WebGL context
        const gl = canvas.getContext('webgl');

        // Check if WebGL is available
        if (!gl) {
            console.error('WebGL not supported, falling back on experimental-webgl');
            gl = canvas.getContext('experimental-webgl');
        }

        if (!gl) {
            alert('Your browser does not support WebGL');
        }

        // Vertex shader program
        const vsSource = `
            attribute vec4 aVertexPosition;
            void main() {
                gl_Position = aVertexPosition;
            }
        `;

        // Fragment shader program
        const fsSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
            }
        `;

        // Function to compile a shader
        function compileShader(gl, source, type) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        // Function to initialize the shader program
        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
            const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

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

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
                return null;
            }

            return shaderProgram;
        }

        // Function to initialize the buffers
        function initBuffers(gl) {
            const vertices = new Float32Array([
                0.0,  1.0,  0.0,
               -1.0, -1.0,  0.0,
                1.0, -1.0,  0.0
            ]);

            const vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            return {
                vertexBuffer: vertexBuffer,
                numVertices: 3
            };
        }

        // Function to draw the scene
        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black
            gl.clear(gl.COLOR_BUFFER_BIT);

            const vertexPosition = gl.getAttribLocation(programInfo.program, 'aVertexPosition');
            gl.enableVertexAttribArray(vertexPosition);
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertexBuffer);
            gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0);

            gl.useProgram(programInfo.program);
            gl.drawArrays(gl.TRIANGLES, 0, buffers.numVertices);
        }

        // Main function
        function main() {
            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition')
                }
            };

            const buffers = initBuffers(gl);

            drawScene(gl, programInfo, buffers);
        }

        main();
    </script>
</body>
</html>
### Explanation: 1. **Canvas Setup**: The canvas is set to take up the full page using CSS. 2. **WebGL Context**: The WebGL context is obtained from the canvas. 3. **Shaders**: A simple vertex shader and fragment shader are defined. The vertex shader passes the vertex positions directly, and the fragment shader colors the triangle red. 4. **Buffers**: A buffer is created to store the vertex positions of the triangle. 5. **Drawing**: The `drawScene` function clears the canvas, binds the vertex buffer, and draws the triangle. ### How to Run: 1. Copy the code into an HTML file (e.g., `index.html`). 2. Open the file in a web browser that supports WebGL. You should see a red triangle centered on the screen, with the canvas taking up the entire page.

Extract Code

I extracted the following code from that output: 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Triangle</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="glcanvas"></canvas>
    <script>
        // Get the canvas element and set its size to fill the window
        const canvas = document.getElementById('glcanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Get the WebGL context
        const gl = canvas.getContext('webgl');

        // Check if WebGL is available
        if (!gl) {
            console.error('WebGL not supported, falling back on experimental-webgl');
            gl = canvas.getContext('experimental-webgl');
        }

        if (!gl) {
            alert('Your browser does not support WebGL');
        }

        // Vertex shader program
        const vsSource = `
            attribute vec4 aVertexPosition;
            void main() {
                gl_Position = aVertexPosition;
            }
        `;

        // Fragment shader program
        const fsSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
            }
        `;

        // Function to compile a shader
        function compileShader(gl, source, type) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

            return shader;
        }

        // Function to initialize the shader program
        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
            const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

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

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
                return null;
            }

            return shaderProgram;
        }

        // Function to initialize the buffers
        function initBuffers(gl) {
            const vertices = new Float32Array([
                0.0,  1.0,  0.0,
               -1.0, -1.0,  0.0,
                1.0, -1.0,  0.0
            ]);

            const vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            return {
                vertexBuffer: vertexBuffer,
                numVertices: 3
            };
        }

        // Function to draw the scene
        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black
            gl.clear(gl.COLOR_BUFFER_BIT);

            const vertexPosition = gl.getAttribLocation(programInfo.program, 'aVertexPosition');
            gl.enableVertexAttribArray(vertexPosition);
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertexBuffer);
            gl.vertexAttribPointer(vertexPosition, 3, gl.FLOAT, false, 0, 0);

            gl.useProgram(programInfo.program);
            gl.drawArrays(gl.TRIANGLES, 0, buffers.numVertices);
        }

        // Main function
        function main() {
            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition')
                }
            };

            const buffers = initBuffers(gl);

            drawScene(gl, programInfo, buffers);
        }

        main();
    </script>
</body>
</html>

Check if all of the following conditions are true:

HTML Render

Rendering the webpage gives the following image:

LLM Generation

Query

This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drew what I wanted. Describe what is drawn in this image?

Output

The image shows a large red triangle centered on a black background. The triangle's base is at the bottom of the image, and its apex points upwards, creating a symmetrical shape.

LLM Generation

Query

Does this answer say that there is a picture of a triangle "The image shows a large red triangle centered on a black background. The triangle's base is at the bottom of the image, and its apex points upwards, creating a symmetrical shape."? Answer "Yes it does" or "No it does not".

Output

Yes it does.

Substring Evaluation

Testing if the previous output contains the string es it does: True

Check this condition is not true:

Substring Evaluation

Testing if the previous output contains the string THREE.: False

Final Answer: True

Final Answer: True