Initial Query

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

LLM Generation

Query

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

Output

Here's a complete HTML file that draws a house with a chimney using WebGL, with the canvas taking 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
<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        canvas { width: 100%; height: 100%; display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    <script>
        const canvas = document.getElementById('glCanvas');
        const gl = canvas.getContext('webgl');

        function initShaders() {
            const vertexShaderSource = `
                attribute vec2 aPosition;
                void main() {
                    gl_Position = vec4(aPosition, 0.0, 1.0);
                }
            `;

            const fragmentShaderSource = `
                precision mediump float;
                uniform vec3 uColor;
                void main() {
                    gl_FragColor = vec4(uColor, 1.0);
                }
            `;

            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.compileShader(vertexShader);

            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);

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

            return program;
        }

        function createBuffer(vertices) {
            const buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            return buffer;
        }

        function drawShape(buffer, color, drawMode, count) {
            const program = gl.getParameter(gl.CURRENT_PROGRAM);
            const positionLoc = gl.getAttribLocation(program, 'aPosition');
            const colorLoc = gl.getUniformLocation(program, 'uColor');

            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(positionLoc);
            
            gl.uniform3fv(colorLoc, color);
            gl.drawArrays(drawMode, 0, count);
        }

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            gl.viewport(0, 0, canvas.width, canvas.height);
        }

        function drawHouse() {
            // House body (light blue)
            const houseVertices = [
                -0.6, -0.5,  0.6, -0.5,  -0.6, 0.3,
                 0.6, -0.5,  0.6, 0.3,   -0.6, 0.3
            ];
            const houseBuffer = createBuffer(houseVertices);
            drawShape(houseBuffer, [0.4, 0.6, 0.8], gl.TRIANGLES, 6);

            // Roof (dark red)
            const roofVertices = [-0.8, 0.3, 0.8, 0.3, 0.0, 0.7];
            const roofBuffer = createBuffer(roofVertices);
            drawShape(roofBuffer, [0.5, 0.0, 0.0], gl.TRIANGLES, 3);

            // Chimney (brown)
            const chimneyVertices = [0.4, 0.3, 0.5, 0.3, 0.4, 0.6, 0.5, 0.6];
            const chimneyBuffer = createBuffer(chimneyVertices);
            drawShape(chimneyBuffer, [0.4, 0.2, 0.1], gl.TRIANGLE_STRIP, 4);

            // Door (yellow)
            const doorVertices = [-0.15, -0.5, 0.15, -0.5, -0.15, 0.0, 0.15, 0.0];
            const doorBuffer = createBuffer(doorVertices);
            drawShape(doorBuffer, [0.9, 0.8, 0.2], gl.TRIANGLE_STRIP, 4);
        }

        function init() {
            if (!gl) {
                alert('WebGL not supported');
                return;
            }

            initShaders();
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            gl.clearColor(0.9, 0.9, 0.9, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            drawHouse();
        }

        init();
    </script>
</body>
</html>
This code: 1. Creates a full-screen canvas 2. Initializes WebGL context 3. Sets up basic shaders (vertex and fragment) 4. Creates a simple house with: - A light blue rectangular body - A dark red triangular roof - A brown chimney on the right side - A yellow rectangular door 5. Automatically resizes with the window 6. Uses a light gray background The house is drawn using triangle primitives with different colors for each component. All coordinates are in normalized device coordinates (-1 to 1 in both directions).

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
<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        canvas { width: 100%; height: 100%; display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    <script>
        const canvas = document.getElementById('glCanvas');
        const gl = canvas.getContext('webgl');

        function initShaders() {
            const vertexShaderSource = `
                attribute vec2 aPosition;
                void main() {
                    gl_Position = vec4(aPosition, 0.0, 1.0);
                }
            `;

            const fragmentShaderSource = `
                precision mediump float;
                uniform vec3 uColor;
                void main() {
                    gl_FragColor = vec4(uColor, 1.0);
                }
            `;

            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.compileShader(vertexShader);

            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);

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

            return program;
        }

        function createBuffer(vertices) {
            const buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            return buffer;
        }

        function drawShape(buffer, color, drawMode, count) {
            const program = gl.getParameter(gl.CURRENT_PROGRAM);
            const positionLoc = gl.getAttribLocation(program, 'aPosition');
            const colorLoc = gl.getUniformLocation(program, 'uColor');

            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(positionLoc);
            
            gl.uniform3fv(colorLoc, color);
            gl.drawArrays(drawMode, 0, count);
        }

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            gl.viewport(0, 0, canvas.width, canvas.height);
        }

        function drawHouse() {
            // House body (light blue)
            const houseVertices = [
                -0.6, -0.5,  0.6, -0.5,  -0.6, 0.3,
                 0.6, -0.5,  0.6, 0.3,   -0.6, 0.3
            ];
            const houseBuffer = createBuffer(houseVertices);
            drawShape(houseBuffer, [0.4, 0.6, 0.8], gl.TRIANGLES, 6);

            // Roof (dark red)
            const roofVertices = [-0.8, 0.3, 0.8, 0.3, 0.0, 0.7];
            const roofBuffer = createBuffer(roofVertices);
            drawShape(roofBuffer, [0.5, 0.0, 0.0], gl.TRIANGLES, 3);

            // Chimney (brown)
            const chimneyVertices = [0.4, 0.3, 0.5, 0.3, 0.4, 0.6, 0.5, 0.6];
            const chimneyBuffer = createBuffer(chimneyVertices);
            drawShape(chimneyBuffer, [0.4, 0.2, 0.1], gl.TRIANGLE_STRIP, 4);

            // Door (yellow)
            const doorVertices = [-0.15, -0.5, 0.15, -0.5, -0.15, 0.0, 0.15, 0.0];
            const doorBuffer = createBuffer(doorVertices);
            drawShape(doorBuffer, [0.9, 0.8, 0.2], gl.TRIANGLE_STRIP, 4);
        }

        function init() {
            if (!gl) {
                alert('WebGL not supported');
                return;
            }

            initShaders();
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            gl.clearColor(0.9, 0.9, 0.9, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            drawHouse();
        }

        init();
    </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 depicts a simple, stylized house. It has a blue square base, a red triangular roof, and a yellow rectangular door in the center. There is also a brown rectangular chimney on the right side of the roof. The background is a light gray color.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple, stylized house. It has a blue square base, a red triangular roof, and a yellow rectangular door in the center. There is also a brown rectangular chimney on the right side of the roof. The background is a light gray color."? 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