Add metacircle

src/drawables/shapes/droplet.ts

@@ -0,0 +1,95 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { clamp01 } from '../../helper/clamp';
+import { mix } from '../../helper/mix';
+import { Drawable } from '../drawable';
+import { DrawableDescriptor } from '../drawable-descriptor';
+
+/**
+ * @category Drawable
+ */
+export class Droplet extends Drawable {
+  public static descriptor: DrawableDescriptor = {
+    sdf: {
+      shader: `
+        uniform vec2 froms[DROPLET_COUNT];
+        uniform vec2 toFromDeltas[DROPLET_COUNT];
+        uniform float fromRadii[DROPLET_COUNT];
+        uniform float toRadii[DROPLET_COUNT];
+
+        float dropletMinDistance(vec2 target, out float colorIndex) {
+          colorIndex = 1.0;
+
+          float minDistance = 1000.0;
+          for (int i = 0; i < DROPLET_COUNT; i++) {
+            vec2 targetFromDelta = target - froms[i];
+            
+            float h = clamp(
+                dot(targetFromDelta, toFromDeltas[i])
+              / dot(toFromDeltas[i], toFromDeltas[i]),
+              0.0, 1.0
+            );
+
+            float currentDistance = -mix(
+              fromRadii[i], toRadii[i], h
+            ) + distance(
+              targetFromDelta, toFromDeltas[i] * h
+            );
+
+            minDistance = min(minDistance, currentDistance);
+          }
+
+          return minDistance;
+        }
+      `,
+      distanceFunctionName: 'dropletMinDistance',
+    },
+    propertyUniformMapping: {
+      from: 'froms',
+      toFromDelta: 'toFromDeltas',
+      fromRadius: 'fromRadii',
+      toRadius: 'toRadii',
+    },
+    uniformCountMacroName: 'DROPLET_COUNT',
+    shaderCombinationSteps: [0, 1, 4, 16, 32],
+    empty: new Droplet(
+      vec2.fromValues(-100000, -100000),
+      vec2.fromValues(-100000, -100000),
+      0,
+      0
+    ),
+  };
+
+  constructor(
+    public readonly from: vec2,
+    public readonly to: vec2,
+    public readonly fromRadius: number,
+    public readonly toRadius: number
+  ) {
+    super();
+  }
+
+  public minDistance(target: vec2): number {
+    const toFromDelta = vec2.subtract(vec2.create(), this.to, this.from);
+    const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
+
+    const h = clamp01(
+      vec2.dot(targetFromDelta, toFromDelta) / vec2.dot(toFromDelta, toFromDelta)
+    );
+
+    return (
+      vec2.distance(targetFromDelta, vec2.scale(vec2.create(), toFromDelta, h)) -
+      mix(this.fromRadius, this.toRadius, h)
+    );
+  }
+
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    const toFromDelta = vec2.subtract(vec2.create(), this.to, this.from);
+
+    return {
+      from: vec2.transformMat2d(vec2.create(), this.from, transform2d),
+      toFromDelta: vec2.scale(vec2.create(), toFromDelta, transform1d),
+      fromRadius: this.fromRadius * transform1d,
+      toRadius: this.toRadius * transform1d,
+    };
+  }
+}

src/drawables/shapes/inverted-tunnel.ts

@@ -21,6 +21,7 @@ export class InvertedTunnel extends Drawable {
 
           float minDistance = 1000.0;
           for (int i = 0; i < INVERTED_TUNNEL_COUNT; i++) {
+            
             vec2 targetFromDelta = target - froms[i];
 
             float h = clamp(

src/drawables/shapes/meta-circle.ts

@@ -0,0 +1,52 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { Drawable } from '../drawable';
+import { DrawableDescriptor } from '../drawable-descriptor';
+
+/**
+ * @category Drawable
+ */
+export class MetaCircle extends Drawable {
+  public static descriptor: DrawableDescriptor = {
+    sdf: {
+      shader: `
+          uniform vec2 metaCircleCenters[META_CIRCLE_COUNT];
+          uniform float metaCircleRadii[META_CIRCLE_COUNT];
+
+          const float k = 32.0;
+          float metaCircleMinDistance(vec2 target, out float colorIndex) {
+            colorIndex = 5.0;
+            float res = 0.0;
+            for (int i = 0; i < META_CIRCLE_COUNT; i++) {
+              float dist = distance(metaCircleCenters[i], target) - metaCircleRadii[i];
+              res += exp2(-k * dist);
+            }
+
+            return -log2(res) / k;
+          }
+        `,
+      distanceFunctionName: 'metaCircleMinDistance',
+    },
+    propertyUniformMapping: {
+      center: 'metaCircleCenters',
+      radius: 'metaCircleRadii',
+    },
+    uniformCountMacroName: 'META_CIRCLE_COUNT',
+    shaderCombinationSteps: [0, 1, 2, 3, 8, 16],
+    empty: new MetaCircle(vec2.fromValues(10000, 10000), -1000),
+  };
+
+  constructor(public center: vec2, public radius: number) {
+    super();
+  }
+
+  public minDistance(target: vec2): number {
+    return vec2.dist(this.center, target) - this.radius * 2;
+  }
+
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    return {
+      center: vec2.transformMat2d(vec2.create(), this.center, transform2d),
+      radius: this.radius * transform1d,
+    };
+  }
+}

src/main.ts

@@ -68,7 +68,8 @@ export * from './drawables/drawable-descriptor';
 export * from './drawables/lights/circle-light';
 export * from './drawables/lights/flashlight';
 export * from './drawables/shapes/circle';
+export * from './drawables/shapes/droplet';
 export * from './drawables/shapes/inverted-tunnel';
+export * from './drawables/shapes/meta-circle';
 export * from './drawables/shapes/rotated-rectangle';
-export * from './drawables/shapes/tunnel';
 export * from './graphics/rendering/renderer/renderer';