Creating the Outer Wilds Solar System with HTML, CSS, and JavaScript
The Outer Wilds Solar System is a dynamic and mesmerizing environment, and recreating it in a simple interactive webpage can be a fun challenge. By using HTML, CSS, and JavaScript, you can simulate the orbiting planets and provide a basic visual representation of this system. In this guide, we’ll walk through how to create an animated solar system inspired by Outer Wilds.
Table of Contents
Creating the Outer Wilds Solar System with HTML, CSS, and JavaScript
Step 1: Structure with HTML
First, we’ll set up the basic structure of the solar system using HTML. We’ll create a div for the sun and multiple divs for the planets, each wrapped in an orbiting container.
To make the solar system more interactive, we can add some JavaScript to handle hover events or display information about each planet when clicked. For example, hovering over a planet might reveal its name.
class Wanderer extends HTMLElement {
constructor() {
super();
}
static observedAttributes = ['image'];
attributeChangedCallback (name, oldValue, newValue) {
if (name === 'image') {
// Pre-load the image before replacing the solid colour with the image
const img = new Image();
img.onload = () => { this.style.setProperty('--w-image', `url(${newValue})`); }
img.src = newValue;
}
}
}
customElements.define('ow-wanderer', Wanderer);
class Starfield extends HTMLElement {
constructor() {
super();
this.svgNS = 'http://www.w3.org/2000/svg';
}
static observedAttributes = ['stars'];
attributeChangedCallback (name, oldValue, newValue) {
if (name === 'stars') {
Array.from(this.querySelectorAll('ow-star')).forEach(s => s.parentElement.removeChild(s));
const starCount = parseInt(newValue, 10);
const svgElId = this.getAttribute('use');
const originalViewBox = document.getElementById(svgElId).closest('svg').getAttribute('viewBox').trim().split(' ');
const originalSize = parseFloat(originalViewBox[3]);
if (!isNaN(starCount) && starCount > 0 && svgElId) {
for (let s = 0; s < starCount; s++) {
const star = document.createElement('ow-star');
const svg = document.createElementNS(this.svgNS, 'svg');
const use = document.createElementNS(this.svgNS, 'use');
const size = Math.round(0.25 + Math.random() * 0.75 * originalSize);
const delay = Math.random() * 0.5;
const posX = Math.random() * 100;
const posY = Math.random() * 100;
use.setAttributeNS(this.svgNS, 'xlink:href', `#${svgElId}`);
use.setAttribute('width', originalSize);
use.setAttribute('height', originalSize);
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
svg.setAttribute('width', size);
svg.setAttribute('height', size);
svg.setAttribute('viewBox', originalViewBox.join(' '));
svg.setAttribute('class', 'starclone');
star.style.setProperty('--delay', delay);
star.style.setProperty('--star-x', posX + '%');
star.style.setProperty('--star-y', posY + '%');
svg.appendChild(use);
star.appendChild(svg)
this.appendChild(star);
}
this.innerHTML += ' '; // Hacky BS to force the SVG to render, sorry
}
}
}
}
customElements.define('ow-starfield', Starfield);
document.addEventListener('DOMContentLoaded', function() {
// Make the quantum moon jump around randomly
const quantumMoon = document.getElementById('quantum-moon');
const quantumOrbits = Array.from(document.querySelectorAll('[quantum]'));
setInterval(() => {
const currOrbit = quantumMoon.closest('[quantum]');
const availableOrbits = quantumOrbits.filter(o => o !== currOrbit);
const newOrbit = availableOrbits[Math.floor(Math.random() * availableOrbits.length)];
const newWanderer = newOrbit.querySelector(':scope > ow-wanderer');
newWanderer.appendChild(quantumMoon);
}, 5000);
const doc = document.documentElement;
const solarSystem = document.querySelector('ow-system');
solarSystem.onclick = () => solarSystem.classList.toggle('paused');
// Very shifty scaling, doesn't work well
let scale = 1;
let debouncer = null;
function debounce (e) {
if (!e.shiftKey) { return; } // No shift key, no scaling
clearTimeout(debouncer);
debouncer = setTimeout(() => {
e.preventDefault();
if (e.wheelDeltaY < 0) { scale -= 0.25; }
if (e.wheelDeltaY > 0) { scale += 0.25; }
scale = Math.max(0.5, Math.min(4, scale)); // Min: 0.5 / Max: 4
solarSystem.style.setProperty('--scale', String(scale));
}, 5);
}
window.addEventListener('wheel', debounce);
// window.addEventListener('scroll', debounce);
let x;
let y;
let isMouseDown = false;
doc.style.cursor = 'grab';
window.addEventListener('mousedown', (e) => {
isMouseDown = true;
doc.style.cursor = 'grabbing';
x = e.clientX;
y = e.clientY;
});
window.addEventListener('mousemove', (e) => {
if (!isMouseDown) { return; }
doc.style.cursor = 'grabbing';
const deltaX = x - e.clientX;
const deltaY = y - e.clientY;
doc.scrollLeft = Math.max(0, doc.scrollLeft + deltaX);
doc.scrollTop = Math.max(0, doc.scrollTop + deltaY);
x = e.clientX;
y = e.clientY;
});
window.addEventListener('mouseup', (e) => {
isMouseDown = false;
doc.style.cursor = 'grab';
x = null;
y = null;
})
});
This simple script adds an interactive feature where hovering over any of the planets enlarges them, providing a focus effect.
