Minor fixes

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "description": "Some simple demos to showcase the possibilities of this library.",
   "private": true,
-  "main": "index.js",
+  "main": "index.html",
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"",

src/index.html

@@ -24,7 +24,7 @@
     <noscript>Javascript is required for this website.</noscript>
 
     <a id="info" href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
-      SDF-2D
+      <p>SDF-2D</p>
       <img src="static/logo-white.svg" alt="logo" />
     </a>
     <code id="overlay"></code>

src/scenes/blob/blob-scene.ts

@@ -62,7 +62,7 @@ export class BlobScene implements Scene {
 
     const length = vec2.length([width, height]);
 
-    const q = (this.deltaSinceStart % 8000) / 4000;
+    const q = (this.deltaSinceStart % 8000) / 4300;
     this.blob.animate(this.deltaSinceStart);
     [
       new Circle([width / 2, -length / 4], length / 2),

src/scenes/blob/blob.ts

@@ -51,15 +51,16 @@ export class Blob extends Drawable {
 
   public readonly boundingCircleRadius = 200;
 
-  protected readonly headRadius = 70;
+  protected readonly headRadius = 50;
-  protected readonly footRadius = 30;
+  protected readonly footRadius = 20;
 
-  private readonly headOffset = vec2.fromValues(0, 120);
+  private readonly headOffset = vec2.fromValues(0, 80);
-  private leftFootOffset = vec2.fromValues(-30, this.footRadius);
-  private rightFootOffset = vec2.fromValues(30, this.footRadius);
 
-  private leftFootOffsetDefault = vec2.fromValues(-30, this.footRadius);
+  private readonly leftFootOffsetDefault = vec2.fromValues(-20, this.footRadius);
-  private rightFootOffsetDefault = vec2.fromValues(30, this.footRadius);
+  private readonly rightFootOffsetDefault = vec2.fromValues(20, this.footRadius);
+
+  private leftFootOffset = vec2.create();
+  private rightFootOffset = vec2.create();
 
   protected boundingCircle = new Circle(vec2.create(), this.boundingCircleRadius);
   protected head = new Circle(vec2.create(), this.headRadius);
@@ -79,7 +80,7 @@ export class Blob extends Drawable {
   }
 
   public animate(time: number) {
-    const offset = 20;
+    const offset = 15;
     const q = (time % 1000) / 500;
 
     vec2.subtract(

src/scenes/tunnel-scene.ts

@@ -18,7 +18,7 @@ export class TunnelScene implements Scene {
     const canvasSize = this.canvas.getBoundingClientRect();
 
     let previousEnd = vec2.fromValues(0, 200);
-    let previousRadius = 75;
+    let previousRadius = 50;
 
     if (this.tunnels.length > 0) {
       previousEnd = last(this.tunnels).to;
@@ -28,19 +28,21 @@ export class TunnelScene implements Scene {
     let height =
       previousEnd.y +
       Random.getRandomInRange(-canvasSize.height / 3, canvasSize.height / 3);
-    height = clamp(height, 200, canvasSize.height - 200);
 
-    const currentEnd = vec2.fromValues(
+    height = clamp(
-      this.tunnels.length * (canvasSize.width / 6),
+      height,
-      height
+      canvasSize.height / 6 + 50,
+      canvasSize.height - canvasSize.height / 6 + 50
     );
+
+    const currentEnd = vec2.fromValues(this.tunnels.length * 300, height);
     const currentToRadius = (Random.getRandom() * canvasSize.height) / 6 + 50;
 
     this.tunnels.push(
       new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius)
     );
 
-    if (this.tunnels.length % 5 == 0) {
+    if (this.tunnels.length % 3 == 0) {
       this.lights.push(
         new CircleLight(
           previousEnd,

src/styles/index.scss

@@ -34,23 +34,29 @@ body {
     position: absolute;
   }
 
+  #info,
+  h1 {
+    font-size: 2.25rem;
+  }
+
   #info {
     @include card();
+    @include center-children();
 
-    font-size: 2.5rem;
     padding: 0.25rem 0.5rem;
     text-decoration: none;
 
-    @include center-children();
+    p {
+      padding-top: 2px;
+    }
 
     img {
-      @include square(72px);
+      @include square(64px);
       padding-left: 8px;
     }
 
     @media (max-width: $breakpoint) {
       font-size: 2rem;
-      padding: 0rem 0.5rem;
 
       img {
         @include square(40px);
@@ -104,7 +110,6 @@ body {
       padding: 1rem;
 
       h1 {
-        font-size: 3rem;
         padding: 1rem;
         text-align: center;
       }

tsconfig.json

@@ -8,7 +8,7 @@
     "allowJs": true,
     "experimentalDecorators": true,
     "moduleResolution": "Node",
-    "module": "commonjs",
+    "module": "es6",
-    "lib": ["es2017", "dom"]
+    "lib": ["es2016", "dom"]
   }
 }