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

Refactor background

Browse source
This commit is contained in:
schmelczerandras 2020-11-19 19:45:28 +01:00
parent caacb5b3e5
commit f8764f83c8
4 changed files with 48 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/helper/mix-colors.ts
View file

@ -1,33 +0,0 @@
export type hex = string;
export type rgb = [number, number, number];
export const mixColors = (hexColorA: hex, hexColorB: hex, quantityA: number): hex => {
const colorA = hexToRGB(hexColorA);
const colorB = hexToRGB(hexColorB);
const mixedColor: rgb = [
mix(colorA[0], colorB[0], quantityA),
mix(colorA[1], colorB[1], quantityA),
mix(colorA[2], colorB[2], quantityA),
];
return rgbToHex(mixedColor);
};
const hexToRGB = (hex: hex): rgb => {
const [r1, r2, g1, g2, b1, b2] = normalizeHex(hex);
return [parseInt(r1 + r2, 16), parseInt(g1 + g2, 16), parseInt(b1 + b2, 16)];
};
const normalizeHex = (hex: hex): hex => {
hex = hex.trim();
if (hex[0] === '#') {
hex = hex.substr(1);
}
return hex;
};
const mix = (a: number, b: number, q: number): number => a * q + b * (1 - q);
const rgbToHex = (rgb: rgb): hex =>
'#' + rgb.map(n => (n < 16 ? '0' : '') + Math.round(n).toString(16)).join('');

2
src/helper/mix.ts Normal file
View file

@ -0,0 +1,2 @@
export const mix = (from: number, to: number, q: number): number =>
from * (1 - q) + to * q;

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

@ -12,12 +12,11 @@ import { OptionalEvent } from '../../events/optional-event';
import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event';
export class PageBackground extends PageElement {
public static readonly BLOB_SPACING = 325;
public static readonly MIN_BLOB_COUNT = 30;
public static readonly PERSPECTIVE = 5;
public static readonly Z_MIN = 10;
public static readonly Z_MAX = 30;
public static readonly ANIMATION_TIME = 250;
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 backgroundSize: Vec2;
private scrollPosition = 0;
@ -39,7 +38,7 @@ export class PageBackground extends PageElement {
public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
this.parent = event.parent;
this.bindListeners();
requestAnimationFrame(this.draw.bind(this));
return super.handleOnLoadEvent(event);
}
@ -49,18 +48,10 @@ export class PageBackground extends PageElement {
return super.handleOnPageThemeChangedEvent(event);
}
private bindListeners() {
addEventListener('load', e => {
this.resize();
this.createBlobs();
this.redraw(e.timeStamp);
});
}
private createBlobs() {
const requiredBlobCount = Math.max(
PageBackground.MIN_BLOB_COUNT,
(this.backgroundSize.x * this.backgroundSize.y) / PageBackground.BLOB_SPACING ** 2
PageBackground.minBlobCount,
(this.backgroundSize.x * this.backgroundSize.y) / PageBackground.blobSpacing ** 2
);
while (requiredBlobCount > this.blobs.length) {
@ -68,11 +59,6 @@ export class PageBackground extends PageElement {
}
}
private resize() {
this.resizeCanvas();
this.resizeBackground();
}
private resizeCanvas() {
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
@ -96,8 +82,8 @@ export class PageBackground extends PageElement {
Math.max(
0,
offset -
((blob.z - PageBackground.Z_MIN) /
(PageBackground.Z_MAX - PageBackground.Z_MIN)) *
((blob.z - PageBackground.zMin) /
(PageBackground.zMax - PageBackground.zMin)) *
offset *
q
);
@ -120,8 +106,10 @@ export class PageBackground extends PageElement {
return [this.start, ...this.inBetween, this.end].map(e => e.htmlRoot);
}
private redraw(timestamp: DOMHighResTimeStamp) {
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);
@ -142,7 +130,7 @@ export class PageBackground extends PageElement {
}
});
requestAnimationFrame(timestamp => this.redraw(timestamp));
requestAnimationFrame(this.draw.bind(this));
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
@ -152,12 +140,12 @@ export class PageBackground extends PageElement {
}
private convertFrom3Dto2D(p: Vec3): Vec2 {
const m = PageBackground.PERSPECTIVE / (PageBackground.PERSPECTIVE + p.z);
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;
const m = 1 + z / PageBackground.perspective;
return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
}

57
src/page/background/blob.ts
View file

@ -1,15 +1,18 @@
import { Vec2 } from './vec2';
import { Vec3 } from './vec3';
import { mixColors } from '../../helper/mix-colors';
import { Random } from '../../helper/random';
import { Animation } from './animation';
import { PageBackground } from './background';
import { mix } from '../../helper/mix';
export class Blob {
private static readonly DARK_COLORS = ['#2c477a'];
private static readonly LIGHT_COLORS = ['#fff9e0', '#ffd6d6'];
private static readonly ROTATION = (-20 / 180) * Math.PI;
private static readonly CREATOR_RANDOM = new Random(51);
private static readonly darkColors = [new Vec3(44, 71, 122)];
private static readonly lightColors = [
new Vec3(255, 249, 224),
new Vec3(255, 214, 214),
];
private static readonly creatorRandom = new Random(51);
private static colorPickerRandom = new Random(132);
private static isDarkThemed = false;
@ -19,44 +22,43 @@ export class Blob {
Blob.isDarkThemed = isDarkThemed;
}
public readonly z = Blob.CREATOR_RANDOM.randomInInterval(
PageBackground.Z_MIN,
PageBackground.Z_MAX
public readonly z = Blob.creatorRandom.randomInInterval(
PageBackground.zMin,
PageBackground.zMax
);
private color: Animation<string>;
private color: Animation<Vec3>;
private readonly positionQ = new Vec2(
Blob.CREATOR_RANDOM.next,
Blob.CREATOR_RANDOM.next
);
private readonly positionQ = new Vec2(Blob.creatorRandom.next, Blob.creatorRandom.next);
private _positionScale = new Vec2(0, 0);
private _positionOffset = new Vec2(0, 0);
private opacity: number;
private readonly _size = new Vec2(140, Blob.CREATOR_RANDOM.randomInInterval(260, 740));
private readonly _size = new Vec2(140, Blob.creatorRandom.randomInInterval(260, 740));
public constructor() {
this.opacity =
1 - (this.z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin);
this.decideColor();
}
public decideColor() {
const target = mixColors(
Blob.isDarkThemed ? '#242638' : '#ffffff',
Blob.colorPickerRandom.choose(
Blob.isDarkThemed ? Blob.DARK_COLORS : Blob.LIGHT_COLORS
),
(this.z - PageBackground.Z_MIN) / (PageBackground.Z_MAX - PageBackground.Z_MIN)
const target = Blob.colorPickerRandom.choose(
Blob.isDarkThemed ? Blob.darkColors : Blob.lightColors
);
this.color = new Animation<string>(
this.color = new Animation<Vec3>(
this.color ? this.color.value : target,
target,
250,
(f, t, q) => mixColors(f, t, 1 - q)
125,
(f, t, q) => {
return new Vec3(mix(f.x, t.x, q), mix(f.y, t.y, q), mix(f.z, t.z, q));
}
);
}
public step(value) {
this.color?.step(value);
public step(deltaTime: number) {
this.color?.step(deltaTime);
}
public get topLeft(): Vec3 {
@ -82,14 +84,15 @@ export class Blob {
ctx.save();
ctx.translate(position.x, position.y);
ctx.rotate(Blob.ROTATION);
ctx.rotate((-20 / 180) * Math.PI);
ctx.beginPath();
ctx.arc(0, size.x / 2, size.x / 2, Math.PI, 0);
ctx.arc(0, size.y - size.x / 2, size.x / 2, 0, Math.PI);
ctx.closePath();
ctx.fillStyle = this.color.value;
const { x, y, z } = this.color.value;
ctx.fillStyle = `rgba(${x}, ${y}, ${z}, ${this.opacity})`;
ctx.fill();
ctx.restore();