So as you might have noticed, there is a new background on the main page.

I was bored of a static background and wanted to have something more dynamic.

A friend send me a picture of a his node network diagram.

So I decided to build a new background that looks similiar.

Now the thing is, as you might have noticed, I like space, and Sci-Fi, and stuff like that.

What what better to do then building a space background?

I first started with a simple starfield,
put together some JavaScript that would generate stars and splatter them across the background.

function generateStars(numStars) { 
 
 
 const stars = []; 
 
 for (let i = 0; i < numStars; i++) {
 
  const x = Math.random() * window.innerWidth;
 
  const y = Math.random() * window.innerHeight;
 
  const radius = Math.random() * (8 - 4) + 5;
 
  const star = createStar(x, y, radius);
 
  stars.push(star);
 
 }
 
 return stars;
 
}

The code above generates a given amount of stars and returns them in an array.

After that I used a simple for loop to append all stars to the starfield div.

const starfield = document.querySelector('.starfield');
 
const stars = generateStars(100);
 
for (let i = 0; i < stars.length; i++) {
 
 starfield.appendChild(stars[i]);
 
}

Now that I had a starfield, I wanted to add some planets.

So I created a function that would generate a planet with a given radius, color and position.

I used the same function as for the stars, but increased the size and changed the color

The hard part was to add some flying starships to the background.

The function to create the starships take the number of ships and the planets.

Each starship has a random start and end position and a random speed.

function generateStarships(numStarships, planets) {
 
 const starships = [];
 
 for (let i = 0; i < numStarships; i++) {
 
  const randomPlanetIndex = Math.floor(Math.random() * planets.length);
 
  const startPlanet = planets[randomPlanetIndex];
 
  const remainingPlanets = [...planets]; 
 
  remainingPlanets.splice(randomPlanetIndex, 1); 
 
  const endPlanet = remainingPlanets[Math.floor(Math.random() * remainingPlanets.length)];
 
  const startX = getCenterX(startPlanet);
 
  const startY = getCenterY(startPlanet);
 
  const endX = getCenterX(endPlanet);
 
  const endY = getCenterY(endPlanet);
 
  const speed = Math.random() * (10 - 1) + 1;
 
  const starship = createStarship(startX, startY, endX, endY, speed);
 
  starships.push(starship); }
 
 return starships;}

After that I added the starships to the starfield div and
added a simple animation to move them from the start to the end position.

And that is basically it, I added some lines to connect the planets and
added some text to the planets and ships.

You can look at the final result here.

It is not the finest and it has some quirks but I am happy with it.

And it makes the page a lot more dynamic and interesting, alteast that what I think.