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

WIP

Browse source
This commit is contained in:
Schmelczer András 2020-01-02 15:38:30 +01:00
parent 7f18e75647
commit 7e77ed2ea3
6 changed files with 101 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.idea/workspace.xml generated
View file

@ -3,15 +3,11 @@
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -51,7 +47,7 @@
<property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
<property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
@ -112,6 +108,7 @@
<workItem from="1577639259221" duration="3798000" />
<workItem from="1577662869335" duration="6536000" />
<workItem from="1577702567470" duration="3227000" />
<workItem from="1577955137825" duration="6471000" />
</task>
<servers />
</component>

2
src/framework/helper.ts
View file

@ -91,5 +91,3 @@ export const range = ({
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;
export const isChrome = (): boolean => !!navigator.appVersion.match(/chrome/i);

5
src/page/background/background.html.ts
View file

@ -2,8 +2,5 @@ import { html } from "../../model/misc";
import "./background.scss";
export const generate = (): html => `
<section id="background-container">
<section id="background"></section>
</section>
<div id="edge-hack"></div>
<canvas id="background"></canvas>
`;

50
src/page/background/background.scss
View file

@ -1,48 +1,12 @@
@import "../../style/vars";
@import "../../style/mixins";
#background-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
-webkit-overflow-scrolling: touch;
perspective: 5px;
perspective-origin: center center;
overflow: hidden;
#background {
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
transform-style: flat;
div {
position: -webkit-sticky;
position: absolute;
left: 0;
top: 0;
border-radius: 100px;
width: 140px;
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}
}
#edge-hack {
canvas#background {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: -10;
background-color: hotpink;
}

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

@ -4,7 +4,7 @@ import {
createElement,
randomFactory,
sum,
isChrome
randomInInterval
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob";
@ -13,20 +13,21 @@ import { generate } from "./background.html";
export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350;
private previousWidth: number;
private previousHeight: number;
private previousScrollPositionToSet: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly baseDeltaTime = (1 / 30) * 1000;
private readonly maxBaseSpeedInPixels = 20;
private readonly perspective = 5;
private readonly zMin = 10;
private readonly zMax = 30;
private width: number;
private height: number;
private scrollPosition: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly ctx: RenderingContext;
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate()));
if (isChrome()) {
this.query("#background").style.transformStyle = "preserve-3d";
}
Blob.initialize(10, 30, 5);
const canvas = createElement(generate()) as HTMLCanvasElement;
this.ctx = canvas.getContext("2d");
this.setElement(canvas);
}
protected handleEvent(event: PageEvent, parent: PageElement) {
@ -46,8 +47,46 @@ export class PageBackground extends PageElement {
);
}
public drawBlob(blob: Blob) {
const topLeft = this.convertFrom3Dto2D(blob.topLeft);
const bottomRight = this.convertFrom3Dto2D(blob.bottomRight);
}
private convertFrom3Dto2D(point: [number, number, number]): [number, number] {
let [x, y, z] = point;
return [
(z / this.perspective) * (this.width / 2 - x) + x,
(z / this.perspective) * (this.height / 2 - y) + y - this.scrollPosition
];
}
private randomWithKnownZ(
random: () => number,
viewportSize: number,
scrollSize: number,
startOffset = 0,
endOffset = 0
): number {
const m = 1 + this.z / Blob.perspective;
const variableOffset = (offset, q) =>
Math.max(
0,
offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
);
startOffset = variableOffset(startOffset, 1);
endOffset = variableOffset(endOffset, 0.2);
const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
const l =
scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random);
}
private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
const deltaTime = this.getDeltaTime(timestamp);
/*const deltaTime = this.getDeltaTime(timestamp);
const scrollPositionToSet = parent.getElement().scrollTop;
const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
this.previousScrollPositionToSet = scrollPositionToSet;
@ -70,7 +109,7 @@ export class PageBackground extends PageElement {
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
);*/
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
@ -105,14 +144,14 @@ export class PageBackground extends PageElement {
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
this.query("#background").appendChild(blob.htmlElement);
// this.query("#background").appendChild(blob.htmlElement);
this.blobs.push(blob);
}
const random = randomFactory(2662);
this.blobs.forEach((b, i) => {
if (i >= requiredBlobCount) {
/*if (i >= requiredBlobCount) {
b.hide();
} else {
b.transform(
@ -124,7 +163,7 @@ export class PageBackground extends PageElement {
getHeight(this.end.getElement())
);
b.show();
}
}*/
});
}

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

@ -1,6 +1,5 @@
import {
choose,
createElement,
mixColors,
randomFactory,
randomInInterval
@ -9,96 +8,52 @@ import {
export class Blob {
private static readonly creatorRandom = randomFactory(44);
private static readonly colors = ["#fff9e0", "#ffd6d6"];
private static zMin: number;
private static zMax: number;
private static perspective: number;
public static initialize(zMin: number, zMax: number, perspective: number) {
Blob.zMin = zMin;
Blob.zMax = zMax;
Blob.perspective = perspective;
}
private readonly z = randomInInterval(
Blob.zMin,
Blob.zMax,
Blob.creatorRandom
);
private readonly x = Blob.creatorRandom();
private readonly y = Blob.creatorRandom();
private readonly z = Blob.creatorRandom();
private readonly rotation = 20;
private readonly width = 140;
private readonly height = randomInInterval(160, 740, Blob.creatorRandom);
private readonly color: string;
private readonly element: HTMLElement = createElement("<div></div>");
constructor() {
this.element.style.backgroundColor =
this.color =
"#" +
mixColors(
"#ffffff",
choose(Blob.colors, Blob.creatorRandom),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval(
160,
740,
Blob.creatorRandom
)}px`;
mixColors("#ffffff", choose(Blob.colors, Blob.creatorRandom), this.z);
}
get htmlElement(): HTMLElement {
return this.element;
public get topLeft(): [number, number, number] {
return [this.x, this.y, this.z];
}
private randomWithKnownZ(
random: () => number,
viewportSize: number,
scrollSize: number,
startOffset = 0,
endOffset = 0
): number {
const m = 1 + this.z / Blob.perspective;
const variableOffset = (offset, q) =>
Math.max(
0,
offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
);
startOffset = variableOffset(startOffset, 1);
endOffset = variableOffset(endOffset, 0.2);
const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
const l =
scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random);
public get bottomRight(): [number, number, number] {
return [this.x + this.width, this.y + this.height, this.z];
}
public show() {
this.element.style.opacity = "1";
}
public hide() {
this.element.style.opacity = "0";
}
public transform(
random: () => number,
width: number,
viewportHeight: number,
scrollHeight: number,
startOffset: number,
endOffset: number
public draw(
ctx: CanvasRenderingContext2D,
position: [number, number],
size: [number, number]
) {
const value = `
translateX(${this.randomWithKnownZ(random, width, width)}px)
translateY(${this.randomWithKnownZ(
random,
viewportHeight,
scrollHeight,
startOffset,
endOffset
)}px)
translateZ(${-this.z}px)
rotate(-20deg)
`;
this.element.style["-webkit-transform"] = value;
this.element.style.transform = value;
const [x, y] = position;
const [width, height] = size;
const radius = Math.min(width, height) / 2;
ctx.save();
ctx.translate(-x, -y);
ctx.rotate(this.rotation);
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.arcTo(x + width, y, x + width, y + height, radius);
ctx.arcTo(x + width, y + height, x, y + height, radius);
ctx.arcTo(x, y + height, x, y, radius);
ctx.arcTo(x, y, x + width, y, radius);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}