diff --git a/package.json b/package.json index 738ed4e..ef8e644 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.2.0-fix", + "sdf-2d": "^0.3.0", "source-map-loader": "^1.1.0", "svg-url-loader": "^6.0.0", "terser-webpack-plugin": "^2.3.8", diff --git a/src/index.ts b/src/index.ts index 7896910..457ae83 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,7 +14,7 @@ import { TunnelScene } from './scenes/tunnel-scene'; import './styles/index.scss'; const scenes = [TunnelScene, RainScene, BlobScene]; -const sceneIntervalInSeconds = 8; +const sceneIntervalInSeconds = 800; glMatrix.setMatrixArrayType(Array); removeUnnecessaryOutlines(); diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts index b76aa79..342ef5f 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 { vec2 } from 'gl-matrix'; +import { Circle, CircleLight, compile, Renderer } from 'sdf-2d'; import { prettyPrint } from '../../helper/pretty-print'; +import { rgb } from '../../helper/rgb'; import { rgb255 } from '../../helper/rgb255'; import { Scene } from '../scene'; import { Blob } from './blob'; @@ -10,9 +11,6 @@ export class BlobScene implements Scene { private canvas: HTMLCanvasElement; private overlay: HTMLDivElement; - private tunnels: Array = []; - private lights: Array = []; - public async initialize( canvas: HTMLCanvasElement, overlay: HTMLDivElement @@ -23,18 +21,17 @@ export class BlobScene implements Scene { Circle.descriptor, { ...CircleLight.descriptor, - shaderCombinationSteps: [1, 2], + shaderCombinationSteps: [0, 1, 2], }, Blob.descriptor, ]); this.renderer.setRuntimeSettings({ - ambientLight: vec3.fromValues(0.35, 0.1, 0.45), - shadowLength: 800, + ambientLight: rgb255(89, 25, 115), colorPalette: [ rgb255(0, 0, 0), - rgb255(119, 173, 120), - rgb255(224, 96, 126), + rgb255(0, 0, 0), + rgb255(119, 143, 120), rgb255(224, 96, 126), ], }); @@ -71,7 +68,7 @@ export class BlobScene implements Scene { (Math.cos((1 - q) * Math.PI) * length) / 2 + width / 2, (Math.sin((1 - q) * Math.PI) * length) / 2, ], - [1, 0.8, 0], + rgb(1, 0.8, 0), 1 ), new CircleLight( @@ -79,7 +76,7 @@ export class BlobScene implements Scene { (Math.cos(-q * Math.PI) * length) / 2 + width / 2, (Math.sin(-q * Math.PI) * length) / 2, ], - [0, 0.8, 1], + rgb(0, 0.8, 1), 1 ), ].forEach((d) => this.renderer.addDrawable(d)); diff --git a/src/scenes/blob/blob.ts b/src/scenes/blob/blob.ts index 2a392c9..c7e6b74 100644 --- a/src/scenes/blob/blob.ts +++ b/src/scenes/blob/blob.ts @@ -19,15 +19,18 @@ export class Blob extends Drawable { return -log2( res )/k; } - float circleDistance(vec2 circleCenter, float radius) { - return distance(position, circleCenter) - radius; + float circleDistance(vec2 circleCenter, float radius, vec2 target) { + return distance(target, circleCenter) - radius; } - void blobMinDistance(inout float minDistance, inout float color) { + float blobMinDistance(vec2 target, out float colorIndex) { + float minDistance = 1000.0; + colorIndex = 3.0; + for (int i = 0; i < BLOB_COUNT; i++) { - float headDistance = circleDistance(headCenters[i], headRadii[i]); - float leftFootDistance = circleDistance(leftFootCenters[i], footRadii[i]); - float rightFootDistance = circleDistance(rightFootCenters[i], footRadii[i]); + float headDistance = circleDistance(headCenters[i], headRadii[i], target); + float leftFootDistance = circleDistance(leftFootCenters[i], footRadii[i], target); + float rightFootDistance = circleDistance(rightFootCenters[i], footRadii[i], target); float res = min( smoothMin(headDistance, leftFootDistance), @@ -35,8 +38,9 @@ export class Blob extends Drawable { ); minDistance = min(minDistance, res); - color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res)); } + + return minDistance; } `, distanceFunctionName: 'blobMinDistance', diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index 2d4adfc..1398b49 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/src/scenes/rain/rain-scene.ts @@ -1,4 +1,4 @@ -import { vec2 } from 'gl-matrix'; +import { vec2, vec3 } from 'gl-matrix'; import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d'; import { prettyPrint } from '../../helper/pretty-print'; import { rgb } from '../../helper/rgb'; @@ -34,7 +34,13 @@ export class RainScene implements Scene { this.renderer.setRuntimeSettings({ 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)], + backgroundColor: vec3.fromValues(1, 1, 1), + colorPalette: [ + rgb(1, 1, 1), + vec3.fromValues(0.3, 1, 1), + rgb(1, 1, 0), + rgb(0.3, 1, 1), + ], }); for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) { diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index 2fd4c3d..9aea2c6 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -43,7 +43,7 @@ export class TunnelScene implements Scene { new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius) ); - if (this.tunnels.length % 3 == 0) { + if (this.tunnels.length % 4 == 0) { this.lights.push( new CircleLight( previousEnd, @@ -52,7 +52,7 @@ export class TunnelScene implements Scene { Random.getRandom(), Random.getRandom(), ]), - 0.35 + 0.25 ) ); } @@ -78,8 +78,8 @@ export class TunnelScene implements Scene { this.renderer.setRuntimeSettings({ isWorldInverted: true, 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)], + backgroundColor: rgb(1, 1, 1), + colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)], }); for (let i = 0; i < 200; i++) {