diff --git a/package.json b/package.json
index 672cdc3..bcaeb5b 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.3",
"sass-loader": "^9.0.3",
- "sdf-2d": "^0.1.2-alpha",
+ "sdf-2d": "^0.2.0",
"source-map-loader": "^1.1.0",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^2.3.8",
diff --git a/src/index.html b/src/index.html
index 696b476..8e3d0f7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
diff --git a/src/index.ts b/src/index.ts
index 1d78dca..7896910 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,21 +21,16 @@ removeUnnecessaryOutlines();
const deltaTimeCalculator = new DeltaTimeCalculator();
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const info = document.querySelector('#info') as HTMLDivElement;
const errorText = document.querySelector('#error-text') as HTMLParamElement;
-const errors = document.querySelector('#errors') as HTMLDivElement;
const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
const toggleButton = document.querySelector('#toggle-text');
const overlay = document.querySelector('#overlay') as HTMLDivElement;
-let textVisible = false;
+let textVisible = true;
const handleTextToggle = () => {
textVisible = !textVisible;
-
- [info, overlay, errors].forEach(
- (e) => (e.style.visibility = textVisible ? 'inherit' : 'hidden')
- );
- toggleButton.innerHTML = textVisible ? 'Hide text' : 'Show text';
+ overlay.style.visibility = textVisible ? 'visible' : 'hidden';
+ toggleButton.innerHTML = textVisible ? 'Hide insights' : 'Show insights';
if (textVisible) {
toggleButton.classList.remove('off');
} else {
diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts
index 54c0f55..b76aa79 100644
--- a/src/scenes/blob/blob-scene.ts
+++ b/src/scenes/blob/blob-scene.ts
@@ -1,6 +1,7 @@
import { vec2, vec3 } from 'gl-matrix';
import { Circle, CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
+import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Blob } from './blob';
@@ -18,26 +19,24 @@ export class BlobScene implements Scene {
): Promise {
this.canvas = canvas;
this.overlay = overlay;
- this.renderer = await compile(
- canvas,
- [
- Circle.descriptor,
- {
- ...CircleLight.descriptor,
- shaderCombinationSteps: [1, 2],
- },
- Blob.descriptor,
- ],
- [
- vec3.fromValues(0, 0, 0),
- vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
- vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
- ]
- );
+ this.renderer = await compile(canvas, [
+ Circle.descriptor,
+ {
+ ...CircleLight.descriptor,
+ shaderCombinationSteps: [1, 2],
+ },
+ Blob.descriptor,
+ ]);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
shadowLength: 800,
+ colorPalette: [
+ rgb255(0, 0, 0),
+ rgb255(119, 173, 120),
+ rgb255(224, 96, 126),
+ rgb255(224, 96, 126),
+ ],
});
const { width, height } = this.canvas.getBoundingClientRect();
diff --git a/src/scenes/blob/blob.ts b/src/scenes/blob/blob.ts
index 417463a..2a392c9 100644
--- a/src/scenes/blob/blob.ts
+++ b/src/scenes/blob/blob.ts
@@ -35,7 +35,7 @@ export class Blob extends Drawable {
);
minDistance = min(minDistance, res);
- color = mix(1.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
+ color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
}
}
`,
diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts
index cb9aae0..2d4adfc 100644
--- a/src/scenes/rain/rain-scene.ts
+++ b/src/scenes/rain/rain-scene.ts
@@ -1,6 +1,7 @@
-import { vec2, vec3 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
+import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Droplet } from './droplet';
@@ -20,27 +21,23 @@ export class RainScene implements Scene {
): Promise {
this.canvas = canvas;
this.overlay = overlay;
- this.renderer = await compile(
- canvas,
- [
- {
- ...Tunnel.descriptor,
- shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
- },
- {
- ...CircleLight.descriptor,
- shaderCombinationSteps: [2],
- },
- ],
- [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
- );
+ this.renderer = await compile(canvas, [
+ {
+ ...Tunnel.descriptor,
+ shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
+ },
+ {
+ ...CircleLight.descriptor,
+ shaderCombinationSteps: [2],
+ },
+ ]);
this.renderer.setRuntimeSettings({
- ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
- tileMultiplier: 8,
+ ambientLight: rgb(0.2, 0.2, 0.2),
+ colorPalette: [rgb(1, 1, 0), rgb(1, 1, 0), rgb(0.3, 1, 1), rgb(0.3, 1, 1)],
});
- for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {
+ for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
this.droplets.push(new Droplet());
}
}
diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts
index 35130d0..2fd4c3d 100644
--- a/src/scenes/tunnel-scene.ts
+++ b/src/scenes/tunnel-scene.ts
@@ -64,25 +64,22 @@ export class TunnelScene implements Scene {
): Promise {
this.canvas = canvas;
this.overlay = overlay;
- this.renderer = await compile(
- canvas,
- [
- {
- ...InvertedTunnel.descriptor,
- shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
- },
- {
- ...CircleLight.descriptor,
- shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
- },
- ],
- [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)]
- );
+ this.renderer = await compile(canvas, [
+ {
+ ...InvertedTunnel.descriptor,
+ shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
+ },
+ {
+ ...CircleLight.descriptor,
+ shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
+ },
+ ]);
this.renderer.setRuntimeSettings({
isWorldInverted: true,
- ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
+ ambientLight: rgb(0.35, 0.1, 0.45),
shadowLength: 550,
+ colorPalette: [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)],
});
for (let i = 0; i < 200; i++) {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b53c938..3c435b8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -80,7 +80,7 @@ body {
@include card();
font-size: 1.25rem;
- width: 120px;
+ width: 150px;
cursor: pointer;
padding: 0.2em 0.5rem;
background: none;
@@ -92,7 +92,7 @@ body {
transition: opacity 200ms;
@media (max-width: $breakpoint) {
- width: 90px;
+ width: 110px;
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 5fc45fb..ce9fe38 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
- "target": "es6",
+ "target": "es5",
"downlevelIteration": true,
"allowJs": true,
"experimentalDecorators": true,