From f0a9c1df681e66de16500dca74130a28566f7148 Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Tue, 13 Oct 2020 23:02:43 +0200 Subject: [PATCH] Update to use new sdf-2d API --- package.json | 2 +- src/helper/circle.ts | 13 +++++++++++++ src/helper/rgb.ts | 3 --- src/helper/rgb255.ts | 4 ---- src/helper/rgba.ts | 4 ---- src/helper/rgba255.ts | 4 ---- src/scenes/blob/blob-scene.ts | 6 +++--- src/scenes/blob/blob.ts | 9 +++++---- src/scenes/metaball/metaball-scene.ts | 6 ++---- src/scenes/metaball/metaball.ts | 4 +++- src/scenes/rain/droplet.ts | 5 +++-- src/scenes/rain/rain-scene.ts | 7 ++----- src/scenes/tunnel-scene.ts | 12 ++++++------ 13 files changed, 38 insertions(+), 41 deletions(-) create mode 100644 src/helper/circle.ts delete mode 100644 src/helper/rgb.ts delete mode 100644 src/helper/rgb255.ts delete mode 100644 src/helper/rgba.ts delete mode 100644 src/helper/rgba255.ts diff --git a/package.json b/package.json index bf7fc29..c3daa84 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.4.0", + "sdf-2d": "^0.5.0", "source-map-loader": "^1.1.0", "svg-url-loader": "^6.0.0", "terser-webpack-plugin": "^2.3.8", diff --git a/src/helper/circle.ts b/src/helper/circle.ts new file mode 100644 index 0000000..74f30fb --- /dev/null +++ b/src/helper/circle.ts @@ -0,0 +1,13 @@ +import { vec2 } from 'gl-matrix'; + +export class Circle { + constructor(public center: vec2, public radius: number) {} + + public distance(target: vec2): number { + return vec2.distance(this.center, target) - this.radius; + } + + public distanceBetween(target: Circle): number { + return vec2.distance(target.center, this.center) - this.radius - target.radius; + } +} diff --git a/src/helper/rgb.ts b/src/helper/rgb.ts deleted file mode 100644 index a6ef20a..0000000 --- a/src/helper/rgb.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { vec3 } from 'gl-matrix'; - -export const rgb = (r: number, g: number, b: number): vec3 => vec3.fromValues(r, g, b); diff --git a/src/helper/rgb255.ts b/src/helper/rgb255.ts deleted file mode 100644 index 56c47ff..0000000 --- a/src/helper/rgb255.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { vec3 } from 'gl-matrix'; - -export const rgb255 = (r: number, g: number, b: number): vec3 => - vec3.fromValues(r / 255, g / 255, b / 255); diff --git a/src/helper/rgba.ts b/src/helper/rgba.ts deleted file mode 100644 index 39aae1e..0000000 --- a/src/helper/rgba.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { vec4 } from 'gl-matrix'; - -export const rgba = (r: number, g: number, b: number, a: number): vec4 => - vec4.fromValues(r, g, b, a); diff --git a/src/helper/rgba255.ts b/src/helper/rgba255.ts deleted file mode 100644 index 00b7f5a..0000000 --- a/src/helper/rgba255.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { vec4 } from 'gl-matrix'; - -export const rgba255 = (r: number, g: number, b: number, a: number): vec4 => - vec4.fromValues(r / 255, g / 255, b / 255, a / 255); diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts index 854448b..f668a62 100644 --- a/src/scenes/blob/blob-scene.ts +++ b/src/scenes/blob/blob-scene.ts @@ -1,11 +1,11 @@ import { vec2 } from 'gl-matrix'; -import { Circle, CircleLight, compile, Renderer } from 'sdf-2d'; +import { CircleFactory, CircleLight, compile, Renderer, rgb, rgb255 } 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'; +const Circle = CircleFactory(rgb255(119, 143, 120)); + export class BlobScene implements Scene { private renderer: Renderer; private canvas: HTMLCanvasElement; diff --git a/src/scenes/blob/blob.ts b/src/scenes/blob/blob.ts index 5aa0ffa..b5a56fc 100644 --- a/src/scenes/blob/blob.ts +++ b/src/scenes/blob/blob.ts @@ -1,5 +1,6 @@ import { mat2d, vec2 } from 'gl-matrix'; -import { Circle, Drawable, DrawableDescriptor } from 'sdf-2d'; +import { Drawable, DrawableDescriptor } from 'sdf-2d'; +import { Circle } from '../../helper/circle'; export class Blob extends Drawable { public static descriptor: DrawableDescriptor = { @@ -22,9 +23,9 @@ export class Blob extends Drawable { return distance(target, circleCenter) - radius; } - float blobMinDistance(vec2 target, out float colorIndex) { + float blobMinDistance(vec2 target, out vec4 color) { float minDistance = 1000.0; - colorIndex = 3.0; + color = readFromPalette(3); for (int i = 0; i < BLOB_COUNT; i++) { float headDistance = circleDistance(headCenters[i], headRadii[i], target); @@ -124,7 +125,7 @@ export class Blob extends Drawable { } public minDistance(target: vec2): number { - return this.boundingCircle.minDistance(target); + return this.boundingCircle.distance(target); } protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any { diff --git a/src/scenes/metaball/metaball-scene.ts b/src/scenes/metaball/metaball-scene.ts index 4211af0..f1f0926 100644 --- a/src/scenes/metaball/metaball-scene.ts +++ b/src/scenes/metaball/metaball-scene.ts @@ -1,11 +1,9 @@ import { vec2 } from 'gl-matrix'; -import { compile, Flashlight, MetaCircle, Renderer } from 'sdf-2d'; +import { compile, Flashlight, Renderer, rgb, rgb255 } from 'sdf-2d'; import { prettyPrint } from '../../helper/pretty-print'; import { Random } from '../../helper/random'; -import { rgb } from '../../helper/rgb'; -import { rgb255 } from '../../helper/rgb255'; import { Scene } from '../scene'; -import { Metaball } from './metaball'; +import { Metaball, MetaCircle } from './metaball'; export class MetaballScene implements Scene { private circles: Array = []; diff --git a/src/scenes/metaball/metaball.ts b/src/scenes/metaball/metaball.ts index 39970cc..e007a14 100644 --- a/src/scenes/metaball/metaball.ts +++ b/src/scenes/metaball/metaball.ts @@ -1,7 +1,9 @@ import { vec2 } from 'gl-matrix'; -import { MetaCircle } from 'sdf-2d'; +import { MetaCircleFactory } from 'sdf-2d'; import { Random } from '../../helper/random'; +export const MetaCircle = MetaCircleFactory(5); + export class Metaball { public shape = new MetaCircle(vec2.create(), Random.getRandomInRange(0.025, 0.075)); diff --git a/src/scenes/rain/droplet.ts b/src/scenes/rain/droplet.ts index 9585e2d..c23c4ff 100644 --- a/src/scenes/rain/droplet.ts +++ b/src/scenes/rain/droplet.ts @@ -1,9 +1,10 @@ import { vec2 } from 'gl-matrix'; -import { Droplet } from 'sdf-2d'; +import { DropletFactory } from 'sdf-2d'; import { Random } from '../../helper/random'; +export const Droplet = DropletFactory(1); export class DropletWrapper { - public readonly drawable: Droplet; + public readonly drawable: InstanceType; private speed = Random.getRandom() * 0.2 + 0.2; private position = vec2.fromValues( diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index 231041b..84703c0 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/src/scenes/rain/rain-scene.ts @@ -1,10 +1,8 @@ import { vec2 } from 'gl-matrix'; -import { CircleLight, compile, Droplet, Renderer } from 'sdf-2d'; +import { CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d'; import { prettyPrint } from '../../helper/pretty-print'; -import { rgb } from '../../helper/rgb'; -import { rgb255 } from '../../helper/rgb255'; import { Scene } from '../scene'; -import { DropletWrapper } from './droplet'; +import { Droplet, DropletWrapper } from './droplet'; export class RainScene implements Scene { private droplets: Array = []; @@ -34,7 +32,6 @@ export class RainScene implements Scene { this.renderer.setRuntimeSettings({ ambientLight: rgb(0.2, 0.2, 0.2), - backgroundColor: rgb(1, 1, 1), colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)], }); diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index d37f3ca..c83d9e5 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -3,25 +3,26 @@ import { CircleLight, compile, FilteringOptions, - InvertedTunnel, + InvertedTunnelFactory, Renderer, renderNoise, + rgb, WrapOptions, } from 'sdf-2d'; import { clamp } from '../helper/clamp'; import { last } from '../helper/last'; import { prettyPrint } from '../helper/pretty-print'; import { Random } from '../helper/random'; -import { rgb } from '../helper/rgb'; -import { rgba } from '../helper/rgba'; import { Scene } from './scene'; +const InvertedTunnel = InvertedTunnelFactory(3); + export class TunnelScene implements Scene { private renderer: Renderer; private canvas: HTMLCanvasElement; private overlay: HTMLDivElement; - private tunnels: Array = []; + private tunnels: Array> = []; private lights: Array = []; private generateTunnel() { @@ -71,7 +72,7 @@ export class TunnelScene implements Scene { canvas: HTMLCanvasElement, overlay: HTMLDivElement ): Promise { - const noiseTexture = await renderNoise([1024, 1], 60, 1 / 8); + const noiseTexture = await renderNoise([1024, 1], 15, 1); this.canvas = canvas; this.overlay = overlay; @@ -89,7 +90,6 @@ export class TunnelScene implements Scene { this.renderer.setRuntimeSettings({ isWorldInverted: true, ambientLight: rgb(0.35, 0.1, 0.45), - backgroundColor: rgba(1, 1, 1, 1), colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)], textures: { noiseTexture: {