Initial Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Here's an HTML file that draws a triangle using WebGL and makes the canvas 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL context
const gl = canvas.getContext('webgl');
// Set the canvas size to match the window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Set the viewport to cover the entire canvas
gl.viewport(0, 0, canvas.width, canvas.height);
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
// Create a buffer for the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
In this HTML file:
1. The `<style>` section sets the margin and padding of the `body` and `html` elements to 0 and hides any overflow. It also sets the `width` and `height` of the `canvas` element to 100% to make it take up the full page.
2. The `<canvas>` element is used to render the WebGL graphics.
3. In the `<script>` section:
- We get the canvas element and the WebGL context.
- We set the canvas size to match the window size using `window.innerWidth` and `window.innerHeight`.
- We set the viewport to cover the entire canvas using `gl.viewport()`.
- We define the vertex shader and fragment shader source code.
- We create the vertex shader and fragment shader, compile them, and create the shader program.
- We set up the triangle vertices and create a buffer for them.
- We get the attribute location for the vertex position and enable it.
- We clear the canvas with a black color using `gl.clearColor()` and `gl.clear()`.
- Finally, we draw the triangle using `gl.drawArrays()`.
When you open this HTML file in a web browser, it will display a red triangle that takes up the full page.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL context
const gl = canvas.getContext('webgl');
// Set the canvas size to match the window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Set the viewport to cover the entire canvas
gl.viewport(0, 0, canvas.width, canvas.height);
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
// Create a buffer for the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drwe what I wanted. Describe what is drawn in this image?
Output
The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle."? 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 triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Here's an HTML file that draws a triangle using WebGL and makes the canvas 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL context
const gl = canvas.getContext('webgl');
// Set the canvas size to match the window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Set the viewport to cover the entire canvas
gl.viewport(0, 0, canvas.width, canvas.height);
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer for the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
In this HTML file:
1. The `<style>` section sets the margin and padding of the `body` and `html` elements to 0 and hides any overflow. It also sets the `width` and `height` of the `canvas` element to 100% to make it take up the full page.
2. The `<canvas>` element is used to hold the WebGL rendering context.
3. In the `<script>` section:
- We get the canvas element and the WebGL context.
- We set the canvas size to match the window size using `window.innerWidth` and `window.innerHeight`.
- We set the viewport to cover the entire canvas using `gl.viewport()`.
- We define the vertex shader and fragment shader source code.
- We create the vertex shader and fragment shader, compile them, and create a shader program.
- We set up the triangle vertices and create a buffer to hold them.
- We get the attribute location for the vertex position and enable it.
- We clear the canvas with a black color using `gl.clearColor()` and `gl.clear()`.
- Finally, we draw the triangle using `gl.drawArrays()`.
When you open this HTML file in a web browser, you should see a red triangle that fills the entire page. The canvas will automatically resize to match the window size.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL context
const gl = canvas.getContext('webgl');
// Set the canvas size to match the window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Set the viewport to cover the entire canvas
gl.viewport(0, 0, canvas.width, canvas.height);
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer for the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drwe what I wanted. Describe what is drawn in this image?
Output
The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle."? 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 triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Here's an HTML file that draws a triangle using WebGL and makes the canvas 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create shader program
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Set up triangle vertices
const vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
// Create buffer and bind triangle vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Set up attribute pointer
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);
// Resize canvas to match 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();
// Draw the triangle
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
In this HTML file:
1. The `<style>` section sets the body and html margins and padding to 0 and hides any overflow. It also sets the canvas width and height to 100% to make it take up the full page.
2. The `<canvas>` element is created with an ID of "glCanvas".
3. In the `<script>` section:
- The WebGL context is obtained from the canvas element.
- Vertex shader and fragment shader source code are defined as strings.
- Shader programs are created, compiled, and linked.
- Triangle vertices are defined as a Float32Array and bound to a buffer.
- The attribute pointer is set up to associate the vertex data with the shader attribute.
- A `resizeCanvas` function is defined to resize the canvas to match the window size whenever the window is resized.
- The triangle is drawn by clearing the canvas and calling `gl.drawArrays`.
When you open this HTML file in a web browser, you should see a red triangle taking up the full page. The triangle will resize automatically when the browser window is resized.
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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create shader program
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Set up triangle vertices
const vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]);
// Create buffer and bind triangle vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Set up attribute pointer
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);
// Resize canvas to match 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();
// Draw the triangle
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drwe what I wanted. Describe what is drawn in this image?
Output
The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a solid red triangle centered on a black background. The triangle appears to be equilateral, with all three sides of equal length and all three angles likely to be 60 degrees each, which is characteristic of an equilateral triangle."? 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 triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Here's an HTML file that draws a triangle using WebGL and makes the canvas 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL rendering context
const gl = canvas.getContext('webgl');
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create and compile the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create and compile the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create and link the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer and bind the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
// Enable the attribute and specify the vertex format
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Set the WebGL viewport to match the canvas size
gl.viewport(0, 0, canvas.width, canvas.height);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
This HTML file does the following:
1. It sets up the HTML structure with a canvas element and applies CSS styles to make the canvas take up the full page.
2. It retrieves the WebGL rendering context from the canvas element.
3. It defines the vertex shader and fragment shader source code.
4. It creates and compiles the vertex shader and fragment shader.
5. It creates a shader program, attaches the shaders to it, and links the program.
6. It sets up the triangle vertices in a buffer and binds them to the shader program's attribute location.
7. It sets the WebGL viewport to match the canvas size.
8. It clears the canvas with a black background color.
9. Finally, it draws the triangle using the `drawArrays` function.
When you open this HTML file in a web browser, you will see a red triangle occupying the full page.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById('glCanvas');
// Get the WebGL rendering context
const gl = canvas.getContext('webgl');
// Vertex shader source code
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// Fragment shader source code
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// Create and compile the vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create and compile the fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create and link the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// Use the shader program
gl.useProgram(program);
// Set up the triangle vertices
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer and bind the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
// Enable the attribute and specify the vertex format
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Set the WebGL viewport to match the canvas size
gl.viewport(0, 0, canvas.width, canvas.height);
// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drwe what I wanted. Describe what is drawn in this image?
Output
The image shows a simple red triangle centered against a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple red triangle centered against a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures."? 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 triangle using WebGL in a single HTML file. Make the canvas take the full page.
LLM Generation
Query
Draw an image of a triangle using WebGL in a single HTML file. Make the canvas take the full page.
Output
Here's an HTML file that draws a triangle using WebGL and makes the canvas 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 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById("glCanvas");
// Get the WebGL context
const gl = canvas.getContext("webgl");
// Set the clear color to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// Define the vertices of the triangle
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer to store the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create a vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create a fragment shader
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create a shader program and attach the shaders
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
In this code:
1. The HTML file contains a `<canvas>` element with the ID "glCanvas".
2. The CSS styles make the canvas take up the full page by setting the `width` and `height` to 100% and removing any margins and padding.
3. In the JavaScript code, we get the WebGL context using `canvas.getContext("webgl")`.
4. We set the clear color to black using `gl.clearColor(0.0, 0.0, 0.0, 1.0)` and clear the canvas with `gl.clear(gl.COLOR_BUFFER_BIT)`.
5. We define the vertices of the triangle in the `vertices` array.
6. We create a vertex buffer, bind it, and load the vertex data into the buffer using `gl.createBuffer()`, `gl.bindBuffer()`, and `gl.bufferData()`.
7. We create a vertex shader and a fragment shader using `gl.createShader()`, set their source code using `gl.shaderSource()`, and compile them with `gl.compileShader()`.
8. We create a shader program using `gl.createProgram()`, attach the shaders to the program using `gl.attachShader()`, and link the program with `gl.linkProgram()`.
9. We get the attribute location for the vertex position using `gl.getAttribLocation()`, enable the attribute array with `gl.enableVertexAttribArray()`, and specify the attribute pointer using `gl.vertexAttribPointer()`.
10. Finally, we draw the triangle using `gl.drawArrays()`.
When you open this HTML file in a web browser, it will display a red triangle that takes up the full page.
Extract Code
I extracted the following code from that output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82 | <!DOCTYPE html>
<html>
<head>
<title>WebGL Triangle</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script>
// Get the canvas element
const canvas = document.getElementById("glCanvas");
// Get the WebGL context
const gl = canvas.getContext("webgl");
// Set the clear color to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// Define the vertices of the triangle
const vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// Create a buffer to store the vertices
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create a vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// Create a fragment shader
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// Create a shader program and attach the shaders
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Get the attribute location
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
|
Check if all of the following conditions are true:
HTML Render
Rendering the webpage gives the following image:
LLM Generation
Query
This is a screenshot of a webpage that draws something with webgl. I'm trying to see if it drwe what I wanted. Describe what is drawn in this image?
Output
The image shows a simple red triangle centered against a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures.
LLM Generation
Query
Does this answer say that there is a picture of a triangle "The image shows a simple red triangle centered against a black background. The triangle is pointing upwards and appears to be a solid color with no gradients or textures."? 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