SDF-2D
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"]
}
}