// vertices.push(Math.random() * 2 - 1) // x
// vertices.push(Math.random() * 2 - 1) // y
// vertices.push(0) // z (not used for 2D)
// }
// // Prepare the geometry and material
// const geometry = new THREE.BufferGeometry()
// geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
// const material = new THREE.PointsMaterial({ size: sizeOfPoints, color: pointColor })
// // Optional custom shader to clip square into circle
// // const material = new THREE.ShaderMaterial({
// // uniforms: {
// // pointSize: { value: sizeOfPoints },
// // color: { value: new THREE.Color(pointColor) },
// // },
// // vertexShader: `
// // uniform float pointSize;
// // void main() {
// // gl_PointSize = pointSize;
// // gl_Position = vec4(position, 1.0);
// // }
// // `,
// // fragmentShader: `
// // uniform vec3 color;
// // void main() {
// // vec2 coord = gl_PointCoord - vec2(0.5);
// // if (length(coord) > 0.5) {
// // discard;
// // }
// // gl_FragColor = vec4(color, 1.0);
// // }
// // `
// // })
// const points = new THREE.Points(geometry, material)
// scene.add(points)
// renderer.render(scene, camera)
// </script>
// </body>
// </html>
// <!--
// Notes:
// - Coordinates are (0, 0) at the center of the canvas and are normalized between -1 and 1 top and bottom, left to right
// -->