Foam Pit Starfield

foam-pit-starfield.markdown

Foam Pit Starfield

A Pen by Adam Quinton on CodePen.

License.

index.html

<canvas class="fullscreenable"></canvas>

<div data-window-object="starfieldOptions"></div>

script.js

console.clear();
window.starfieldOptions = {};
starfieldOptions.starSize = 17;
starfieldOptions.trajectoryMin = 20;
starfieldOptions.trajectoryMax = 20;
starfieldOptions.fps = 30;
starfieldOptions.blurAmount = 0;
starfieldOptions.focalBlankSize = 0;
starfieldOptions.newStarsPerFrame = 25;
starfieldOptions.redMin = 80;
starfieldOptions.redMax = 120;
starfieldOptions.greenMin = 80;
starfieldOptions.greenMax = 120;
starfieldOptions.blueMin = 80;
starfieldOptions.blueMax = 120;

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const stars = [];
window.addEventListener('resize', resizeCanvas, false);

function addStars(num) {
  for (let i = 0; i < num; i++) {
    stars.push(getStar());
  }
}
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  stars.length = 0; // empty stars array
  drawStuff(); 
}
function getStar() {
  return {
    x: canvas.width / 2,
    y: canvas.height / 2,
    dX: getRandomInt(-starfieldOptions.trajectoryMin, starfieldOptions.trajectoryMax) + getRandomInt(0, 9) / 10,
    dY: getRandomInt(-starfieldOptions.trajectoryMin, starfieldOptions.trajectoryMax) + getRandomInt(0, 9) / 10,
    size: starfieldOptions.starSize,
    color: `rgb(${getRandomInt(starfieldOptions.redMin, starfieldOptions.redMax)}, ${getRandomInt(starfieldOptions.greenMin, starfieldOptions.greenMax)}, ${getRandomInt(starfieldOptions.blueMin, starfieldOptions.blueMax)})`
  };
}

resizeCanvas();
let lastFps = starfieldOptions.fps;
let handle = setInterval(mainLoop, 1000 / starfieldOptions.fps);

function mainLoop() {
  if (starfieldOptions.fps !== lastFps) {
    clearInterval(handle);
    handle = setInterval(mainLoop, 1000 / starfieldOptions.fps);
  }
  // delete stars that have moved off screen
  const garbageStars = stars.reduce((acc, star, i) => {
    if (star.x > canvas.width || star.y > canvas.height ||
       star.x < 0 || star.y < 0) acc.push(i);
    return acc;
  }, []);
  if (garbageStars.length > 0) {
    garbageStars.reverse();
    garbageStars.forEach(index => stars.splice(index, 1));
  }
  // add new star
  addStars(starfieldOptions.newStarsPerFrame);
  drawStuff();
}

function drawStuff() {
  stars.forEach(star => {
    star.x += star.dX; // calculate star's new position
    star.y += star.dY;
    star.size += (Math.abs(star.dX) + Math.abs(star.dY)) / 2 * .01;
    for (let i = starfieldOptions.blurAmount + 1; i > 1; i--) {
      const colorStrength = 100 / i;
      ctx.fillStyle = `rgb(${colorStrength}, ${colorStrength}, ${colorStrength})`;
      ctx.fillRect(star.x - star.dX / 2 * i, star.y - star.dY / 2 * i, star.size, star.size);
    }
    ctx.fillStyle = star.color;
    ctx.fillRect(star.x, star.y, star.size, star.size);
  });
  ctx.fillStyle = 'rgb(20, 0, 35)';
  ctx.fillRect(canvas.width / 2 - starfieldOptions.focalBlankSize / 2, canvas.height / 2 - starfieldOptions.focalBlankSize / 2, starfieldOptions.focalBlankSize, starfieldOptions.focalBlankSize);
}

function getRandomInt(min, max) { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

const camelCase = str => str.replace(/-[a-z]/g, val => val[1].toUpperCase());
const kabobCase = str => str.replace(/[A-Z]/g, val => '-'+val.toLowerCase());

const configDiv = document.querySelector('div');
const boundObj = window[configDiv.dataset.windowObject];
Object.entries(boundObj).forEach(([key, value]) => {
  const label = document.createElement('label');
  const kabobKey = kabobCase(key);
  label.textContent = key;
  const control = document.createElement('input');
  control.setAttribute('type', 'number');
  control.value = value;
  ['input', 'change'].forEach(event => {
    control.addEventListener(event, e => {
      boundObj[key] = Number(e.target.value);
    });
  });
  label.htmlFor = control.id = `${kabobCase(configDiv.dataset.windowObject)}-${kabobKey}`;
  label.appendChild(control);
  configDiv.appendChild(label);
});

document.addEventListener('keyup', e => {
  if (e.code === 'KeyH') configDiv.hidden = !configDiv.hidden;
});

style.css

body { 
  margin: 0; 
  padding: 0
  background: red;
}
canvas { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  overflow: hidden
}

div {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #7777;
  color: white;
  font-family: monospace;
}
div > * {
  display: flex;
  justify-content: space-between;
}
div input {
  width: 5ch;
  margin-left: 2ch;
}