diff --git a/package.json b/package.json index d569df2..ca36a11 100644 --- a/package.json +++ b/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\"", diff --git a/src/index.html b/src/index.html index b87696b..5bd02e6 100644 --- a/src/index.html +++ b/src/index.html @@ -24,7 +24,7 @@ - SDF-2D +

SDF-2D

logo
diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts index a0bca48..54c0f55 100644 --- a/src/scenes/blob/blob-scene.ts +++ b/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), diff --git a/src/scenes/blob/blob.ts b/src/scenes/blob/blob.ts index 50409bf..703d547 100644 --- a/src/scenes/blob/blob.ts +++ b/src/scenes/blob/blob.ts @@ -51,15 +51,16 @@ export class Blob extends Drawable { public readonly boundingCircleRadius = 200; - protected readonly headRadius = 70; - protected readonly footRadius = 30; + protected readonly headRadius = 50; + protected readonly footRadius = 20; - private readonly headOffset = vec2.fromValues(0, 120); - private leftFootOffset = vec2.fromValues(-30, this.footRadius); - private rightFootOffset = vec2.fromValues(30, this.footRadius); + private readonly headOffset = vec2.fromValues(0, 80); - private leftFootOffsetDefault = vec2.fromValues(-30, this.footRadius); - private rightFootOffsetDefault = vec2.fromValues(30, this.footRadius); + private readonly leftFootOffsetDefault = vec2.fromValues(-20, 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( diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index 488b160..19811b0 100644 --- a/src/scenes/tunnel-scene.ts +++ b/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( - this.tunnels.length * (canvasSize.width / 6), - height + height = clamp( + 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, diff --git a/src/styles/index.scss b/src/styles/index.scss index a008404..6183808 100644 --- a/src/styles/index.scss +++ b/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; } diff --git a/tsconfig.json b/tsconfig.json index 37fe606..5fc45fb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,7 @@ "allowJs": true, "experimentalDecorators": true, "moduleResolution": "Node", - "module": "commonjs", - "lib": ["es2017", "dom"] + "module": "es6", + "lib": ["es2016", "dom"] } }