Made background worse

This commit is contained in:
asraelite 2018-03-04 00:22:12 +00:00
parent ba803b7ca9
commit dda4a44386
8 changed files with 6278 additions and 6 deletions

BIN
dist/img/background.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 KiB

112
dist/img/background.svg vendored Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

BIN
dist/img/stars_back.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

4703
dist/img/stars_back.svg vendored Normal file

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 204 KiB

BIN
dist/img/stars_front.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

1405
dist/img/stars_front.svg vendored Normal file

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 59 KiB

View file

@ -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'

View file

@ -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;
}
}
*/