c73130e3ff
I forgot what I actually changed. It may not even be playable, I just want to get this up there.
32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import {canvas, context, perspective} from './index.mjs';
|
|
import {images as assets} from '../assets.mjs';
|
|
|
|
let patterns = null;
|
|
|
|
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(angle) {
|
|
if (patterns === null) init();
|
|
// renderLayer(patterns.back, 0.3, 1, angle);
|
|
// renderLayer(patterns.middle, 0.5, 0.3, angle);
|
|
// renderLayer(patterns.front, 0.7, 0.3, angle);
|
|
}
|
|
|
|
function renderLayer(pattern, speed = 1, scale = 1, angle = 0) {
|
|
context.save();
|
|
let outset = (Math.abs(Math.cos(angle)) + Math.abs(Math.sin(angle)));
|
|
outset = ((outset - 1) * canvas.width) / scale;
|
|
let [px, py] = [perspective.x * speed, perspective.y * speed];
|
|
context.translate(-px, -py);
|
|
context.scale(scale, scale);
|
|
context.fillStyle = pattern;
|
|
context.fillRect(px / scale - outset / 2, py / scale - outset / 2,
|
|
canvas.width / scale + outset, canvas.height / scale + outset);
|
|
context.restore();
|
|
}
|