diff --git a/dist/img/background.png b/dist/img/background.png new file mode 100644 index 0000000..f87abe7 Binary files /dev/null and b/dist/img/background.png differ diff --git a/dist/img/background.svg b/dist/img/background.svg new file mode 100644 index 0000000..5691bd6 --- /dev/null +++ b/dist/img/background.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/img/stars_back.png b/dist/img/stars_back.png new file mode 100644 index 0000000..75a0a8c Binary files /dev/null and b/dist/img/stars_back.png differ diff --git a/dist/img/stars_back.svg b/dist/img/stars_back.svg new file mode 100644 index 0000000..833a3c8 --- /dev/null +++ b/dist/img/stars_back.svg @@ -0,0 +1,4703 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/img/stars_front.png b/dist/img/stars_front.png new file mode 100644 index 0000000..7da63cb Binary files /dev/null and b/dist/img/stars_front.png differ diff --git a/dist/img/stars_front.svg b/dist/img/stars_front.svg new file mode 100644 index 0000000..8e5f9ad --- /dev/null +++ b/dist/img/stars_front.svg @@ -0,0 +1,1405 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/assets.mjs b/js/assets.mjs index 16da8cd..60c0b70 100644 --- a/js/assets.mjs +++ b/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' diff --git a/js/graphics/background.mjs b/js/graphics/background.mjs index 82a4c8e..c182fcb 100644 --- a/js/graphics/background.mjs +++ b/js/graphics/background.mjs @@ -1,13 +1,36 @@ -import {SeededRandom} from '../util.mjs'; -import {context, view, getVisibleSectors} from './index.mjs'; -import {STAR_DENSITY} from '../consts.mjs'; +import {canvas, context, perspective} from './index.mjs'; +import {images as assets} from '../assets.mjs'; -export function render() { - context.fillStyle = '#000'; +let patterns = null; - 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; + } +} +*/