Draw Random Confetti Points

This JavaScript program demonstrates how to draw a set of random pints of various sizes and colors in WebGL.

DrawPoints.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>XoaX.net's WebGL</title>
		<style>
			#idCanvas {
				border: 1px solid black;
				width: 800px;
				height: 600px
			}
		</style>
		<script  id="idVertexShader" type="c">
			attribute vec4 av4Position;
			uniform float ufPointSize;

			void main() {
				gl_Position = av4Position;
				gl_PointSize = ufPointSize;
			}
		</script>
		<script  id="idFragmantShader" type="c">
			precision mediump float;

			uniform vec4 uv4Color;

			void main() {
				gl_FragColor = uv4Color;
			}
		</script>
		<script type="text/javascript" src="DrawPoints.js"></script>
  </head>
  <body onload="Render()">
    <canvas id="idCanvas"></canvas>
  </body>
</html>

DrawPoints.js

function CreateProgram(kqGL) {

	// Compile the vertex shader
	const ksVertexShaderCode = document.getElementById("idVertexShader").innerHTML;
	let qVertexShader = kqGL.createShader(kqGL.VERTEX_SHADER);
	kqGL.shaderSource(qVertexShader, ksVertexShaderCode);
	kqGL.compileShader(qVertexShader);

	// Compile the fragment shader
	const ksFragmentShaderCode = document.getElementById("idFragmantShader").innerHTML;
	let qFragmentShader = kqGL.createShader(kqGL.FRAGMENT_SHADER);
	kqGL.shaderSource(qFragmentShader, ksFragmentShaderCode);
	kqGL.compileShader(qFragmentShader);

	// Compile and link the program
	let qProgram = kqGL.createProgram();
	kqGL.attachShader(qProgram, qVertexShader);
	kqGL.attachShader(qProgram, qFragmentShader);
	kqGL.linkProgram(qProgram);

	if (!kqGL.getProgramParameter(qProgram, kqGL.LINK_STATUS)) {
		alert('The program failed to initialize', kqGL.getProgramInfoLog(qProgram));
	}

	return qProgram;
}

function Render() {

	const qCanvas = document.getElementById("idCanvas");
	qCanvas.width = qCanvas.clientWidth;
	qCanvas.height = qCanvas.clientHeight;
	const kqGL = qCanvas.getContext("webgl");
	
	let qProgram = CreateProgram(kqGL);

	const kfa4Position = kqGL.getAttribLocation(qProgram, 'av4Position');
	const kia4Color = kqGL.getUniformLocation(qProgram, 'uv4Color');
	const kfPointSize = kqGL.getUniformLocation(qProgram, 'ufPointSize');

	kqGL.useProgram(qProgram);

	const kiPointCount = 50;
	for (let i = 0; i < kiPointCount; ++i) {
		kqGL.vertexAttrib2f(kfa4Position, 1.9*Math.random() - .95, 1.9*Math.random() - .95);
		kqGL.uniform4f(kia4Color, Math.random(), Math.random(), Math.random(), 1);
		kqGL.uniform1f(kfPointSize, 25.0*Math.random());
		const kiCount = 1;
		const kiOffset = 0;
		kqGL.drawArrays(kqGL.POINTS, kiOffset, kiCount);
	}
}

WebGL JavaScript

Draw Random Confetti Points

DrawPoints.html

DrawPoints.js

Output