31:T14ca,canvas = { // Define width and height of the canvas based on external `width` and fixed height const canvasWidth = width; const canvasHeight = 600; // Create a 2D rendering context for drawing on the canvas const context = DOM.context2d(canvasWidth, canvasHeight); // Calculate the center point of the canvas const centerX = canvasWidth / 2; const centerY = canvasHeight / 2; // Spread factor for how tightly the spiral arms are wrapped const armSpread = 0.12; // Number of stars to render in the galaxy const numStars = numOfStarts; // Number of spiral arms in the galaxy const numArms = numOfArms; // Controls the curvature of the spiral arms const spiralFactor = spiralFactorVal; let baseRotationSpeed; let maxRotationSpeed; if (animateArt === 0) { // Minimum and maximum rotation speed for stars (adds motion realism) baseRotationSpeed = baseRotationSpeedVal; maxRotationSpeed = maxRotationSpeedVal; } else { baseRotationSpeed = 0.01; maxRotationSpeed = 0.5; } // RGB color range for gradient along the spiral arms const armColorStart = [150, 100, 255]; // bluish-purple const armColorEnd = [255, 180, 220]; // pinkish // Returns an interpolated color based on the distance of a star from the galaxy center. // `normalizedDistance` should be between 0 (center) and 1 (edge). function getArmColor(normalizedDistance) { const inv = 1 - normalizedDistance; // Linearly interpolate each RGB channel between start and end color const r = armColorStart[0] * inv + armColorEnd[0] * normalizedDistance; const g = armColorStart[1] * inv + armColorEnd[1] * normalizedDistance; const b = armColorStart[2] * inv + armColorEnd[2] * normalizedDistance; // Return RGBA color with a fixed alpha (transparency), using bitwise OR to truncate to integers return `rgba(${r | 0},${g | 0},${b | 0},0.7)`; } // Generate all star data ahead of time to avoid recalculating per frame const maxDistance = canvasWidth / 4; // Max distance a star can be from center const stars = new Array(numStars); for (let i = 0; i < numStars; i++) { const arm = i % numArms; // Assign star to a specific spiral arm const normIdx = i / numStars; // Normalized index (0 to 1) for spiral curve // Compute the base angle for the spiral pattern const baseAngle = normIdx * Math.PI * 10 + arm * ((Math.PI * 2) / numArms); // Determine how far out the star is along the spiral arm const distanceFactor = normIdx ** spiralFactor; const distance = distanceFactor * maxDistance; // Adjust spread so inner stars are more tightly packed const spread = Math.max(0, 1 - 2 * distanceFactor); // Offset the angle slightly to simulate spread in the spiral arm const offset = (Math.random() - 0.5) * armSpread * spread; const angle = baseAngle + offset; // Add some radial variation to distance const variation = (Math.random() - 0.5) * 10 * spread; // Compute final screen position of the star const x = centerX + Math.cos(angle) * (distance + variation); const y = centerY + Math.sin(angle) * (distance + variation); // Random brightness, size, and opacity const brightness = Math.random(); const size = Math.random() * 2 + 0.8; const opacity = Math.max(0.2, Math.min(1, 0.4 + brightness * 0.6)); // Use white for very bright stars, else use spiral arm gradient color const color = brightness > 0.8 ? "white" : getArmColor(distanceFactor); // Rotation speed is faster near the center const rotationSpeed = baseRotationSpeed + (1 - distance / maxDistance) * maxRotationSpeed; // Store all star properties in an object stars[i] = { x, y, size, color, angle, distance, opacity, brightness, rotationSpeed }; } // Draw all stars on the canvas in a single render pass function drawGalaxy() { // Clear the entire canvas before redrawing context.clearRect(0, 0, canvasWidth, canvasHeight); context.save(); // Save the current drawing state for (let i = 0; i < numStars; i++) { const d = stars[i]; // Set individual star transparency and glow based on brightness context.globalAlpha = d.opacity; context.shadowBlur = d.brightness * 10 + 5; context.shadowColor = d.color; context.fillStyle = d.color; // Draw the star as a circle context.beginPath(); context.arc(d.x, d.y, d.size, 0, Math.PI * 2); context.fill(); } context.restore(); // Restore original context settings context.globalAlpha = 1; // Reset global alpha context.shadowBlur = 0; // Reset shadow blur } // Update each star's position based on its rotation speed function updatePositions() { for (let i = 0; i < numStars; i++) { const d = stars[i]; // Advance the star’s angle d.angle += d.rotationSpeed; // Update x/y position based on polar coordinates d.x = centerX + Math.cos(d.angle) * d.distance; d.y = centerY + Math.sin(d.angle) * d.distance; } // Redraw all stars with new positions drawGalaxy(); } // Start animation loop using D3’s timer (calls updatePositions on each frame) d3.timer(updatePositions); return context.canvas; }32:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1746880299330.779,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1746880302325.133,"size":2966}] 2f:{"title":"Radiant Spiral of Entropy","cells":[{"id":10,"value":"

Radiant Spiral of Entropy

Chart Type: Generative Art, Tech Stack: D3.js, HTML Canvas

Data Sources: Randomly Generated Data

","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"

This artwork combines the glowing energy of stars with the spiral shapes we see in galaxies and nature.The bright spiral represents both the power of radiant energy and the natural patterns that form in the universe. At the same time, it reflects the idea of entropy—how all things slowly move from order to disorder. It’s a simple but powerful image of how beauty, energy, and change are all connected in the cosmos.

","pinned":false,"hidden":false,"mode":"html"},{"id":108,"value":"viewof numOfStarts = Inputs.range([400, 4000], {\n label: \"Number of Stars\",\n value: 2000,\n step: 400\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof numOfArms = Inputs.range([1, 4], {\n label: \"Number of Arms\",\n value: 3,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof spiralFactorVal = Inputs.range([1, 3], {\n label: \"Spiral Factor\",\n value: 2.2,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof baseRotationSpeedVal = Inputs.range([0.001, 0.005], {\n label: \"Base Rotation Speed\",\n value: 0.001,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof maxRotationSpeedVal = Inputs.range([0.001, 0.005], {\n label: \"Max Rotation Speed\",\n value: 0.002,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof animateArt = Inputs.button(\"📊 Animate Data Art 📊\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":28,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"*[D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [Canvas API Docs.](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)* ","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}