andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Simplify background maths

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-26 23:10:02 +02:00
parent aa9047c0d8
commit 286977665a
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
1 changed files with 19 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/page/background/background.ts
View file

@ -19,7 +19,6 @@ export class Background extends PageElement {
private stableRandom = new Random(); private stableRandom = new Random();
private blobs: Array<HTMLElement> = []; private blobs: Array<HTMLElement> = [];
private windowHeight = 0; private windowHeight = 0;
private windowWidth = 0;
private contentHeight = 0; private contentHeight = 0;
public constructor( public constructor(
@ -55,6 +54,15 @@ export class Background extends PageElement {
private createBlob(): HTMLElement { private createBlob(): HTMLElement {
const blob = document.createElement('div'); const blob = document.createElement('div');
const z = this.random.inInterval(Background.zMin, Background.zMax); const z = this.random.inInterval(Background.zMin, Background.zMax);
const endXSpan =
((1 / Background.perspective) * (Background.zMax + Background.perspective)) / 2;
const x = this.stableRandom.inInterval(
mix(0, -(endXSpan - 0.5), z / Background.zMax),
mix(1, 1 + endXSpan - 0.5, z / Background.zMax)
);
blob.style.left = `${x * 100}%`;
blob.style.zIndex = (-z).toFixed(0); blob.style.zIndex = (-z).toFixed(0);
blob.style.opacity = ( blob.style.opacity = (
1 - 1 -
@ -73,10 +81,9 @@ export class Background extends PageElement {
const currentContentHeight = sum(siblings.map(getHeight)); const currentContentHeight = sum(siblings.map(getHeight));
if ( if (
window.innerWidth !== this.windowWidth || window.innerHeight !== this.windowHeight ||
currentContentHeight !== this.contentHeight currentContentHeight !== this.contentHeight
) { ) {
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight; this.windowHeight = window.innerHeight;
this.contentHeight = currentContentHeight; this.contentHeight = currentContentHeight;
this.maintainBlobCount(); this.maintainBlobCount();
@ -100,22 +107,23 @@ export class Background extends PageElement {
this.stableRandom.seed = Background.stableSeed; this.stableRandom.seed = Background.stableSeed;
this.blobs.forEach((b) => { this.blobs.forEach((b) => {
const z = -parseFloat(b.style.zIndex); const z = -parseFloat(b.style.zIndex);
const [x, y] = this.getRandomPositionInSafeArea( const y = this.getRandomYInSafeArea(
z, z,
topOffset, topOffset,
bottomOffset, bottomOffset,
parseFloat(b.style.height) parseFloat(b.style.height)
); );
b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
b.style.transform = `translate3D(0, ${y}px, ${-z}px) rotate(-20deg)`;
}); });
} }
private getRandomPositionInSafeArea( private getRandomYInSafeArea(
z: number, z: number,
topOffset: number, topOffset: number,
bottomOffset: number, bottomOffset: number,
height: number height: number
): [number, number] { ): number {
const farTop = -( const farTop = -(
((this.windowHeight / 2 - topOffset) / Background.perspective) * ((this.windowHeight / 2 - topOffset) / Background.perspective) *
(Background.zMax + Background.perspective) - (Background.zMax + Background.perspective) -
@ -130,24 +138,9 @@ export class Background extends PageElement {
this.contentHeight - height this.contentHeight - height
); );
const endXSpan = return this.stableRandom.inInterval(
((this.windowWidth / Background.perspective) * mix(topOffset, farTop, z / Background.zMax),
(Background.zMax + Background.perspective)) / farBottom
2; );
return [
this.stableRandom.inInterval(
mix(0, -(endXSpan - this.windowWidth / 2), z / Background.zMax),
mix(
this.windowWidth,
this.windowWidth + endXSpan - this.windowWidth / 2,
z / Background.zMax
)
),
this.stableRandom.inInterval(
mix(topOffset, farTop, z / Background.zMax),
farBottom
),
];
} }
} }