diff --git a/shapeGenerator.js b/shapeGenerator.js new file mode 100644 index 0000000..377a936 --- /dev/null +++ b/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();