Fix background and fix PageElement system
This commit is contained in:
schmelczerandras
parent
6fc16f4de0
commit
91d92f7f48
24 changed files with 528 additions and 809 deletions
|
|
@ -1,160 +1,121 @@
|
|||
import { PageElement } from '../page-element';
|
||||
import { Blob } from './blob';
|
||||
import { generate } from './background.html';
|
||||
|
||||
import { Vec3 } from './vec3';
|
||||
import { Vec2 } from './vec2';
|
||||
import { createElement } from '../../helper/create-element';
|
||||
import { sum } from '../../helper/sum';
|
||||
import { getHeight } from '../../helper/get-height';
|
||||
import { OnLoadEvent } from '../../events/concrete-events/on-load-event';
|
||||
import { OptionalEvent } from '../../events/optional-event';
|
||||
import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event';
|
||||
|
||||
import { mix } from '../../helper/mix';
|
||||
import { Random } from '../../helper/random';
|
||||
|
||||
export class PageBackground extends PageElement {
|
||||
public static readonly blobSpacing = 325;
|
||||
public static readonly minBlobCount = 30;
|
||||
public static readonly perspective = 5;
|
||||
public static readonly zMin = 10;
|
||||
public static readonly zMax = 30;
|
||||
private static readonly perspective = 5;
|
||||
private static readonly zMin = 6;
|
||||
private static readonly zMax = 50;
|
||||
|
||||
private backgroundSize: Vec2;
|
||||
private scrollPosition = 0;
|
||||
private previousTimestamp: DOMHighResTimeStamp = null;
|
||||
private readonly blobs: Array<Blob> = [];
|
||||
private readonly canvas: HTMLCanvasElement;
|
||||
private readonly ctx: CanvasRenderingContext2D;
|
||||
private parent: PageElement;
|
||||
private random: Random = new Random();
|
||||
private blobs: Array<HTMLElement> = [];
|
||||
|
||||
public constructor(
|
||||
private readonly start: PageElement,
|
||||
private readonly inBetween: Array<PageElement>,
|
||||
private readonly end: PageElement
|
||||
private readonly topOffsetElementCount: number,
|
||||
private readonly bottomOffsetElementCount: number
|
||||
) {
|
||||
super(createElement(generate()));
|
||||
this.canvas = this.htmlRoot as HTMLCanvasElement;
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
}
|
||||
|
||||
public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
|
||||
this.parent = event.parent;
|
||||
requestAnimationFrame(this.draw.bind(this));
|
||||
return super.handleOnLoadEvent(event);
|
||||
}
|
||||
|
||||
public handleOnPageThemeChangedEvent(event: OnPageThemeChangedEvent): OptionalEvent {
|
||||
Blob.changeTheme(event.isDark);
|
||||
this.blobs.forEach(b => b.decideColor());
|
||||
return super.handleOnPageThemeChangedEvent(event);
|
||||
}
|
||||
|
||||
private createBlobs() {
|
||||
const requiredBlobCount = Math.max(
|
||||
PageBackground.minBlobCount,
|
||||
(this.backgroundSize.x * this.backgroundSize.y) / PageBackground.blobSpacing ** 2
|
||||
);
|
||||
|
||||
while (requiredBlobCount > this.blobs.length) {
|
||||
this.blobs.push(new Blob());
|
||||
for (let i = 0; i < window.innerWidth / 10; i++) {
|
||||
const blob = document.createElement('div');
|
||||
blob.classList.add('blob');
|
||||
blob.style.width = '140px';
|
||||
const z = this.random.inInterval(PageBackground.zMin, PageBackground.zMax);
|
||||
blob.style.zIndex = (-z).toFixed(0);
|
||||
blob.style.opacity = (
|
||||
1 -
|
||||
(z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin)
|
||||
).toString();
|
||||
blob.style.height = `${this.random.inInterval(360, 740)}px`;
|
||||
this.blobs.push(blob);
|
||||
this.htmlRoot.appendChild(blob);
|
||||
}
|
||||
}
|
||||
|
||||
private resizeCanvas() {
|
||||
this.canvas.width = this.canvas.clientWidth;
|
||||
this.canvas.height = this.canvas.clientHeight;
|
||||
}
|
||||
private windowHeight = 0;
|
||||
private windowWidth = 0;
|
||||
private contentHeight = 0;
|
||||
private drawIfNecessary() {
|
||||
const siblings = this.getSiblings();
|
||||
const currentContentHeight = sum(siblings.map(getHeight));
|
||||
|
||||
private resizeBackground() {
|
||||
const targetWidth = this.parent.htmlRoot.clientWidth;
|
||||
if (
|
||||
window.innerWidth !== this.windowWidth ||
|
||||
window.innerHeight !== this.windowHeight ||
|
||||
currentContentHeight !== this.contentHeight
|
||||
) {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowHeight = window.innerHeight;
|
||||
this.contentHeight = currentContentHeight;
|
||||
|
||||
const siblings: Array<HTMLElement> = this.getSiblings();
|
||||
const targetHeight = sum(siblings.map(getHeight));
|
||||
|
||||
if (targetWidth === this.canvas.width && targetHeight === this.canvas.height) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetSize = new Vec2(targetWidth, targetHeight);
|
||||
this.backgroundSize = targetSize;
|
||||
|
||||
this.blobs.forEach(blob => {
|
||||
const variableOffset = (offset, q) =>
|
||||
Math.max(
|
||||
0,
|
||||
offset -
|
||||
((blob.z - PageBackground.zMin) /
|
||||
(PageBackground.zMax - PageBackground.zMin)) *
|
||||
offset *
|
||||
q
|
||||
);
|
||||
const topOffset = variableOffset(getHeight(this.start.htmlRoot), 1);
|
||||
const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z);
|
||||
|
||||
const bottomOffset = variableOffset(getHeight(this.end.htmlRoot), 0.2);
|
||||
const bottomRight = this.convertFrom2Dto3D(
|
||||
new Vec2(this.canvas.width, this.canvas.height - bottomOffset),
|
||||
blob.z,
|
||||
targetSize.y - this.canvas.height
|
||||
this.randomizeBlobs(
|
||||
sum(siblings.slice(0, this.topOffsetElementCount).map(getHeight)),
|
||||
sum(siblings.slice(-this.bottomOffsetElementCount).map(getHeight))
|
||||
);
|
||||
}
|
||||
|
||||
blob.positionOffset = topLeft;
|
||||
blob.positionScale = bottomRight.subtract(topLeft);
|
||||
});
|
||||
requestAnimationFrame(this.drawIfNecessary.bind(this));
|
||||
}
|
||||
|
||||
private parent?: HTMLElement;
|
||||
protected setParent(parent: PageElement) {
|
||||
this.parent = parent.htmlRoot;
|
||||
requestAnimationFrame(this.drawIfNecessary.bind(this));
|
||||
super.setParent(parent);
|
||||
}
|
||||
|
||||
private getSiblings(): Array<HTMLElement> {
|
||||
return [this.start, ...this.inBetween, this.end].map(e => e.htmlRoot);
|
||||
return Array.prototype.slice
|
||||
.call(this.parent!.childNodes)
|
||||
.filter((n: HTMLElement) => n !== this.htmlRoot);
|
||||
}
|
||||
|
||||
private draw(timestamp: DOMHighResTimeStamp) {
|
||||
this.resizeCanvas();
|
||||
this.resizeBackground();
|
||||
this.createBlobs();
|
||||
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
const deltaTime = this.getDeltaTime(timestamp);
|
||||
this.blobs.forEach(b => b.step(deltaTime));
|
||||
|
||||
this.scrollPosition = this.parent.htmlRoot.scrollTop;
|
||||
|
||||
this.blobs.sort((b1, b2) => b2.z - b1.z);
|
||||
|
||||
this.blobs.forEach(blob => {
|
||||
const topLeft = this.convertFrom3Dto2D(blob.topLeft);
|
||||
const bottomRight = this.convertFrom3Dto2D(
|
||||
blob.topLeft.add(Vec3.from(blob.size, 0))
|
||||
);
|
||||
|
||||
if (this.isInView(topLeft, bottomRight)) {
|
||||
blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
|
||||
}
|
||||
private randomizeBlobs(topOffset: number, bottomOffset: number) {
|
||||
this.random.seed = 50;
|
||||
this.blobs.forEach(b => {
|
||||
const z = -Number.parseInt(b.style.zIndex);
|
||||
const [x, y] = this.randomXY(z, topOffset, bottomOffset);
|
||||
b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
|
||||
});
|
||||
|
||||
requestAnimationFrame(this.draw.bind(this));
|
||||
}
|
||||
|
||||
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
|
||||
const deltaTime = this.previousTimestamp ? timestamp - this.previousTimestamp : 0;
|
||||
this.previousTimestamp = timestamp;
|
||||
return Math.max(0, deltaTime);
|
||||
}
|
||||
|
||||
private convertFrom3Dto2D(p: Vec3): Vec2 {
|
||||
const m = PageBackground.perspective / (PageBackground.perspective + p.z);
|
||||
return new Vec2(m * (p.z / 2 + p.x), m * (p.z / 2 + p.y - this.scrollPosition));
|
||||
}
|
||||
|
||||
private convertFrom2Dto3D(p: Vec2, z: number, scrollPosition = 0): Vec2 {
|
||||
const m = 1 + z / PageBackground.perspective;
|
||||
return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
|
||||
}
|
||||
|
||||
private isInView(topLeft: Vec2, bottomRight: Vec2): boolean {
|
||||
return (
|
||||
((0 <= topLeft.x && topLeft.x <= this.canvas.width) ||
|
||||
(0 <= bottomRight.x && bottomRight.x < this.canvas.width)) &&
|
||||
((0 <= topLeft.y && topLeft.y <= this.canvas.height) ||
|
||||
(0 <= bottomRight.y && bottomRight.y <= this.canvas.height))
|
||||
private randomXY(z: number, topOffset: number, bottomOffset: number): [number, number] {
|
||||
const farTop = -(
|
||||
((this.windowHeight / 2 - topOffset) / PageBackground.perspective) *
|
||||
(PageBackground.zMax + PageBackground.perspective) -
|
||||
this.windowHeight / 2
|
||||
);
|
||||
|
||||
const farBottom =
|
||||
((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) *
|
||||
(PageBackground.zMax + PageBackground.perspective) -
|
||||
this.windowHeight / 2 +
|
||||
this.contentHeight;
|
||||
|
||||
const endXSpan =
|
||||
((this.windowWidth / PageBackground.perspective) *
|
||||
(PageBackground.zMax + PageBackground.perspective)) /
|
||||
2;
|
||||
|
||||
return [
|
||||
this.random.inInterval(
|
||||
mix(0, -(endXSpan - this.windowWidth / 2), z / PageBackground.zMax),
|
||||
mix(
|
||||
this.windowWidth,
|
||||
this.windowWidth + endXSpan - this.windowWidth / 2,
|
||||
z / PageBackground.zMax
|
||||
)
|
||||
),
|
||||
this.random.inInterval(
|
||||
mix(topOffset, farTop, z / PageBackground.zMax),
|
||||
mix(this.contentHeight - bottomOffset, farBottom, z / PageBackground.zMax)
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue