Add metacircle

src/drawables/shapes/droplet.ts

@@ -7,20 +7,20 @@ import { DrawableDescriptor } from '../drawable-descriptor';
 /**
  * @category Drawable
  */
-export class Tunnel extends Drawable {
+export class Droplet extends Drawable {
   public static descriptor: DrawableDescriptor = {
     sdf: {
       shader: `
-        uniform vec2 froms[TUNNEL_COUNT];
-        uniform vec2 toFromDeltas[TUNNEL_COUNT];
-        uniform float fromRadii[TUNNEL_COUNT];
-        uniform float toRadii[TUNNEL_COUNT];
+        uniform vec2 froms[DROPLET_COUNT];
+        uniform vec2 toFromDeltas[DROPLET_COUNT];
+        uniform float fromRadii[DROPLET_COUNT];
+        uniform float toRadii[DROPLET_COUNT];
 
-        float tunnelMinDistance(vec2 target, out float colorIndex) {
+        float dropletMinDistance(vec2 target, out float colorIndex) {
           colorIndex = 1.0;
 
           float minDistance = 1000.0;
-          for (int i = 0; i < TUNNEL_COUNT; i++) {
+          for (int i = 0; i < DROPLET_COUNT; i++) {
             vec2 targetFromDelta = target - froms[i];
             
             float h = clamp(
@@ -41,7 +41,7 @@ export class Tunnel extends Drawable {
           return minDistance;
         }
       `,
-      distanceFunctionName: 'tunnelMinDistance',
+      distanceFunctionName: 'dropletMinDistance',
     },
     propertyUniformMapping: {
       from: 'froms',
@@ -49,9 +49,9 @@ export class Tunnel extends Drawable {
       fromRadius: 'fromRadii',
       toRadius: 'toRadii',
     },
-    uniformCountMacroName: 'TUNNEL_COUNT',
+    uniformCountMacroName: 'DROPLET_COUNT',
     shaderCombinationSteps: [0, 1, 4, 16, 32],
-    empty: new Tunnel(
+    empty: new Droplet(
       vec2.fromValues(-100000, -100000),
       vec2.fromValues(-100000, -100000),
       0,

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';