Made background worse
This commit is contained in:
parent
ba803b7ca9
commit
dda4a44386
8 changed files with 6278 additions and 6 deletions
BIN
dist/img/background.png
vendored
Normal file
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
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
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
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
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
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 |
|
@ -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'
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue