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, with the canvas 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
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>
<head>
    <title>WebGL House</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            attribute vec4 aColor;
            varying vec4 vColor;
            void main() {
                gl_Position = aPosition;
                vColor = aColor;
            }
        `;

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

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

        function initWebGL() {
            const canvas = document.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (!gl) {
                alert("WebGL not supported");
                return;
            }

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

            // Create and compile shaders
            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

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

            // Define vertices for the house (including chimney)
            const vertices = new Float32Array([
                // House main body (rectangle)
                -0.5, -0.5,    // Bottom left
                0.5, -0.5,     // Bottom right
                0.5, 0.2,      // Top right
                -0.5, 0.2,     // Top left

                // Roof (triangle)
                -0.6, 0.2,     // Left
                0.0, 0.7,      // Top
                0.6, 0.2,      // Right

                // Chimney (rectangle)
                0.2, 0.3,      // Bottom left
                0.3, 0.3,      // Bottom right
                0.3, 0.6,      // Top right
                0.2, 0.6       // Top left
            ]);

            // Define colors
            const colors = new Float32Array([
                // House main body (brown)
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 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
            ]);

            // Create and bind vertex buffer
            const vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            const aPosition = gl.getAttribLocation(program, 'aPosition');
            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPosition);

            // Create and bind color buffer
            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

            const aColor = gl.getAttribLocation(program, 'aColor');
            gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aColor);

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);  // Light blue background
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house main body
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

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

            // Draw chimney
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        window.onload = initWebGL;
    </script>
</body>
</html>
This code creates a simple 2D house with: 1. A brown rectangular main body 2. A red triangular roof 3. A gray rectangular chimney 4. A light blue background The canvas will automatically resize to fill the entire browser window, and the house will maintain its proportions. The house is drawn using basic geometric shapes (triangles and rectangles) with different colors for each component. Key features: - Responsive canvas that fills the entire window - Simple vertex and fragment shaders - Separate color definitions for different parts of the house - Clean separation of geometry and color data - Proper WebGL initialization and rendering pipeline To use this, simply save it as an HTML file and open it in a WebGL-supported browser. The house will be displayed centered in the 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
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>
<head>
    <title>WebGL House</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            attribute vec4 aColor;
            varying vec4 vColor;
            void main() {
                gl_Position = aPosition;
                vColor = aColor;
            }
        `;

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

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

        function initWebGL() {
            const canvas = document.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (!gl) {
                alert("WebGL not supported");
                return;
            }

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

            // Create and compile shaders
            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

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

            // Define vertices for the house (including chimney)
            const vertices = new Float32Array([
                // House main body (rectangle)
                -0.5, -0.5,    // Bottom left
                0.5, -0.5,     // Bottom right
                0.5, 0.2,      // Top right
                -0.5, 0.2,     // Top left

                // Roof (triangle)
                -0.6, 0.2,     // Left
                0.0, 0.7,      // Top
                0.6, 0.2,      // Right

                // Chimney (rectangle)
                0.2, 0.3,      // Bottom left
                0.3, 0.3,      // Bottom right
                0.3, 0.6,      // Top right
                0.2, 0.6       // Top left
            ]);

            // Define colors
            const colors = new Float32Array([
                // House main body (brown)
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 1.0,
                0.6, 0.4, 0.2, 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
            ]);

            // Create and bind vertex buffer
            const vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            const aPosition = gl.getAttribLocation(program, 'aPosition');
            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPosition);

            // Create and bind color buffer
            const colorBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

            const aColor = gl.getAttribLocation(program, 'aColor');
            gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aColor);

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);  // Light blue background
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house main body
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

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

            // Draw chimney
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        window.onload = initWebGL;
    </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 red triangular roof. There is also a gray rectangle on the roof, which resembles a chimney. The background is a light grayish-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 red triangular roof. There is also a gray rectangle on the roof, which resembles a chimney. The background is a light grayish-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 simple HTML file that uses WebGL to draw a basic house with a chimney, making the canvas fill 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
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House with Chimney</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 position;
            void main() {
                gl_Position = position;
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 color;
            void main() {
                gl_FragColor = 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.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (!gl) {
                alert("WebGL not supported");
                return;
            }

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

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

            // House body vertices
            const houseVertices = new Float32Array([
                // House body (rectangle)
                -0.3, -0.3,
                0.3, -0.3,
                0.3, 0.2,
                -0.3, 0.2,
                // Roof (triangle)
                -0.4, 0.2,
                0.4, 0.2,
                0.0, 0.6,
                // Chimney (rectangle)
                0.1, 0.3,
                0.2, 0.3,
                0.2, 0.5,
                0.1, 0.5
            ]);

            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, houseVertices, gl.STATIC_DRAW);

            const positionAttributeLocation = gl.getAttribLocation(program, "position");
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

            const colorLocation = gl.getUniformLocation(program, "color");

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house body
            gl.uniform4fv(colorLocation, [0.8, 0.6, 0.4, 1.0]);
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.uniform4fv(colorLocation, [0.7, 0.3, 0.3, 1.0]);
            gl.drawArrays(gl.TRIANGLES, 4, 3);

            // Draw chimney
            gl.uniform4fv(colorLocation, [0.6, 0.4, 0.4, 1.0]);
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        // Handle window resize
        window.addEventListener('resize', function() {
            const canvas = document.querySelector("#glCanvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            const gl = canvas.getContext("webgl");
            gl.viewport(0, 0, canvas.width, canvas.height);
            main();
        });

        main();
    </script>
</body>
</html>
This code creates: 1. A full-page canvas using CSS 2. A simple house shape with: - A rectangular body (brown) - A triangular roof (red) - A rectangular chimney (dark brown) 3. Responsive design that adjusts to window resizing The house is drawn using basic WebGL primitives: - The house body and chimney use `TRIANGLE_FAN` - The roof uses `TRIANGLES` The colors are set using uniform variables in the fragment shader. To see the result, save this code as an HTML file and open it in a web browser. You should see a simple 2D house with a chimney drawn in the center of the screen with a light blue 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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House with Chimney</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 position;
            void main() {
                gl_Position = position;
            }
        `;

        const fragmentShaderSource = `
            precision mediump float;
            uniform vec4 color;
            void main() {
                gl_FragColor = 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.querySelector("#glCanvas");
            const gl = canvas.getContext("webgl");

            if (!gl) {
                alert("WebGL not supported");
                return;
            }

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

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

            // House body vertices
            const houseVertices = new Float32Array([
                // House body (rectangle)
                -0.3, -0.3,
                0.3, -0.3,
                0.3, 0.2,
                -0.3, 0.2,
                // Roof (triangle)
                -0.4, 0.2,
                0.4, 0.2,
                0.0, 0.6,
                // Chimney (rectangle)
                0.1, 0.3,
                0.2, 0.3,
                0.2, 0.5,
                0.1, 0.5
            ]);

            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, houseVertices, gl.STATIC_DRAW);

            const positionAttributeLocation = gl.getAttribLocation(program, "position");
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

            const colorLocation = gl.getUniformLocation(program, "color");

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house body
            gl.uniform4fv(colorLocation, [0.8, 0.6, 0.4, 1.0]);
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.uniform4fv(colorLocation, [0.7, 0.3, 0.3, 1.0]);
            gl.drawArrays(gl.TRIANGLES, 4, 3);

            // Draw chimney
            gl.uniform4fv(colorLocation, [0.6, 0.4, 0.4, 1.0]);
            gl.drawArrays(gl.TRIANGLE_FAN, 7, 4);
        }

        // Handle window resize
        window.addEventListener('resize', function() {
            const canvas = document.querySelector("#glCanvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            const gl = canvas.getContext("webgl");
            gl.viewport(0, 0, canvas.width, canvas.height);
            main();
        });

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

Check if all of the following conditions are true:

HTML Render

Rendering the webpage gives the following image:

LLM Generation

Query

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

Output

The image shows a simple drawing of a house. It has a brown square base representing the walls and a red triangular roof. There is also a small rectangular chimney on the roof. The background is a light gray color.

LLM Generation

Query

Does this answer say that there is a picture of a house with a chimney "The image shows a simple drawing of a house. It has a brown square base representing the walls and a red triangular roof. There is also a small rectangular chimney on the roof. The background is a light gray color."? Answer "Yes it does" or "No it does not".

Output

Yes it does.

Substring Evaluation

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

Check this condition is not true:

Substring Evaluation

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

Final Answer: True

Final Answer: True

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 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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House with Chimney</title>
    <style>
        * { margin: 0; padding: 0; }
        canvas { width: 100vw; height: 100vh; display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

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

        function initShaderProgram(gl, vsSource, fsSource) {
            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);

            return program;
        }

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

            if (!gl) {
                alert('WebGL not available');
                return;
            }

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

            // Create shader program
            const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
            gl.useProgram(shaderProgram);

            // House walls vertices
            const houseVertices = new Float32Array([
                -0.5, -0.5,  // bottom left
                 0.5, -0.5,  // bottom right
                 0.5,  0.2,  // top right
                -0.5,  0.2,  // top left
            ]);

            // Roof vertices
            const roofVertices = new Float32Array([
                -0.6,  0.2,  // bottom left
                 0.6,  0.2,  // bottom right
                 0.0,  0.7,  // top
            ]);

            // Chimney vertices
            const chimneyVertices = new Float32Array([
                 0.2,  0.3,  // bottom left
                 0.3,  0.3,  // bottom right
                 0.3,  0.6,  // top right
                 0.2,  0.6,  // top left
            ]);

            // Create and bind buffer
            const positionBuffer = gl.createBuffer();
            const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aPosition');
            const colorUniformLocation = gl.getUniformLocation(shaderProgram, 'uColor');

            gl.enable(gl.DEPTH_TEST);
            gl.clearColor(0.8, 0.8, 1.0, 1.0);  // Light blue background
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            // Draw house walls
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, houseVertices, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.7, 0.6, 1.0]);  // Beige color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, roofVertices, gl.STATIC_DRAW);
            gl.uniform4fv(colorUniformLocation, [0.7, 0.3, 0.2, 1.0]);  // Red-brown color
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            // Draw chimney
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, chimneyVertices, gl.STATIC_DRAW);
            gl.uniform4fv(colorUniformLocation, [0.5, 0.5, 0.5, 1.0]);  // Gray color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
        }

        window.onload = main;
    </script>
</body>
</html>
This code creates: 1. A full-page canvas using CSS 2. A WebGL context 3. Simple vertex and fragment shaders 4. Draws three parts of the house: - The main house body (walls) in beige - A triangular roof in red-brown - A rectangular chimney in gray The house is drawn using simple 2D coordinates in WebGL's coordinate system (-1 to 1). The background is set to light blue to represent the sky. Features: - Responsive canvas that fills the entire window - Automatically resizes when the window is resized - Simple color shading - Depth testing enabled (though not really needed for this 2D drawing) To use this, just save it as an HTML file and open it in a modern web browser. You should see a simple house drawing centered on a light blue 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
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House with Chimney</title>
    <style>
        * { margin: 0; padding: 0; }
        canvas { width: 100vw; height: 100vh; display: block; }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

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

        function initShaderProgram(gl, vsSource, fsSource) {
            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);

            return program;
        }

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

            if (!gl) {
                alert('WebGL not available');
                return;
            }

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

            // Create shader program
            const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
            gl.useProgram(shaderProgram);

            // House walls vertices
            const houseVertices = new Float32Array([
                -0.5, -0.5,  // bottom left
                 0.5, -0.5,  // bottom right
                 0.5,  0.2,  // top right
                -0.5,  0.2,  // top left
            ]);

            // Roof vertices
            const roofVertices = new Float32Array([
                -0.6,  0.2,  // bottom left
                 0.6,  0.2,  // bottom right
                 0.0,  0.7,  // top
            ]);

            // Chimney vertices
            const chimneyVertices = new Float32Array([
                 0.2,  0.3,  // bottom left
                 0.3,  0.3,  // bottom right
                 0.3,  0.6,  // top right
                 0.2,  0.6,  // top left
            ]);

            // Create and bind buffer
            const positionBuffer = gl.createBuffer();
            const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aPosition');
            const colorUniformLocation = gl.getUniformLocation(shaderProgram, 'uColor');

            gl.enable(gl.DEPTH_TEST);
            gl.clearColor(0.8, 0.8, 1.0, 1.0);  // Light blue background
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            // Draw house walls
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, houseVertices, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.7, 0.6, 1.0]);  // Beige color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, roofVertices, gl.STATIC_DRAW);
            gl.uniform4fv(colorUniformLocation, [0.7, 0.3, 0.2, 1.0]);  // Red-brown color
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            // Draw chimney
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, chimneyVertices, gl.STATIC_DRAW);
            gl.uniform4fv(colorUniformLocation, [0.5, 0.5, 0.5, 1.0]);  // Gray color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 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. It has a brown triangular roof and a beige rectangular body. There is also a small gray rectangle on the roof, which resembles a chimney. The background is a light purple 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. It has a brown triangular roof and a beige rectangular body. There is also a small gray rectangle on the roof, which resembles a chimney. The background is a light purple 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 that draws a simple house with a chimney using WebGL. The canvas will take up the full page: 

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

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

        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('WebGL not supported');
                return;
            }

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

            // Create shaders and program
            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);
            gl.useProgram(program);

            // Get attribute and uniform locations
            const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
            const colorUniformLocation = gl.getUniformLocation(program, 'uColor');

            // Create buffer for house walls
            const wallsBuffer = gl.createBuffer();
            const wallsVertices = new Float32Array([
                // House main body (rectangle)
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.2,
                -0.5, 0.2,
            ]);

            // Create buffer for roof
            const roofBuffer = gl.createBuffer();
            const roofVertices = new Float32Array([
                // Roof (triangle)
                -0.6, 0.2,
                0.6, 0.2,
                0.0, 0.7,
            ]);

            // Create buffer for chimney
            const chimneyBuffer = gl.createBuffer();
            const chimneyVertices = new Float32Array([
                // Chimney (rectangle)
                0.2, 0.3,
                0.3, 0.3,
                0.3, 0.6,
                0.2, 0.6,
            ]);

            // Clear canvas
            gl.clearColor(0.8, 0.8, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house walls
            gl.bindBuffer(gl.ARRAY_BUFFER, wallsBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, wallsVertices, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.8, 0.7, 1]); // Beige color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.bindBuffer(gl.ARRAY_BUFFER, roofBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, roofVertices, gl.STATIC_DRAW);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.3, 0.3, 1]); // Red color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);

            // Draw chimney
            gl.bindBuffer(gl.ARRAY_BUFFER, chimneyBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, chimneyVertices, gl.STATIC_DRAW);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.6, 0.3, 0.3, 1]); // Dark red color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
        }

        window.onload = main;
    </script>
</body>
</html>
This code creates a simple 2D house with: 1. A rectangular main body (beige color) 2. A triangular roof (red color) 3. A rectangular chimney (dark red color) 4. A light blue background The canvas automatically resizes to fill the entire window, and the house maintains its proportions. The house is drawn using basic WebGL primitives (triangles and triangle fans). To use this, simply save it as an HTML file and open it in a web browser that supports WebGL (most modern browsers do). The house will be displayed centered on a full-screen canvas.

Extract Code

I extracted the following code from that output: 

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

    <script>
        const vertexShaderSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

        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('WebGL not supported');
                return;
            }

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

            // Create shaders and program
            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
            const program = createProgram(gl, vertexShader, fragmentShader);
            gl.useProgram(program);

            // Get attribute and uniform locations
            const positionAttributeLocation = gl.getAttribLocation(program, 'aPosition');
            const colorUniformLocation = gl.getUniformLocation(program, 'uColor');

            // Create buffer for house walls
            const wallsBuffer = gl.createBuffer();
            const wallsVertices = new Float32Array([
                // House main body (rectangle)
                -0.5, -0.5,
                0.5, -0.5,
                0.5, 0.2,
                -0.5, 0.2,
            ]);

            // Create buffer for roof
            const roofBuffer = gl.createBuffer();
            const roofVertices = new Float32Array([
                // Roof (triangle)
                -0.6, 0.2,
                0.6, 0.2,
                0.0, 0.7,
            ]);

            // Create buffer for chimney
            const chimneyBuffer = gl.createBuffer();
            const chimneyVertices = new Float32Array([
                // Chimney (rectangle)
                0.2, 0.3,
                0.3, 0.3,
                0.3, 0.6,
                0.2, 0.6,
            ]);

            // Clear canvas
            gl.clearColor(0.8, 0.8, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house walls
            gl.bindBuffer(gl.ARRAY_BUFFER, wallsBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, wallsVertices, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.8, 0.7, 1]); // Beige color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

            // Draw roof
            gl.bindBuffer(gl.ARRAY_BUFFER, roofBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, roofVertices, gl.STATIC_DRAW);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.8, 0.3, 0.3, 1]); // Red color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 3);

            // Draw chimney
            gl.bindBuffer(gl.ARRAY_BUFFER, chimneyBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, chimneyVertices, gl.STATIC_DRAW);
            gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
            gl.uniform4fv(colorUniformLocation, [0.6, 0.3, 0.3, 1]); // Dark red color
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 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 shows a simple drawing of a house. It has a red triangular roof with a small rectangular chimney on the right side. The main body of the house is a light gray rectangle. The background is a light purple 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 red triangular roof with a small rectangular chimney on the right side. The main body of the house is a light gray rectangle. The background is a light purple 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 that draws a simple house with a chimney using WebGL. The canvas will take up the full page: 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
    <title>WebGL House</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="glCanvas"></canvas>

    <script>
        const vsSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

        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 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');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                console.error('Unable to initialize WebGL');
                return;
            }

            // Set canvas size to 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();

            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    position: gl.getAttribLocation(shaderProgram, 'aPosition'),
                },
                uniformLocations: {
                    color: gl.getUniformLocation(shaderProgram, 'uColor'),
                }
            };

            // House body vertices
            const houseVertices = [
                -0.5, -0.5,  // bottom left
                0.5, -0.5,   // bottom right
                0.5, 0.2,    // top right
                -0.5, 0.2,   // top left
            ];

            // Roof vertices
            const roofVertices = [
                -0.5, 0.2,   // bottom left
                0.5, 0.2,    // bottom right
                0.0, 0.7,    // top
            ];

            // Chimney vertices
            const chimneyVertices = [
                0.2, 0.3,    // bottom left
                0.3, 0.3,    // bottom right
                0.3, 0.8,    // top right
                0.2, 0.8,    // top left
            ];

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

                gl.useProgram(programInfo.program);
                gl.vertexAttribPointer(programInfo.attribLocations.position, 2, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(programInfo.attribLocations.position);
                gl.uniform4fv(programInfo.uniformLocations.color, color);

                if (vertices.length === 6) { // Triangle (roof)
                    gl.drawArrays(gl.TRIANGLES, 0, 3);
                } else { // Rectangle (house body and chimney)
                    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
                }
            }

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house components
            drawShape(houseVertices, [0.8, 0.6, 0.4, 1.0]); // House body (brown)
            drawShape(roofVertices, [0.8, 0.2, 0.2, 1.0]);  // Roof (red)
            drawShape(chimneyVertices, [0.5, 0.5, 0.5, 1.0]); // Chimney (gray)
        }

        window.onload = main;
    </script>
</body>
</html>
This code creates a simple 2D house with a chimney using WebGL. The house consists of: 1. A rectangular body (brown) 2. A triangular roof (red) 3. A rectangular chimney (gray) The canvas will automatically resize to fill the entire browser window, and the house will maintain its proportions. The background is set to a light blue color. Features: - Full-screen canvas - Responsive design (resizes with window) - Basic shapes using WebGL - Different colors for different parts of the house - Clean and simple implementation To use this, simply save it as an HTML file and open it in a web browser that supports WebGL (most modern browsers do).

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

    <script>
        const vsSource = `
            attribute vec4 aPosition;
            void main() {
                gl_Position = aPosition;
            }
        `;

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

        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 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');
            const gl = canvas.getContext('webgl');

            if (!gl) {
                console.error('Unable to initialize WebGL');
                return;
            }

            // Set canvas size to 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();

            const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
            const programInfo = {
                program: shaderProgram,
                attribLocations: {
                    position: gl.getAttribLocation(shaderProgram, 'aPosition'),
                },
                uniformLocations: {
                    color: gl.getUniformLocation(shaderProgram, 'uColor'),
                }
            };

            // House body vertices
            const houseVertices = [
                -0.5, -0.5,  // bottom left
                0.5, -0.5,   // bottom right
                0.5, 0.2,    // top right
                -0.5, 0.2,   // top left
            ];

            // Roof vertices
            const roofVertices = [
                -0.5, 0.2,   // bottom left
                0.5, 0.2,    // bottom right
                0.0, 0.7,    // top
            ];

            // Chimney vertices
            const chimneyVertices = [
                0.2, 0.3,    // bottom left
                0.3, 0.3,    // bottom right
                0.3, 0.8,    // top right
                0.2, 0.8,    // top left
            ];

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

                gl.useProgram(programInfo.program);
                gl.vertexAttribPointer(programInfo.attribLocations.position, 2, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(programInfo.attribLocations.position);
                gl.uniform4fv(programInfo.uniformLocations.color, color);

                if (vertices.length === 6) { // Triangle (roof)
                    gl.drawArrays(gl.TRIANGLES, 0, 3);
                } else { // Rectangle (house body and chimney)
                    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
                }
            }

            // Clear canvas
            gl.clearColor(0.9, 0.9, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Draw house components
            drawShape(houseVertices, [0.8, 0.6, 0.4, 1.0]); // House body (brown)
            drawShape(roofVertices, [0.8, 0.2, 0.2, 1.0]);  // Roof (red)
            drawShape(chimneyVertices, [0.5, 0.5, 0.5, 1.0]); // Chimney (gray)
        }

        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 house-like shape. It consists of a brown rectangle as the base, topped with a red triangle representing the roof. There is also a gray rectangle on the right side of the roof, resembling a chimney. The background is a light grayish-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 shape. It consists of a brown rectangle as the base, topped with a red triangle representing the roof. There is also a gray rectangle on the right side of the roof, resembling a chimney. The background is a light grayish-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