spaceloop1/js/viewer/sets/starfield.js

var starsFar = [];
var starsClose = [];
var starfield = { width: 2048, height: 2048 };
var starMotion = {velocity:{x: 0.05, y: 0.05}, depthFactor: 3};

sets.push({
	id: "starfield",
	setup: () => {
		if(!setsLoaded['starfield']) {
			buildStars();
			setsLoaded['starfield'] = true;
		}
	},
	update: (delta) => {
		updateStars(delta);
	},
	draw: (context, delta) => {
		drawStars(context, delta);
	},
});

function buildStars() {
	starsFar = [];
	starsClose = [];
	for (let i = 0; i < (starfield.width * starfield.height / 4096); i++) {
		let star = {};
		star.x = Math.floor(starfield.width * Math.random()) - starfield.width / 2;
		star.y = Math.floor(starfield.height * Math.random()) - starfield.height / 2;
		star.bright = (2 * Math.random());
		starsFar.push(star);
	}
	for (let i = 0; i < (starfield.width * starfield.height / 4096); i++) {
		let star = {};
		star.x = Math.floor(starfield.width * Math.random()) - starfield.width / 2;
		star.y = Math.floor(starfield.height * Math.random()) - starfield.height / 2;
		star.bright = 2 * Math.random();
		starsClose.push(star);
	}
}

function updateStars(delta) {
	for (let i = 0; i < starsFar.length; i++) {
		let star = starsFar[i];
		star.x += starMotion.velocity.x;
		star.y += starMotion.velocity.y;
		if (star.x > starfield.width / 2) {
			star.x -= starfield.width;
		}
		if (star.y > starfield.height / 2) {
			star.y -= starfield.height;
		}
	}
	for (let i = 0; i < starsClose.length; i++) {
		let star = starsClose[i];
		star.x += starMotion.velocity.x * starMotion.depthFactor;
		star.y += starMotion.velocity.y * starMotion.depthFactor;
		if (star.x > starfield.width / 2) {
			star.x -= starfield.width;
		}
		if (star.y > starfield.height / 2) {
			star.y -= starfield.height;
		}
	}
}

function drawStars(context, delta) {
	for (let i = 0; i < starsFar.length; i++) {
		context.beginPath();
		context.fillStyle = "white";
		context.arc(starsFar[i].x, starsFar[i].y, starsFar[i].bright / 2, 0, 2 * Math.PI);
		context.fill();
	}
	for (let i = 0; i < starsClose.length; i++) {
		context.beginPath();
		context.fillStyle = "white";
		context.arc(starsClose[i].x, starsClose[i].y, starsClose[i].bright, 0, 2 * Math.PI);
		context.fill();
	}
}