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 uses WebGL to draw a simple house with a chimney, filling the entire 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL House</title>
    <style>
        body, html { 
            margin: 0; 
            padding: 0; 
            overflow: hidden; 
        }
        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');

        // Set canvas to full window size
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            gl.viewport(0, 0, canvas.width, canvas.height);
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // Vertex shader
        const vsSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            void main() {
                gl_Position = vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 v_color;
            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

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

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

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

        // House vertices
        const vertices = [
            // Main house body
            -0.5, -0.3, 0,   0.8, 0.4, 0.2,  // bottom left
             0.5, -0.3, 0,   0.8, 0.4, 0.2,  // bottom right
             0.5,  0.3, 0,   0.6, 0.3, 0.1,  // top right
            -0.5,  0.3, 0,   0.6, 0.3, 0.1,  // top left

            // Roof
            0.0,  0.7, 0,   0.5, 0.2, 0.0,  // roof peak
            -0.5, 0.3, 0,   0.5, 0.2, 0.0,  // left roof base
             0.5, 0.3, 0,   0.5, 0.2, 0.0,  // right roof base

            // Chimney
             0.3,  0.5, 0,   0.6, 0.3, 0.1,  // chimney top right
             0.2,  0.5, 0,   0.6, 0.3, 0.1,  // chimney top left
             0.3,  0.3, 0,   0.5, 0.2, 0.0,  // chimney bottom right
             0.2,  0.3, 0,   0.5, 0.2, 0.0   // chimney bottom left
        ];

        // Create buffer
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        // Position attribute
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 24, 0);

        // Color attribute
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');
        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 24, 12);

        // Draw
        gl.clearColor(0.7, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // Draw house body
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
        
        // Draw roof
        gl.drawArrays(gl.TRIANGLES, 4, 3);
        
        // Draw chimney
        gl.drawArrays(gl.TRIANGLE_STRIP, 7, 4);
    </script>
</body>
</html>
This WebGL example creates a simple house with the following features: - Full page canvas - House body in a warm color - Triangular roof - Small chimney - Responsive to window resizing When you open this HTML file in a browser, you'll see a basic house drawing that fills the entire browser window.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL House</title>
    <style>
        body, html { 
            margin: 0; 
            padding: 0; 
            overflow: hidden; 
        }
        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');

        // Set canvas to full window size
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            gl.viewport(0, 0, canvas.width, canvas.height);
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // Vertex shader
        const vsSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            void main() {
                gl_Position = vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 v_color;
            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

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

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

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

        // House vertices
        const vertices = [
            // Main house body
            -0.5, -0.3, 0,   0.8, 0.4, 0.2,  // bottom left
             0.5, -0.3, 0,   0.8, 0.4, 0.2,  // bottom right
             0.5,  0.3, 0,   0.6, 0.3, 0.1,  // top right
            -0.5,  0.3, 0,   0.6, 0.3, 0.1,  // top left

            // Roof
            0.0,  0.7, 0,   0.5, 0.2, 0.0,  // roof peak
            -0.5, 0.3, 0,   0.5, 0.2, 0.0,  // left roof base
             0.5, 0.3, 0,   0.5, 0.2, 0.0,  // right roof base

            // Chimney
             0.3,  0.5, 0,   0.6, 0.3, 0.1,  // chimney top right
             0.2,  0.5, 0,   0.6, 0.3, 0.1,  // chimney top left
             0.3,  0.3, 0,   0.5, 0.2, 0.0,  // chimney bottom right
             0.2,  0.3, 0,   0.5, 0.2, 0.0   // chimney bottom left
        ];

        // Create buffer
        const buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        // Position attribute
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 24, 0);

        // Color attribute
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');
        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 24, 12);

        // Draw
        gl.clearColor(0.7, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // Draw house body
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
        
        // Draw roof
        gl.drawArrays(gl.TRIANGLES, 4, 3);
        
        // Draw chimney
        gl.drawArrays(gl.TRIANGLE_STRIP, 7, 4);
    </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 against a light blue background. The house has a brown, triangular roof and a rectangular body. There is also a small rectangular chimney on the right side of the roof.

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 against a light blue background. The house has a brown, triangular roof and a rectangular body. There is also a small rectangular chimney on the right side of the roof."? 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 a complete HTML file that uses WebGL to draw a simple house with a chimney: 

  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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL House</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    
    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const gl = canvas.getContext('webgl');
        
        const vertexShaderSource = `
            attribute vec2 a_position;
            
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;
        
        const fragmentShaderSource = `
            precision mediump float;
            
            void main() {
                gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
            }
        `;
        
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }
        
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
        
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const positionBuffer = gl.createBuffer();
        
        function drawHouse() {
            const vertices = [
                // Main house body (rectangle)
                -0.5, -0.3,  // bottom left
                 0.5, -0.3,  // bottom right
                 0.5,  0.3,  // top right
                -0.5,  0.3,  // top left
                
                // Roof (triangle)
                -0.6,  0.3,  // left point
                 0.0,  0.7,  // top point
                 0.6,  0.3,  // right point
                
                // Chimney
                 0.3,  0.5,  // bottom left
                 0.4,  0.5,  // bottom right
                 0.4,  0.7,  // top right
                 0.3,  0.7   // top left
            ];
            
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(positionAttributeLocation);
            
            gl.useProgram(program);
            
            // Draw main house body (rectangle)
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            
            // Draw roof (triangle)
            gl.drawArrays(gl.TRIANGLES, 4, 3);
            
            // Draw chimney (rectangle)
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }
        
        gl.clearColor(0.8, 0.8, 0.8, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        drawHouse();
    </script>
</body>
</html>
This WebGL example will: - Create a full-page canvas - Draw a simple gray house with a roof and chimney - Use WebGL with basic vertex and fragment shaders - Render the house using triangle drawing methods You can adjust the vertex coordinates to modify the house's shape and proportions.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL House</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    
    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const gl = canvas.getContext('webgl');
        
        const vertexShaderSource = `
            attribute vec2 a_position;
            
            void main() {
                gl_Position = vec4(a_position, 0.0, 1.0);
            }
        `;
        
        const fragmentShaderSource = `
            precision mediump float;
            
            void main() {
                gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
            }
        `;
        
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        }
        
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
        
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const positionBuffer = gl.createBuffer();
        
        function drawHouse() {
            const vertices = [
                // Main house body (rectangle)
                -0.5, -0.3,  // bottom left
                 0.5, -0.3,  // bottom right
                 0.5,  0.3,  // top right
                -0.5,  0.3,  // top left
                
                // Roof (triangle)
                -0.6,  0.3,  // left point
                 0.0,  0.7,  // top point
                 0.6,  0.3,  // right point
                
                // Chimney
                 0.3,  0.5,  // bottom left
                 0.4,  0.5,  // bottom right
                 0.4,  0.7,  // top right
                 0.3,  0.7   // top left
            ];
            
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(positionAttributeLocation);
            
            gl.useProgram(program);
            
            // Draw main house body (rectangle)
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
            
            // Draw roof (triangle)
            gl.drawArrays(gl.TRIANGLES, 4, 3);
            
            // Draw chimney (rectangle)
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }
        
        gl.clearColor(0.8, 0.8, 0.8, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        drawHouse();
    </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 simple, stylized silhouette of a house. It has a triangular roof and a rectangular chimney on the right side. The house is filled with a solid gray color against a lighter gray background.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image shows a simple, stylized silhouette of a house. It has a triangular roof and a rectangular chimney on the right side. The house is filled with a solid gray color against a lighter gray background."? 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 a complete HTML file that uses WebGL to draw a simple house with a chimney: 

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

    <script>
        const canvas = document.getElementById('glCanvas');
        const gl = canvas.getContext('webgl');

        // Set canvas to full page
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);

        // Vertex shader
        const vsSource = `
            attribute vec3 aVertexPosition;
            attribute vec3 aVertexColor;
            varying vec3 vColor;
            void main() {
                gl_Position = vec4(aVertexPosition, 1.0);
                vColor = aVertexColor;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 vColor;
            void main() {
                gl_FragColor = vec4(vColor, 1.0);
            }
        `;

        // Create shader program
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vsSource);
        gl.compileShader(vertexShader);

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

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

        // House body vertices
        const vertices = [
            // House main body
            -0.5, -0.3, 0,    // Bottom left
            0.5, -0.3, 0,     // Bottom right
            0.5, 0.3, 0,      // Top right
            -0.5, 0.3, 0,     // Top left

            // Roof
            0, 0.7, 0,        // Roof peak
            -0.7, 0.3, 0,     // Left roof corner
            0.7, 0.3, 0,      // Right roof corner

            // Chimney
            0.3, 0.5, 0,      // Chimney bottom right
            0.2, 0.5, 0,      // Chimney bottom left
            0.2, 0.7, 0,      // Chimney top left
            0.3, 0.7, 0       // Chimney top right
        ];

        // Colors for vertices
        const colors = [
            // House body colors
            0.8, 0.6, 0.4,    // Brown
            0.8, 0.6, 0.4,
            0.8, 0.6, 0.4,
            0.8, 0.6, 0.4,

            // Roof colors
            0.6, 0.3, 0.1,    // Dark red
            0.6, 0.3, 0.1,
            0.6, 0.3, 0.1,

            // Chimney colors
            0.5, 0.5, 0.5,    // Gray
            0.5, 0.5, 0.5,
            0.5, 0.5, 0.5,
            0.5, 0.5, 0.5
        ];

        // Indices for drawing
        const indices = [
            // House body
            0, 1, 2,
            0, 2, 3,

            // Roof
            4, 5, 6,

            // Chimney
            7, 8, 9,
            7, 9, 10
        ];

        // Create buffers
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

        const indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

        // Set up attributes
        const positionAttributeLocation = gl.getAttribLocation(program, 'aVertexPosition');
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

        const colorAttributeLocation = gl.getAttribLocation(program, 'aVertexColor');
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);

        // Clear and draw
        gl.clearColor(0.8, 0.9, 1.0, 1.0);  // Light blue sky
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    </script>
</body>
</html>
This HTML file contains a complete WebGL implementation to draw a simple house with the following features: - Full-page canvas - House body in brown - Triangular roof in dark red - Chimney in gray - Light blue sky background The house is drawn using triangles, with vertices and colors defined directly in the script. The WebGL context is used to render the shapes.

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

    <script>
        const canvas = document.getElementById('glCanvas');
        const gl = canvas.getContext('webgl');

        // Set canvas to full page
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);

        // Vertex shader
        const vsSource = `
            attribute vec3 aVertexPosition;
            attribute vec3 aVertexColor;
            varying vec3 vColor;
            void main() {
                gl_Position = vec4(aVertexPosition, 1.0);
                vColor = aVertexColor;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 vColor;
            void main() {
                gl_FragColor = vec4(vColor, 1.0);
            }
        `;

        // Create shader program
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vsSource);
        gl.compileShader(vertexShader);

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

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

        // House body vertices
        const vertices = [
            // House main body
            -0.5, -0.3, 0,    // Bottom left
            0.5, -0.3, 0,     // Bottom right
            0.5, 0.3, 0,      // Top right
            -0.5, 0.3, 0,     // Top left

            // Roof
            0, 0.7, 0,        // Roof peak
            -0.7, 0.3, 0,     // Left roof corner
            0.7, 0.3, 0,      // Right roof corner

            // Chimney
            0.3, 0.5, 0,      // Chimney bottom right
            0.2, 0.5, 0,      // Chimney bottom left
            0.2, 0.7, 0,      // Chimney top left
            0.3, 0.7, 0       // Chimney top right
        ];

        // Colors for vertices
        const colors = [
            // House body colors
            0.8, 0.6, 0.4,    // Brown
            0.8, 0.6, 0.4,
            0.8, 0.6, 0.4,
            0.8, 0.6, 0.4,

            // Roof colors
            0.6, 0.3, 0.1,    // Dark red
            0.6, 0.3, 0.1,
            0.6, 0.3, 0.1,

            // Chimney colors
            0.5, 0.5, 0.5,    // Gray
            0.5, 0.5, 0.5,
            0.5, 0.5, 0.5,
            0.5, 0.5, 0.5
        ];

        // Indices for drawing
        const indices = [
            // House body
            0, 1, 2,
            0, 2, 3,

            // Roof
            4, 5, 6,

            // Chimney
            7, 8, 9,
            7, 9, 10
        ];

        // Create buffers
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

        const indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

        // Set up attributes
        const positionAttributeLocation = gl.getAttribLocation(program, 'aVertexPosition');
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

        const colorAttributeLocation = gl.getAttribLocation(program, 'aVertexColor');
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);

        // Clear and draw
        gl.clearColor(0.8, 0.9, 1.0, 1.0);  // Light blue sky
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    </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 simple drawing of a house. It has a brown triangular roof and a rectangular body in a lighter brown color. There is also a small gray rectangle on the roof, which resembles 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 shows a simple drawing of a house. It has a brown triangular roof and a rectangular body in a lighter brown color. There is also a small gray rectangle on the roof, which resembles 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

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 with WebGL code to draw a simple house with a chimney: 

  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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

        // Vertex shader
        const vsSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            uniform mat4 u_matrix;
            void main() {
                gl_Position = u_matrix * vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 v_color;
            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

        // Create shader program
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vsSource);
        gl.compileShader(vertexShader);

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

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

        // House vertices and colors
        const vertices = [
            // House base
            -0.5, -0.5, 0,   0.5, 0.3, 0.2,  // bottom left
             0.5, -0.5, 0,   0.5, 0.3, 0.2,  // bottom right
             0.5,  0.5, 0,   0.7, 0.5, 0.3,  // top right
            -0.5,  0.5, 0,   0.7, 0.5, 0.3,  // top left

            // Roof
            0.0,  0.8, 0,   0.6, 0.2, 0.2,   // top point
            -0.7, 0.5, 0,   0.4, 0.2, 0.2,   // left point
             0.7, 0.5, 0,   0.4, 0.2, 0.2,   // right point

            // Chimney
            0.3, 0.7, 0,   0.5, 0.5, 0.5,    // chimney bottom left
            0.4, 0.7, 0,   0.5, 0.5, 0.5,    // chimney bottom right
            0.4, 0.9, 0,   0.7, 0.7, 0.7,    // chimney top right
            0.3, 0.9, 0,   0.7, 0.7, 0.7     // chimney top left
        ];

        const indices = [
            // House base
            0, 1, 2,
            0, 2, 3,

            // Roof
            4, 5, 6,

            // Chimney
            7, 8, 9,
            7, 9, 10
        ];

        // Create buffers
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        const indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

        // Get attribute locations
        gl.useProgram(program);
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');

        // Set up attributes
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 24, 0);

        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 24, 12);

        // Create matrix
        function makeOrthoMatrix(left, right, bottom, top, near, far) {
            return [
                2 / (right - left), 0, 0, 0,
                0, 2 / (top - bottom), 0, 0,
                0, 0, 2 / (near - far), 0,
                (left + right) / (left - right), (bottom + top) / (bottom - top), (near + far) / (near - far), 1
            ];
        }

        const orthoMatrix = makeOrthoMatrix(-1, 1, -1, 1, -1, 1);
        const matrixLocation = gl.getUniformLocation(program, 'u_matrix');
        gl.uniformMatrix4fv(matrixLocation, false, orthoMatrix);

        // Draw
        gl.clearColor(0.8, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    </script>
</body>
</html>
This WebGL example creates a simple house with a chimney. The code includes: - Full-page canvas - Vertex and fragment shaders - House geometry with colors - Orthographic projection - Basic rendering of house and chimney shapes When you open this HTML file in a browser, you'll see a colored house with a roof and chimney.

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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

        // Vertex shader
        const vsSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            uniform mat4 u_matrix;
            void main() {
                gl_Position = u_matrix * vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        // Fragment shader
        const fsSource = `
            precision mediump float;
            varying vec3 v_color;
            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

        // Create shader program
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vsSource);
        gl.compileShader(vertexShader);

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

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

        // House vertices and colors
        const vertices = [
            // House base
            -0.5, -0.5, 0,   0.5, 0.3, 0.2,  // bottom left
             0.5, -0.5, 0,   0.5, 0.3, 0.2,  // bottom right
             0.5,  0.5, 0,   0.7, 0.5, 0.3,  // top right
            -0.5,  0.5, 0,   0.7, 0.5, 0.3,  // top left

            // Roof
            0.0,  0.8, 0,   0.6, 0.2, 0.2,   // top point
            -0.7, 0.5, 0,   0.4, 0.2, 0.2,   // left point
             0.7, 0.5, 0,   0.4, 0.2, 0.2,   // right point

            // Chimney
            0.3, 0.7, 0,   0.5, 0.5, 0.5,    // chimney bottom left
            0.4, 0.7, 0,   0.5, 0.5, 0.5,    // chimney bottom right
            0.4, 0.9, 0,   0.7, 0.7, 0.7,    // chimney top right
            0.3, 0.9, 0,   0.7, 0.7, 0.7     // chimney top left
        ];

        const indices = [
            // House base
            0, 1, 2,
            0, 2, 3,

            // Roof
            4, 5, 6,

            // Chimney
            7, 8, 9,
            7, 9, 10
        ];

        // Create buffers
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        const indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

        // Get attribute locations
        gl.useProgram(program);
        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');

        // Set up attributes
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 24, 0);

        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 24, 12);

        // Create matrix
        function makeOrthoMatrix(left, right, bottom, top, near, far) {
            return [
                2 / (right - left), 0, 0, 0,
                0, 2 / (top - bottom), 0, 0,
                0, 0, 2 / (near - far), 0,
                (left + right) / (left - right), (bottom + top) / (bottom - top), (near + far) / (near - far), 1
            ];
        }

        const orthoMatrix = makeOrthoMatrix(-1, 1, -1, 1, -1, 1);
        const matrixLocation = gl.getUniformLocation(program, 'u_matrix');
        gl.uniformMatrix4fv(matrixLocation, false, orthoMatrix);

        // Draw
        gl.clearColor(0.8, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
    </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 house-like structure. It has a brown rectangular base representing the walls and a dark red triangular shape on top representing the roof. There is also a small gray rectangle above the roof, which could represent 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 house-like structure. It has a brown rectangular base representing the walls and a dark red triangular shape on top representing the roof. There is also a small gray rectangle above the roof, which could represent 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

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 with WebGL code to draw a simple house with a chimney: 

  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
<!DOCTYPE html>
<html>
<head>
    <title>House with WebGL</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

        const vertexShaderSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            uniform mat4 u_matrix;

            void main() {
                gl_Position = u_matrix * vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            varying vec3 v_color;

            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

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

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

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

        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');
        const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');

        // House vertices and colors
        const vertices = new Float32Array([
            // Main House (walls)
            -0.5, -0.5, 0.0,    0.7, 0.5, 0.3,
             0.5, -0.5, 0.0,    0.7, 0.5, 0.3,
             0.5,  0.5, 0.0,    0.7, 0.5, 0.3,
            -0.5,  0.5, 0.0,    0.7, 0.5, 0.3,

            // Roof
            0.0,  0.8, 0.0,    0.6, 0.3, 0.1,
            -0.7, 0.5, 0.0,    0.6, 0.3, 0.1,
             0.7, 0.5, 0.0,    0.6, 0.3, 0.1,

            // Chimney
            0.3, 0.6, 0.0,     0.5, 0.5, 0.5,
            0.4, 0.6, 0.0,     0.5, 0.5, 0.5,
            0.4, 0.8, 0.0,     0.5, 0.5, 0.5,
            0.3, 0.8, 0.0,     0.5, 0.5, 0.5,
        ]);

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

        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.8, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(program);

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 6 * 4, 0);

        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 6 * 4, 3 * 4);

        const aspectRatio = canvas.width / canvas.height;
        const matrix = [
            1/aspectRatio, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ];

        gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);

        // Draw House walls
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

        // Draw Roof
        gl.drawArrays(gl.TRIANGLES, 4, 3);

        // Draw Chimney
        gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
    </script>
</body>
</html>
This code creates a simple house with: - A rectangular main structure - A triangular roof - A small rectangular chimney The house is drawn using WebGL with basic color shading. The canvas is set to fill the entire page, and the rendering adjusts to the screen's aspect ratio.

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
<!DOCTYPE html>
<html>
<head>
    <title>House with WebGL</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>
    <script>
        const canvas = document.getElementById('glCanvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

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

        const vertexShaderSource = `
            attribute vec3 a_position;
            attribute vec3 a_color;
            varying vec3 v_color;
            uniform mat4 u_matrix;

            void main() {
                gl_Position = u_matrix * vec4(a_position, 1.0);
                v_color = a_color;
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            varying vec3 v_color;

            void main() {
                gl_FragColor = vec4(v_color, 1.0);
            }
        `;

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

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

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

        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
        const colorAttributeLocation = gl.getAttribLocation(program, 'a_color');
        const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');

        // House vertices and colors
        const vertices = new Float32Array([
            // Main House (walls)
            -0.5, -0.5, 0.0,    0.7, 0.5, 0.3,
             0.5, -0.5, 0.0,    0.7, 0.5, 0.3,
             0.5,  0.5, 0.0,    0.7, 0.5, 0.3,
            -0.5,  0.5, 0.0,    0.7, 0.5, 0.3,

            // Roof
            0.0,  0.8, 0.0,    0.6, 0.3, 0.1,
            -0.7, 0.5, 0.0,    0.6, 0.3, 0.1,
             0.7, 0.5, 0.0,    0.6, 0.3, 0.1,

            // Chimney
            0.3, 0.6, 0.0,     0.5, 0.5, 0.5,
            0.4, 0.6, 0.0,     0.5, 0.5, 0.5,
            0.4, 0.8, 0.0,     0.5, 0.5, 0.5,
            0.3, 0.8, 0.0,     0.5, 0.5, 0.5,
        ]);

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

        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.clearColor(0.8, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(program);

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 6 * 4, 0);

        gl.enableVertexAttribArray(colorAttributeLocation);
        gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 6 * 4, 3 * 4);

        const aspectRatio = canvas.width / canvas.height;
        const matrix = [
            1/aspectRatio, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ];

        gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);

        // Draw House walls
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

        // Draw Roof
        gl.drawArrays(gl.TRIANGLES, 4, 3);

        // Draw Chimney
        gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
    </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 simple drawing of a house. It has a brown rectangular base and a darker brown triangular roof. There is also a small gray rectangle on the roof, which resembles 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 shows a simple drawing of a house. It has a brown rectangular base and a darker brown triangular roof. There is also a small gray rectangle on the roof, which resembles 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