GlenDC/triangles.html

## triangles.html
<!DOCTYPE html>
<html>

<!-- Generated mostly with ChatGPT, with the help of GitHub Co-Pilot to correct some bits fast -->

<head>
    <meta charset="UTF-8">
    <title>My page</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>

    <script>
        window.addEventListener('load', function () {
            // vertex shader source code
            const vertexShaderSource = `
  attribute vec3 aPosition;
  attribute vec2 aSize;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;

  void main() {
    vec4 position = vec4(aPosition, 1.0);
    gl_Position = uProjectionMatrix * uModelViewMatrix * position;

    gl_PointSize = aSize.x;
  }
`;

            // fragment shader source code
            const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

            // create a WebGL context
            const canvas = document.createElement("canvas");
            // get webgl context
            const gl = canvas.getContext("webgl");

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

                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                    throw new Error(gl.getShaderInfoLog(shader));
                }

                return shader;
            }

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

                if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                    throw new Error(gl.getProgramInfoLog(program));
                }

                return program;
            }


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

            // create a program and link shaders
            const program = createProgram(gl, vertexShader, fragmentShader);

            // look up attribute and uniform locations
            const positionLocation = gl.getAttribLocation(program, "aPosition");
            const sizeLocation = gl.getAttribLocation(program, "aSize");
            const modelViewMatrixLocation = gl.getUniformLocation(program, "uModelViewMatrix");
            const projectionMatrixLocation = gl.getUniformLocation(program, "uProjectionMatrix");

            const trianglePositions = [
                0, 0, 0,
                0, 0.5, 0,
                0.7, 0, 0,
            ];

            const triangleSizes = [
                10, 10,
                20, 20,
                30, 60,
            ];

            // provide data for attributes
            const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(trianglePositions), gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionLocation);
            gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

            const sizeBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleSizes), gl.STATIC_DRAW);
            gl.enableVertexAttribArray(sizeLocation);
            gl.vertexAttribPointer(sizeLocation, 2, gl.FLOAT, false, 0, 0);

            // set up model-view and projection matrices
            const modelViewMatrix = mat4.create();
            const projectionMatrix = mat4.create();

            mat4.lookAt(modelViewMatrix, [0, 0, 1], [0, 0, 0], [0, 1, 0]);
            mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 100);

            gl.useProgram(program);
            gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
            gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

            // draw the triangles
            gl.drawArrays(gl.TRIANGLES, 0, 3);

            // add canvas to the dom
            document.body.appendChild(canvas);
        });
    </script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<!-- Generated mostly with ChatGPT, with the help of GitHub Co-Pilot to correct some bits fast -->

	<head>
	<meta charset="UTF-8">
	<title>My page</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>

	<script>
	window.addEventListener('load', function () {
	// vertex shader source code
	const vertexShaderSource = `
	attribute vec3 aPosition;
	attribute vec2 aSize;
	uniform mat4 uModelViewMatrix;
	uniform mat4 uProjectionMatrix;

	void main() {
	vec4 position = vec4(aPosition, 1.0);
	gl_Position = uProjectionMatrix * uModelViewMatrix * position;

	gl_PointSize = aSize.x;
	}
	`;

	// fragment shader source code
	const fragmentShaderSource = `
	void main() {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	}
	`;

	// create a WebGL context
	const canvas = document.createElement("canvas");
	// get webgl context
	const gl = canvas.getContext("webgl");

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

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	throw new Error(gl.getShaderInfoLog(shader));
	}

	return shader;
	}

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

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	throw new Error(gl.getProgramInfoLog(program));
	}

	return program;
	}


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

	// create a program and link shaders
	const program = createProgram(gl, vertexShader, fragmentShader);

	// look up attribute and uniform locations
	const positionLocation = gl.getAttribLocation(program, "aPosition");
	const sizeLocation = gl.getAttribLocation(program, "aSize");
	const modelViewMatrixLocation = gl.getUniformLocation(program, "uModelViewMatrix");
	const projectionMatrixLocation = gl.getUniformLocation(program, "uProjectionMatrix");

	const trianglePositions = [
	0, 0, 0,
	0, 0.5, 0,
	0.7, 0, 0,
	];

	const triangleSizes = [
	10, 10,
	20, 20,
	30, 60,
	];

	// provide data for attributes
	const positionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(trianglePositions), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(positionLocation);
	gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

	const sizeBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleSizes), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(sizeLocation);
	gl.vertexAttribPointer(sizeLocation, 2, gl.FLOAT, false, 0, 0);

	// set up model-view and projection matrices
	const modelViewMatrix = mat4.create();
	const projectionMatrix = mat4.create();

	mat4.lookAt(modelViewMatrix, [0, 0, 1], [0, 0, 0], [0, 1, 0]);
	mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 100);

	gl.useProgram(program);
	gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
	gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

	// draw the triangles
	gl.drawArrays(gl.TRIANGLES, 0, 3);

	// add canvas to the dom
	document.body.appendChild(canvas);
	});
	</script>
	</head>

	<body>
	<h1>Hello World!</h1>
	</body>

	</html>