Galaxy Animation CSS

Crafting a Cosmos: A Deep Dive into a Procedural Galaxy with Three.js

When we think of a website, we often picture text, images, and buttons arranged on a page. But the modern web is capable of so much more. It can be a canvas for immersive, interactive art that sparks wonder and curiosity. Today, we're venturing beyond the traditional webpage to dissect a stunning digital project: a procedurally generated, interactive 3D galaxy.

This project is a perfect case study for understanding the power of modern web graphics. At its core, it's just three simple files—index.html, style.css, and script.js—but together, they create a swirling cosmos of 100,000 luminous particles that you can explore and control. It’s a masterful demonstration of how the Three.js library can be used to harness the raw power of WebGL, turning your browser into a portal to another universe. In this analysis, we'll peel back the layers of this celestial animation, examine the code that gives it life, and understand the design principles that make it so captivating.

Advertizement

Kindly click on the word 'Advertisement' above, then return to this page or close the new tab. It’s a simple way to support us—at no cost to you.

Start earning by sharing links or placing ads on your website. Click the button below to register and begin your journey today!

Start Earning Today by Shortening and Sharing Links!, Click the banner below to register now and begin making money from your very first link.

Core Technology Breakdown

While the visual output is complex, the project's technological foundation is elegantly simple. It relies on the fundamental trio of web development, supercharged by a powerful JavaScript library for 3D graphics.

The Blueprint: A Minimalist HTML Structure

The index.html file is the project's skeletal frame, and its beauty lies in its simplicity. Its primary job is to create the stage for our 3D scene.

The Canvas Element: The most critical line in the HTML is <canvas class="webgl"></canvas>. This single tag creates the drawing board where Three.js will render the entire galaxy. It is, quite literally, the canvas for our digital art.
Linking Resources: The file performs two other essential functions: it links the stylesheet with <link rel="stylesheet" href="./style.css"> to control the canvas's appearance and positioning, and it loads the main application logic with <script type="module" src="script.js"></script>. The type="module" attribute is a key modern feature; it allows the script.js file to use ES6 module syntax, enabling clean imports for the Three.js library directly from a CDN (import * as THREE from "https://cdn.skypack.dev/three@0.132.2";).

The Style: Fullscreen Immersion CSS

The style.css file is just as minimal but absolutely crucial for the user experience. Its purpose is to make the canvas a completely immersive environment.

Resetting Defaults: The file starts with a universal selector * { margin: 0; padding: 0; }. This removes any default browser spacing, ensuring the canvas can perfectly align with the edges of the viewport.
Locking the View: The html, body { overflow: hidden; } rule is essential; it prevents any scrollbars from appearing, locking the user's view entirely within the 3D scene.
Positioning the Canvas: The .webgl class styles the canvas to fill the entire screen by setting its position to fixed and pinning it to the top and left corners (top: 0; left: 0;). This ensures the galaxy animation is the only thing the user sees, creating a truly immersive experience.

The Engine: JavaScript and Three.js

The heart and soul of the project reside in script.js. This file orchestrates everything from setting up the 3D world to generating and animating every single particle.

Three.js: This is the star of the show. Three.js is a high-level library that simplifies the complex process of working with WebGL, the low-level browser API for rendering 2D and 3D graphics. By importing it, the developer gains access to a powerful toolkit for creating scenes, cameras, materials, and objects.
Scene, Camera, Renderer: The script sets up the three fundamental components of any Three.js application. A Scene is created (const scene = new THREE.Scene()) to act as a container for all objects. A PerspectiveCamera (const camera = new THREE.PerspectiveCamera(...)) is set up to provide a viewpoint into the scene. Finally, a WebGLRenderer (const renderer = new THREE.WebGLRenderer(...)) is initialized to take the scene and camera information and draw the result onto the HTML canvas.
OrbitControls for Interactivity: The project imports OrbitControls, an invaluable utility that allows the user to intuitively control the camera by clicking and dragging to rotate, scrolling to zoom, and right-clicking to pan. This immediately transforms the experience from a passive animation into an interactive celestial playground.

Visual Design and User Experience (UX) Analysis

This project's design is not about buttons or layouts but about atmosphere and interaction. It's a piece of generative art where the visual aesthetic and user experience are deeply intertwined.

Aesthetic and Visuals

The visual appeal is breathtaking. It's a dynamic, swirling galaxy composed of countless points of light.

Particle System: The galaxy isn't a single object but a massive particle system made of 100,000 individual points (parameters.count = 100000;). This approach is highly efficient for rendering a vast number of small objects.
Color Theory: The color palette is defined by two core colors: an fiery orange for the galactic core (parameters.insideColor = '#ff6030';) and a deep blue for the outer arms (parameters.outsideColor = '#0949f0';). The code then programmatically blends these two colors for each particle based on its distance from the center, creating a beautiful and natural-looking gradient.
Luminous Blending: The material used for the points has blending: THREE.AdditiveBlending enabled. This is a critical visual choice. With additive blending, when particles overlap, their colors add up, becoming brighter. This creates the illusion of a glowing, ethereal nebula and gives the galaxy a sense of depth and luminosity.

UX Principles in Action

The user experience is defined by immersion and exploration.

Direct Manipulation: By including OrbitControls, the project empowers the user. Instead of being a passive observer, the user becomes a cosmic explorer, able to view the galaxy from any angle. The enabling of damping (controls.enableDamping = true) adds a sense of weight and inertia to the camera movements, making the interaction feel smooth and polished.
Responsive and Adaptive: The code is built to be responsive. A resize event listener is set up on the window, which updates the camera's aspect ratio and the renderer's size whenever the browser window changes (window.addEventListener('resize', ...)). This ensures the galaxy looks correct and fills the screen on any device, from a small phone to a large desktop monitor.
Continuous Motion: The camera is programmed to be in constant, gentle motion, slowly orbiting the galaxy's center (camera.position.x = Math.cos(elapsedTime*0.05);). This subtle animation makes the scene feel alive and dynamic, even when the user isn't interacting with it.

Behind-the-Scenes Mechanics

How does the code procedurally generate a galaxy from scratch? It happens in two key functions: one to generate the structure (generateGalaxy) and one to animate it over time (tick).

The `generateGalaxy` Function

This function is the project's creative core. It runs once and builds the entire galaxy by placing each of the 100,000 particles according to a set of mathematical rules.

Initialization: First, it creates arrays to hold the position (positions) and color (colors) data for every single vertex (particle).
The Loop: It then enters a massive for loop that runs 100,000 times. In each iteration, it calculates the properties for one particle.
Creating the Spiral Arms: The iconic spiral shape is created using trigonometry. A radius is calculated, determining how far the particle is from the center. A branchAngle determines which of the three spiral arms (parameters.branches = 3;) the particle belongs to. A spinAngle is calculated from the radius, which makes the arms curve. These values are plugged into Math.cos() and Math.sin() to place the particle in a spiral pattern (positions[i3] = Math.cos(branchAngle + spinAngle)*(radius) + randomX;).
Adding Natural Randomness: To make the galaxy look less perfect and more organic, random values are added to each particle's position. The parameters.randomnessPower variable is used with Math.pow() to ensure that particles closer to the center are more tightly packed, while particles further out are more scattered.
Assigning Colors: Inside the loop, the code clones the inside color and uses the .lerp() method to linearly interpolate it towards the outside color, based on the particle's radius (mixedColor.lerp(colorOutside, Math.random()*radius/parameters.radius);). This creates the smooth color gradient from the core to the tips.
Building the Geometry: Finally, all the position and color data is loaded into a BufferGeometry and used to create a THREE.Points object, which is then added to the scene (scene.add(points);).

The `tick` Animation Loop

This function creates the illusion of movement. It's a loop that runs on every single frame.

Frame-by-Frame Updates: The tick function is called repeatedly using window.requestAnimationFrame(tick), which is the browser's optimized way to run animations smoothly.
Time Tracking: It uses THREE.Clock to get the elapsedTime, which allows animations to be smooth and consistent regardless of the computer's frame rate.
Camera Animation: As mentioned earlier, it uses the elapsedTime with Math.cos and Math.sin to animate the camera's position in a slow, circular orbit.
Rendering the Scene: The most important line is renderer.render(scene, camera). On every frame, this command tells the renderer to draw the current state of the scene from the camera's perspective onto the canvas.

Conclusion: Why It Matters

This galaxy animation project is a powerful testament to the modern browser's capabilities as a creative platform. It demonstrates that with just a handful of code and a brilliant library like Three.js, a developer can move beyond simple document layouts and build truly immersive, artistic, and interactive experiences.

The key takeaway is the power of procedural generation. Instead of manually placing 100,000 points, the developer created a simple set of rules and let the computer generate the complexity. This approach is at the heart of everything from video game level design to visual effects.

This project beautifully blurs the line between coding and artistry. It shows that the web is not just a medium for information consumption but a canvas for creating breathtaking digital worlds. It stands as an inspiring example of how logic and mathematics can be used to generate something profoundly beautiful, reminding us that sometimes the most impressive websites aren't the ones that sell a product, but the ones that create a feeling.

Codes MSPTS

Galaxy Animation CSS

Crafting a Cosmos: A Deep Dive into a Procedural Galaxy with Three.js

Core Technology Breakdown