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 an HTML file that uses WebGL to draw a simple house with a chimney on a full-page canvas: 

  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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aVertexPosition;
            attribute vec4 aVertexColor;
            varying lowp vec4 vColor;
            void main(void) {
                gl_Position = aVertexPosition;
                vColor = aVertexColor;
            }
        `;

        const fragmentShaderSource = `
            varying lowp vec4 vColor;
            void main(void) {
                gl_FragColor = vColor;
            }
        `;

        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            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 loadShader(gl, type, source) {
            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 main() {
            const canvas = document.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (gl === null) {
                alert("Unable to initialize WebGL. Your browser or machine may not support it.");
                return;
            }

            const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);

            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
                    vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
                },
            };

            const buffers = initBuffers(gl);
            drawScene(gl, programInfo, buffers);
        }

        function initBuffers(gl) {
            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

            const positions = [
                // House body
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.3,
                -0.5, 0.3,
                // Roof
                -0.6, 0.3,
                0.0, 0.8,
                0.6, 0.3,
                // Chimney
                0.3, 0.5,
                0.5, 0.5,
                0.5, 0.7,
                0.3, 0.7
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

            const colors = [
                // House body (light blue)
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                // Roof (red)
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                // Chimney (gray)
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

            return {
                position: positionBuffer,
                color: colorBuffer,
            };
        }

        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.7, 0.4, 1.0);  // Clear to green, fully opaque
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(programInfo.program);

            {
                const numComponents = 2;
                const type = gl.FLOAT;
                const normalize = false;
                const stride = 0;
                const offset = 0;
                gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
                gl.vertexAttribPointer(
                    programInfo.attribLocations.vertexPosition,
                    numComponents,
                    type,
                    normalize,
                    stride,
                    offset);
                gl.enableVertexAttribArray(
                    programInfo.attribLocations.vertexPosition);
            }

            {
                const numComponents = 4;
                const type = gl.FLOAT;
                const normalize = false;
                const stride = 0;
                const offset = 0;
                gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
                gl.vertexAttribPointer(
                    programInfo.attribLocations.vertexColor,
                    numComponents,
                    type,
                    normalize,
                    stride,
                    offset);
                gl.enableVertexAttribArray(
                    programInfo.attribLocations.vertexColor);
            }

            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // House body
            gl.drawArrays(gl.TRIANGLE_FAN, 4, 3);  // Roof
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);  // Chimney
        }

        window.onload = () => {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            main();
        };

        window.onresize = () => {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            main();
        };
    </script>
</body>
</html>
This HTML file creates a full-page canvas and uses WebGL to draw a simple house with a chimney. Here's a breakdown of what the code does: 1. The HTML structure sets up a full-page canvas. 2. CSS ensures the canvas takes up the full page and removes any margins or scrollbars. 3. The JavaScript code

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aVertexPosition;
            attribute vec4 aVertexColor;
            varying lowp vec4 vColor;
            void main(void) {
                gl_Position = aVertexPosition;
                vColor = aVertexColor;
            }
        `;

        const fragmentShaderSource = `
            varying lowp vec4 vColor;
            void main(void) {
                gl_FragColor = vColor;
            }
        `;

        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            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 loadShader(gl, type, source) {
            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 main() {
            const canvas = document.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (gl === null) {
                alert("Unable to initialize WebGL. Your browser or machine may not support it.");
                return;
            }

            const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);

            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
                    vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
                },
            };

            const buffers = initBuffers(gl);
            drawScene(gl, programInfo, buffers);
        }

        function initBuffers(gl) {
            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

            const positions = [
                // House body
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.3,
                -0.5, 0.3,
                // Roof
                -0.6, 0.3,
                0.0, 0.8,
                0.6, 0.3,
                // Chimney
                0.3, 0.5,
                0.5, 0.5,
                0.5, 0.7,
                0.3, 0.7
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

            const colors = [
                // House body (light blue)
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                0.7, 0.8, 1.0, 1.0,
                // Roof (red)
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                // Chimney (gray)
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

            return {
                position: positionBuffer,
                color: colorBuffer,
            };
        }

        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.7, 0.4, 1.0);  // Clear to green, fully opaque
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(programInfo.program);

            {
                const numComponents = 2;
                const type = gl.FLOAT;
                const normalize = false;
                const stride = 0;
                const offset = 0;
                gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
                gl.vertexAttribPointer(
                    programInfo.attribLocations.vertexPosition,
                    numComponents,
                    type,
                    normalize,
                    stride,
                    offset);
                gl.enableVertexAttribArray(
                    programInfo.attribLocations.vertexPosition);
            }

            {
                const numComponents = 4;
                const type = gl.FLOAT;
                const normalize = false;
                const stride = 0;
                const offset = 0;
                gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
                gl.vertexAttribPointer(
                    programInfo.attribLocations.vertexColor,
                    numComponents,
                    type,
                    normalize,
                    stride,
                    offset);
                gl.enableVertexAttribArray(
                    programInfo.attribLocations.vertexColor);
            }

            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // House body
            gl.drawArrays(gl.TRIANGLE_FAN, 4, 3);  // Roof
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);  // Chimney
        }

        window.onload = () => {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            main();
        };

        window.onresize = () => {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            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 depicts a simple, stylized drawing of a house. The house consists of a light blue square representing the main structure, a red triangle on top representing the roof, and a small gray square on the right side of the roof, which could represent a chimney. The background is green.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple, stylized drawing of a house. The house consists of a light blue square representing the main structure, a red triangle on top representing the roof, and a small gray square on the right side of the roof, which could represent a chimney. The background is green."? 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

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 an HTML file that uses WebGL to draw a simple house with a chimney on a full-page canvas: 

  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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    attribute vec4 aVertexColor;
    varying lowp vec4 vColor;
    void main() {
        gl_Position = aVertexPosition;
        vColor = aVertexColor;
    }
`;

const fragmentShaderSource = `
    varying lowp vec4 vColor;
    void main() {
        gl_FragColor = vColor;
    }
`;

function initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    return shaderProgram;
}

function loadShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
}

function main() {
    const canvas = document.getElementById('glCanvas');
    const gl = canvas.getContext('webgl');

    if (!gl) {
        alert('Unable to initialize WebGL. Your browser may not support it.');
        return;
    }

    const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);

    const programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
            vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
        },
    };

    const buffers = initBuffers(gl);
    drawScene(gl, programInfo, buffers);
}

function initBuffers(gl) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
        // House body
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.2,
        -0.5, 0.2,
        // Roof
        -0.6, 0.2,
        0.0, 0.7,
        0.6, 0.2,
        // Chimney
        0.3, 0.4,
        0.45, 0.4,
        0.45, 0.8,
        0.3, 0.8
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

    const colors = [
        // House body - light blue
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        // Roof - red
        0.8, 0.2, 0.2, 1.0,
        0.8, 0.2, 0.2, 1.0,
        0.8, 0.2, 0.2, 1.0,
        // Chimney - gray
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

    return {
        position: positionBuffer,
        color: colorBuffer,
    };
}

function drawScene(gl, programInfo, buffers) {
    gl.clearColor(0.0, 0.7, 0.4, 1.0);  // Clear to green, representing grass
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(programInfo.program);

    {
        const numComponents = 2;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    }

    {
        const numComponents = 4;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexColor,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
    }

    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // House body
    gl.drawArrays(gl.TRIANGLES, 4, 3);     // Roof
    gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);  // Chimney
}

window.onload = main;
window.onresize = () => {
    const canvas = document.getElementById('glCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const gl = canvas.getContext('webgl');
    gl.viewport(0, 0, canvas.width, canvas.height);
    main();
};
</script>
</body>
</html>
This HTML file creates a full-page canvas and uses WebGL to draw a simple house with a chimney. Here's a breakdown of what the code does: 1. It sets up the HTML structure with a full-page canvas. 2. The JavaScript code defines vertex and fragment shaders. 3. It initializes WebGL and creates a shader program. 4. The `initBuffers` function creates buffers for the house geometry and colors. 5. The `drawScene` function renders the house using the created buffers. 6. The main function sets everything up and calls `drawScene`. 7. An onresize event handler ensures the canvas always fills the entire window and redraws the scene when the window size changes. The house is drawn using simple 2D coordinates, with a light blue body, a red roof, and a gray chimney, all on a green background representing grass. To see the result, save this code as an HTML file and open it in a web browser that supports WebGL.

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    attribute vec4 aVertexColor;
    varying lowp vec4 vColor;
    void main() {
        gl_Position = aVertexPosition;
        vColor = aVertexColor;
    }
`;

const fragmentShaderSource = `
    varying lowp vec4 vColor;
    void main() {
        gl_FragColor = vColor;
    }
`;

function initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    return shaderProgram;
}

function loadShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
}

function main() {
    const canvas = document.getElementById('glCanvas');
    const gl = canvas.getContext('webgl');

    if (!gl) {
        alert('Unable to initialize WebGL. Your browser may not support it.');
        return;
    }

    const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);

    const programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
            vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
        },
    };

    const buffers = initBuffers(gl);
    drawScene(gl, programInfo, buffers);
}

function initBuffers(gl) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
        // House body
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.2,
        -0.5, 0.2,
        // Roof
        -0.6, 0.2,
        0.0, 0.7,
        0.6, 0.2,
        // Chimney
        0.3, 0.4,
        0.45, 0.4,
        0.45, 0.8,
        0.3, 0.8
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

    const colors = [
        // House body - light blue
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        0.6, 0.8, 1.0, 1.0,
        // Roof - red
        0.8, 0.2, 0.2, 1.0,
        0.8, 0.2, 0.2, 1.0,
        0.8, 0.2, 0.2, 1.0,
        // Chimney - gray
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

    return {
        position: positionBuffer,
        color: colorBuffer,
    };
}

function drawScene(gl, programInfo, buffers) {
    gl.clearColor(0.0, 0.7, 0.4, 1.0);  // Clear to green, representing grass
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(programInfo.program);

    {
        const numComponents = 2;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    }

    {
        const numComponents = 4;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
        gl.vertexAttribPointer(
            programInfo.attribLocations.vertexColor,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
    }

    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);  // House body
    gl.drawArrays(gl.TRIANGLES, 4, 3);     // Roof
    gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);  // Chimney
}

window.onload = main;
window.onresize = () => {
    const canvas = document.getElementById('glCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const gl = canvas.getContext('webgl');
    gl.viewport(0, 0, canvas.width, canvas.height);
    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 depicts a simple, stylized drawing of a house. The house has a blue rectangular body, a red triangular roof, and a gray rectangular chimney on the right side of the roof. The background is green.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple, stylized drawing of a house. The house has a blue rectangular body, a red triangular roof, and a gray rectangular chimney on the right side of the roof. The background is green."? 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

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 an HTML file that uses WebGL to draw a simple house with a chimney on a full-page canvas: 

  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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vsSource = `
            attribute vec4 aVertexPosition;
            attribute vec4 aVertexColor;
            varying lowp vec4 vColor;
            void main(void) {
                gl_Position = aVertexPosition;
                vColor = aVertexColor;
            }
        `;

        const fsSource = `
            varying lowp vec4 vColor;
            void main(void) {
                gl_FragColor = vColor;
            }
        `;

        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            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 loadShader(gl, type, source) {
            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 main() {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
                    vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
                },
            };

            const buffers = initBuffers(gl);
            drawScene(gl, programInfo, buffers);
        }

        function initBuffers(gl) {
            const positions = [
                // House body
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.3,
                -0.5, 0.3,
                // Roof
                -0.6, 0.3,
                0.0, 0.8,
                0.6, 0.3,
                // Chimney
                0.3, 0.5,
                0.4, 0.5,
                0.4, 0.9,
                0.3, 0.9
            ];

            const colors = [
                // House body (light blue)
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                // Roof (red)
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                // Chimney (gray)
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0
            ];

            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

            return {
                position: positionBuffer,
                color: colorBuffer,
            };
        }

        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.7, 0.0, 1.0);  // Clear to green, representing grass
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(programInfo.program);

            // Position attribute
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
            gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

            // Color attribute
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
            gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);

            // Draw house body
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            // Draw roof
            gl.drawArrays(gl.TRIANGLE_FAN, 4, 3);
            // Draw chimney
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        window.onload = main;
    </script>
</body>
</html>
This HTML file creates a full-page canvas and uses WebGL to draw a simple house with a chimney. Here's a breakdown of what the code does: 1. The HTML structure sets up a full-page canvas. 2. The CSS ensures the canvas takes up the full page. 3. The JavaScript code initializes WebGL and sets up the necessary shaders and buffers. 4. The `initBuffers` function defines the geometry and colors for the house, roof, and chimney. 5. The `drawScene` function renders the house on the canvas. The house is drawn using simple 2D coordinates, with the house body in light blue, the roof in red, and the chimney in gray. The background is set to green to represent grass. When you open this HTML file in a WebGL-compatible browser, you should see a simple house with a chimney drawn on a full-page green background.

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vsSource = `
            attribute vec4 aVertexPosition;
            attribute vec4 aVertexColor;
            varying lowp vec4 vColor;
            void main(void) {
                gl_Position = aVertexPosition;
                vColor = aVertexColor;
            }
        `;

        const fsSource = `
            varying lowp vec4 vColor;
            void main(void) {
                gl_FragColor = vColor;
            }
        `;

        function initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            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 loadShader(gl, type, source) {
            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 main() {
            const canvas = document.getElementById('glCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
                    vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
                },
            };

            const buffers = initBuffers(gl);
            drawScene(gl, programInfo, buffers);
        }

        function initBuffers(gl) {
            const positions = [
                // House body
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.3,
                -0.5, 0.3,
                // Roof
                -0.6, 0.3,
                0.0, 0.8,
                0.6, 0.3,
                // Chimney
                0.3, 0.5,
                0.4, 0.5,
                0.4, 0.9,
                0.3, 0.9
            ];

            const colors = [
                // House body (light blue)
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                0.6, 0.8, 1.0, 1.0,
                // Roof (red)
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                0.8, 0.2, 0.2, 1.0,
                // Chimney (gray)
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0,
                0.5, 0.5, 0.5, 1.0
            ];

            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

            return {
                position: positionBuffer,
                color: colorBuffer,
            };
        }

        function drawScene(gl, programInfo, buffers) {
            gl.clearColor(0.0, 0.7, 0.0, 1.0);  // Clear to green, representing grass
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(programInfo.program);

            // Position attribute
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
            gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

            // Color attribute
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
            gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);

            // Draw house body
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            // Draw roof
            gl.drawArrays(gl.TRIANGLE_FAN, 4, 3);
            // Draw chimney
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        window.onload = 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 depicts a simple drawing of a house. The house has a blue rectangular body and a red triangular roof. There is also a gray rectangular chimney on the right side of the roof. The background is green, suggesting grass or a lawn.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple drawing of a house. The house has a blue rectangular body and a red triangular roof. There is also a gray rectangular chimney on the right side of the roof. The background is green, suggesting grass or a lawn."? 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

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 an HTML file that uses WebGL to draw a simple house with a chimney, 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 u_color;
            void main() {
                gl_FragColor = u_color;
            }
        `;

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            return program;
        }

        function main() {
            const canvas = document.getElementById('glCanvas');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);

            const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
            const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

            const positionBuffer = gl.createBuffer();

            function resizeCanvasToDisplaySize(canvas) {
                const displayWidth  = canvas.clientWidth;
                const displayHeight = canvas.clientHeight;

                if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                    canvas.width  = displayWidth;
                    canvas.height = displayHeight;
                }
            }

            function drawHouse() {
                resizeCanvasToDisplaySize(gl.canvas);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

                gl.clearColor(0.8, 0.8, 1.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                gl.useProgram(program);

                gl.enableVertexAttribArray(positionAttributeLocation);
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

                // Draw house body
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    -0.5, -0.5,
                    0.5, -0.5,
                    0.5, 0.2,
                    -0.5, 0.2
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.8, 0.6, 0.4, 1.0);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

                // Draw roof
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    -0.6, 0.2,
                    0.6, 0.2,
                    0, 0.7
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.7, 0.3, 0.2, 1.0);
                gl.drawArrays(gl.TRIANGLES, 0, 3);

                // Draw chimney
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    0.3, 0.4,
                    0.4, 0.4,
                    0.4, 0.7,
                    0.3, 0.7
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.5, 0.5, 0.5, 1.0);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            }

            drawHouse();
            window.addEventListener('resize', drawHouse);
        }

        window.onload = main;
    </script>
</body>
</html>
This HTML file does the following: 1. Sets up a full-page canvas using CSS. 2. Defines vertex and fragment shaders for 2D drawing. 3. Creates WebGL shaders and program. 4. Implements a `drawHouse` function that: - Resizes the canvas to match the display size. - Clears the canvas with a light blue background. - Draws the house body (brown rectangle). - Draws the roof (red triangle). - Draws the chimney (gray rectangle). 5. Calls `drawHouse` initially and on window resize to ensure the house always fits the screen. When you open this HTML file in a WebGL-compatible browser, you'll see a simple house with a chimney drawn using WebGL, filling the entire page. The house will resize to fit the window if you change the browser window size.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 u_color;
            void main() {
                gl_FragColor = u_color;
            }
        `;

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            return program;
        }

        function main() {
            const canvas = document.getElementById('glCanvas');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);

            const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
            const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

            const positionBuffer = gl.createBuffer();

            function resizeCanvasToDisplaySize(canvas) {
                const displayWidth  = canvas.clientWidth;
                const displayHeight = canvas.clientHeight;

                if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                    canvas.width  = displayWidth;
                    canvas.height = displayHeight;
                }
            }

            function drawHouse() {
                resizeCanvasToDisplaySize(gl.canvas);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

                gl.clearColor(0.8, 0.8, 1.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                gl.useProgram(program);

                gl.enableVertexAttribArray(positionAttributeLocation);
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

                // Draw house body
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    -0.5, -0.5,
                    0.5, -0.5,
                    0.5, 0.2,
                    -0.5, 0.2
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.8, 0.6, 0.4, 1.0);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

                // Draw roof
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    -0.6, 0.2,
                    0.6, 0.2,
                    0, 0.7
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.7, 0.3, 0.2, 1.0);
                gl.drawArrays(gl.TRIANGLES, 0, 3);

                // Draw chimney
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    0.3, 0.4,
                    0.4, 0.4,
                    0.4, 0.7,
                    0.3, 0.7
                ]), gl.STATIC_DRAW);
                gl.uniform4f(colorUniformLocation, 0.5, 0.5, 0.5, 1.0);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            }

            drawHouse();
            window.addEventListener('resize', drawHouse);
        }

        window.onload = 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 depicts a simple drawing of a house. The house has a brown rectangular base and a red triangular roof. There is also a small gray chimney on the right side of the roof. The background is a light blue color.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple drawing of a house. The house has a brown rectangular base and a red triangular roof. There is also a small gray chimney on the right side of the roof. The background is a light blue 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

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 an HTML file that uses WebGL to draw a simple house with a chimney, 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
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 u_color;
            void main() {
                gl_FragColor = u_color;
            }
        `;

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            return program;
        }

        function main() {
            const canvas = document.getElementById('glCanvas');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);

            const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
            const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

            const positionBuffer = gl.createBuffer();

            function resizeCanvasToDisplaySize(canvas) {
                const displayWidth  = canvas.clientWidth;
                const displayHeight = canvas.clientHeight;

                if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                    canvas.width  = displayWidth;
                    canvas.height = displayHeight;
                }
            }

            function drawShape(vertices, color) {
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
                gl.uniform4fv(colorUniformLocation, color);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2);
            }

            function render() {
                resizeCanvasToDisplaySize(gl.canvas);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

                gl.clearColor(0.8, 0.8, 1.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                gl.useProgram(program);
                gl.enableVertexAttribArray(positionAttributeLocation);
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

                // Draw house body
                drawShape([
                    -0.5, -0.5,
                    0.5, -0.5,
                    0.5, 0.2,
                    -0.5, 0.2
                ], [0.8, 0.7, 0.6, 1]);

                // Draw roof
                drawShape([
                    -0.5, 0.2,
                    0.5, 0.2,
                    0, 0.7
                ], [0.7, 0.3, 0.2, 1]);

                // Draw chimney
                drawShape([
                    0.2, 0.3,
                    0.3, 0.3,
                    0.3, 0.6,
                    0.2, 0.6
                ], [0.5, 0.5, 0.5, 1]);
            }

            render();
        }

        window.onload = main;
    </script>
</body>
</html>
This HTML file does the following: 1. Sets up a full-page canvas using CSS. 2. Defines vertex and fragment shaders for basic 2D rendering. 3. Creates WebGL shaders and program. 4. Implements a `drawShape` function to draw different parts of the house. 5. In the `render` function: - Clears the canvas with a light blue background color. - Draws the house body (a rectangle) in a light brown color. - Draws the roof (a triangle) in a reddish-brown color. - Draws the chimney (a small rectangle) in gray. 6. Ensures the canvas is resized to fit the full page. When you open this HTML file in a WebGL-compatible browser, you should see a simple house with a chimney drawn using WebGL, filling 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL House with Chimney</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec2 a_position;
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 u_color;
            void main() {
                gl_FragColor = u_color;
            }
        `;

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            return program;
        }

        function main() {
            const canvas = document.getElementById('glCanvas');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                alert('Unable to initialize WebGL. Your browser may not support it.');
                return;
            }

            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);

            const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
            const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

            const positionBuffer = gl.createBuffer();

            function resizeCanvasToDisplaySize(canvas) {
                const displayWidth  = canvas.clientWidth;
                const displayHeight = canvas.clientHeight;

                if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
                    canvas.width  = displayWidth;
                    canvas.height = displayHeight;
                }
            }

            function drawShape(vertices, color) {
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
                gl.uniform4fv(colorUniformLocation, color);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2);
            }

            function render() {
                resizeCanvasToDisplaySize(gl.canvas);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

                gl.clearColor(0.8, 0.8, 1.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                gl.useProgram(program);
                gl.enableVertexAttribArray(positionAttributeLocation);
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

                // Draw house body
                drawShape([
                    -0.5, -0.5,
                    0.5, -0.5,
                    0.5, 0.2,
                    -0.5, 0.2
                ], [0.8, 0.7, 0.6, 1]);

                // Draw roof
                drawShape([
                    -0.5, 0.2,
                    0.5, 0.2,
                    0, 0.7
                ], [0.7, 0.3, 0.2, 1]);

                // Draw chimney
                drawShape([
                    0.2, 0.3,
                    0.3, 0.3,
                    0.3, 0.6,
                    0.2, 0.6
                ], [0.5, 0.5, 0.5, 1]);
            }

            render();
        }

        window.onload = 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 depicts a simple drawing of a house. The house has a beige rectangular base and a red triangular roof. There is also a small gray rectangle on the roof, which appears to be a chimney. The background is a light blue color.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image depicts a simple drawing of a house. The house has a beige rectangular base and a red triangular roof. There is also a small gray rectangle on the roof, which appears to be a chimney. The background is a light blue 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