Made background worse

js/assets.mjs

@@ -3,6 +3,11 @@ export const images = {
 		logo: 'logo.png',
 		logoSvg: 'logo2.svg'
 	},
+	background: {
+		back: 'background.png',
+		middle: 'stars_back.png',
+		front: 'stars_front.png'
+	},
 	modules: {
 		capsule: {
 			small: 'modules/small_capsule.svg'

js/graphics/background.mjs

@@ -1,13 +1,36 @@
-import {SeededRandom} from '../util.mjs';
+import {canvas, context, perspective} from './index.mjs';
-import {context, view, getVisibleSectors} from './index.mjs';
+import {images as assets} from '../assets.mjs';
-import {STAR_DENSITY} from '../consts.mjs';
 
-export function render() {
+let patterns = null;
-	context.fillStyle = '#000';
 
-	getVisibleSectors().forEach(s => renderSectorStars(s));
+function init() {
+	patterns = {
+		back: context.createPattern(assets.background.back, 'repeat'),
+		middle: context.createPattern(assets.background.middle, 'repeat'),
+		front: context.createPattern(assets.background.front, 'repeat')
+	};
 }
 
+export function render() {
+	if (patterns === null) init();
+
+	renderLayer(patterns.back, 0.3, 1);
+	renderLayer(patterns.middle, 0.5, 0.3);
+	renderLayer(patterns.front, 0.7, 0.3);
+}
+
+function renderLayer(pattern, speed = 1, scale = 1) {
+	context.save();
+	let [px, py] = [perspective.x * speed, perspective.y * speed];
+	context.translate(-px, -py);
+	context.scale(scale, scale);
+	context.fillStyle = pattern;
+	context.fillRect(px / scale, py / scale,
+		canvas.width / scale, canvas.height / scale);
+	context.restore();
+}
+
+/*
 function renderSectorStars(sector) {
 	let rand = new SeededRandom(sector.numId);
 
@@ -19,3 +42,27 @@ function renderSectorStars(sector) {
 		context.fillRect(sx, sy, 1.5, 1.5);
 	}
 }
+
+function tile(img, x, y, dx = 0, dy = 0, scale = 1) {
+	let [sx, sy] = [x * scale, y * scale];
+	let [ex, ey] = [(x + canvas.width) * scale, (y + canvas.height) * scale];
+	for (let x = sx; x < ex;) {
+		let nx = (Math.floor(x / img.width) + 1) * img.width;
+		nx = Math.min(nx, ex);
+		let w = nx - x;
+
+		for (let y = sy; y < ey;) {
+			let ny = (Math.floor(y / img.height) + 1) * img.height;
+			ny = Math.min(ny, ey);
+			let h = ny - y;
+
+			context.drawImage(img, x % img.width, y % img.height, w, h,
+				dx + x, dy + y, w, h);
+
+			y = ny;
+		}
+
+		x = nx;
+	}
+}
+*/