Create shapeGenerator.js

The code, that generates a beautiful 3d models, that are changing, they are random. Also the color is changing for them all the time.

shapeGenerator.js

@@ -0,0 +1,87 @@
+
+let scene = new THREE.Scene();
+let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+let renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+let shape, material;
+
+function generateRandomCoefficients(numCoeffs) {
+    const coeffs = [];
+    for (let i = 0; i < numCoeffs; i++) {
+        coeffs.push(Math.random() * 2 - 1); 
+    }
+    return coeffs;
+}
+
+function calculateRadius(angle1, angle2, coeffs) {
+    let radius = 0;
+    const numCoeffs = coeffs.length;
+    for (let i = 0; i < numCoeffs; i++) {
+        const amplitude = Math.random() * 5 + 1; 
+        radius += amplitude * (coeffs[i] * Math.sin((i + 1) * angle1) * Math.cos((i + 1) * angle2));
+    }
+    return Math.abs(radius) * 10;
+}
+
+function generateShape() {
+    const numPoints = 100;
+    const numCoeffs = Math.floor(Math.random() * 5) + 5; 
+    const coeffs = generateRandomCoefficients(numCoeffs);
+
+    let vertices = [];
+
+    for (let i = 0; i < numPoints; i++) {
+        const theta = (i / numPoints) * Math.PI * 2;
+        for (let j = 0; j < numPoints; j++) {
+            const phi = (j / numPoints) * Math.PI * 2;
+            const radius = calculateRadius(theta, phi, coeffs);
+            const x = Math.sin(theta) * Math.cos(phi) * radius;
+            const y = Math.sin(theta) * Math.sin(phi) * radius;
+            const z = Math.cos(theta) * radius;
+            vertices.push(x, y, z);
+        }
+    }
+
+    const positions = new Float32Array(vertices);
+    const bufferGeometry = new THREE.BufferGeometry();
+    bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+
+    if (shape) {
+        scene.remove(shape);
+    }
+
+
+    const hue = Math.random(); 
+    const hslColor = new THREE.Color();
+    hslColor.setHSL(hue, 1, 0.5);
+
+    material = new THREE.PointsMaterial({ size: 0.1, color: hslColor });
+    shape = new THREE.Points(bufferGeometry, material);
+    scene.add(shape);
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    if (shape) {
+        shape.rotation.x += 0.01;
+        shape.rotation.y += 0.01;
+
+        // Update the color using HSL
+        const hue = (Date.now() % 1000) / 1000; 
+        const hslColor = new THREE.Color();
+        hslColor.setHSL(hue, 1, 0.5); 
+        shape.material.color.set(hslColor);
+    }
+
+    renderer.render(scene, camera);
+}
+
+document.getElementById("randomizeButton").addEventListener("click", generateShape);
+
+camera.position.z = 50;
+
+generateShape();
+animate();