WIP

.idea/workspace.xml

@@ -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>

src/framework/helper.ts

@@ -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);

src/page/background/background.html.ts

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

src/page/background/background.scss

@@ -1,48 +1,12 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-#background-container {
+canvas#background {
-  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 {
   position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  z-index: -10;
+  background-color: hotpink;
 }

src/page/background/background.ts

@@ -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()));
+    const canvas = createElement(generate()) as HTMLCanvasElement;
-    if (isChrome()) {
+    this.ctx = canvas.getContext("2d");
-      this.query("#background").style.transformStyle = "preserve-3d";
+    this.setElement(canvas);
-    }
-    Blob.initialize(10, 30, 5);
   }
 
   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();
-      }
+      }*/
     });
   }
 

src/page/background/blob.ts

@@ -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(
+  private readonly x = Blob.creatorRandom();
-    Blob.zMin,
+  private readonly y = Blob.creatorRandom();
-    Blob.zMax,
+  private readonly z = Blob.creatorRandom();
-    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(
+      mixColors("#ffffff", choose(Blob.colors, Blob.creatorRandom), this.z);
-        "#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`;
   }
 
-  get htmlElement(): HTMLElement {
+  public get topLeft(): [number, number, number] {
-    return this.element;
+    return [this.x, this.y, this.z];
   }
 
-  private randomWithKnownZ(
+  public get bottomRight(): [number, number, number] {
-    random: () => number,
+    return [this.x + this.width, this.y + this.height, this.z];
-    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 show() {
+  public draw(
-    this.element.style.opacity = "1";
+    ctx: CanvasRenderingContext2D,
-  }
+    position: [number, number],
-
+    size: [number, number]
-  public hide() {
-    this.element.style.opacity = "0";
-  }
-
-  public transform(
-    random: () => number,
-    width: number,
-    viewportHeight: number,
-    scrollHeight: number,
-    startOffset: number,
-    endOffset: number
   ) {
-    const value = `
+    const [x, y] = position;
-      translateX(${this.randomWithKnownZ(random, width, width)}px)
+    const [width, height] = size;
-      translateY(${this.randomWithKnownZ(
+    const radius = Math.min(width, height) / 2;
-        random,
+
-        viewportHeight,
+    ctx.save();
-        scrollHeight,
+    ctx.translate(-x, -y);
-        startOffset,
+    ctx.rotate(this.rotation);
-        endOffset
+    ctx.fillStyle = this.color;
-      )}px)
+
-      translateZ(${-this.z}px)
+    ctx.beginPath();
-      rotate(-20deg)
+    ctx.moveTo(x + radius, y);
-    `;
+    ctx.arcTo(x + width, y, x + width, y + height, radius);
-    this.element.style["-webkit-transform"] = value;
+    ctx.arcTo(x + width, y + height, x, y + height, radius);
-    this.element.style.transform = value;
+    ctx.arcTo(x, y + height, x, y, radius);
+    ctx.arcTo(x, y, x + width, y, radius);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.restore();
   }
 }