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(); } }