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

Below is an example of a single HTML file that draws a triangle using WebGL and makes the canvas take 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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL Triangle</title>
    <style>
        /* Make the canvas take the full page */
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas {
            width: 100%;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Get the canvas element
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl');

        // Set the canvas to take the full page
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Create a vertex shader
        const vertexShaderCode = `
            attribute vec2 position;
            void main() {
                gl_Position = vec4(position, 0.0, 1.0);
            }
        `;
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderCode);
        gl.compileShader(vertexShader);

        // Create a fragment shader
        const fragmentShaderCode = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderCode);
        gl.compileShader(fragmentShader);

        // Create a program and link the shaders
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        // Create a vertex buffer object
        const vertices = new Float32Array([
            -0.5, -0.5,
            0.5, -0.5,
            0.0, 0.5
        ]);
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // Get the position attribute location
        const positionLocation = gl.getAttribLocation(program, 'position');

        // Draw the triangle
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(positionLocation);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
</body>
</html>
This code creates a WebGL context, sets up a simple vertex and fragment shader, and draws a red triangle on a black background. The canvas takes the full page and is resized to match the window size. **How it works:** 1. The HTML file creates a canvas element and gets a reference to it using `document.getElementById`. 2. It sets the canvas to take the full page by setting its width and height to the window's inner width and height. 3. It creates a WebGL context using `canvas.getContext('webgl')`. 4. It creates a vertex shader and a fragment shader using `gl.createShader` and sets their source code using `gl.shaderSource`. 5. It compiles the shaders using `gl.compileShader`. 6. It creates a program using `gl.createProgram` and links the shaders to it using `gl.attachShader` and `gl.linkProgram`. 7. It creates a vertex buffer object using `gl.createBuffer` and sets its data using `gl.bufferData`. 8. It gets the position attribute location using `gl.getAttribLocation`. 9. It draws the triangle using `gl.drawArrays` after setting up the vertex attribute pointer using `gl.vertexAttribPointer` and enabling the attribute using `gl.enableVertexAttribArray`. **Tips and Variations:** * To change the color of the triangle, modify the `gl_FragColor` value in the fragment shader. * To change the position or size of the triangle, modify the `vertices` array. * To add more complex shapes, use more complex vertex and fragment shaders, or use a library like Three.js. * To animate the triangle, use the `requestAnimationFrame` function to continuously update the vertex buffer and redraw the triangle.

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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL Triangle</title>
    <style>
        /* Make the canvas take the full page */
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas {
            width: 100%;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Get the canvas element
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl');

        // Set the canvas to take the full page
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Create a vertex shader
        const vertexShaderCode = `
            attribute vec2 position;
            void main() {
                gl_Position = vec4(position, 0.0, 1.0);
            }
        `;
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderCode);
        gl.compileShader(vertexShader);

        // Create a fragment shader
        const fragmentShaderCode = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderCode);
        gl.compileShader(fragmentShader);

        // Create a program and link the shaders
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        // Create a vertex buffer object
        const vertices = new Float32Array([
            -0.5, -0.5,
            0.5, -0.5,
            0.0, 0.5
        ]);
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // Get the position attribute location
        const positionLocation = gl.getAttribLocation(program, 'position');

        // Draw the triangle
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(positionLocation);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    </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 black background with a small red triangle in the bottom left corner. The triangle is oriented with its base along the bottom edge and its point facing upwards.

LLM Generation

Query

Does this answer say that there is a picture of a triangle "The image shows a black background with a small red triangle in the bottom left corner. The triangle is oriented with its base along the bottom edge and its point facing upwards."? 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