[node-image] Implements keepWithinCircle

jacomyal · Feb 1, 2024 · 5cd8f4b · 5cd8f4b
1 parent d177c73
commit 5cd8f4b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/packages/node-image/src/factory.ts b/packages/node-image/src/factory.ts
@@ -172,7 +172,7 @@ export default function getNodeImageProgram(options?: Partial<CreateNodeImagePro
       this.latestRenderParams = params;
 
       gl.uniform1f(u_correctionRatio, params.correctionRatio);
-      gl.uniform1f(u_sizeRatio, params.sizeRatio);
+      gl.uniform1f(u_sizeRatio, keepWithinCircle ? params.sizeRatio : params.sizeRatio / Math.SQRT2);
       gl.uniform1f(u_cameraAngle, params.cameraAngle);
       gl.uniformMatrix3fv(u_matrix, false, params.matrix);
       gl.uniform1i(u_atlas, 0);

diff --git a/packages/node-image/src/shader-frag.ts b/packages/node-image/src/shader-frag.ts
@@ -11,40 +11,37 @@ varying vec4 v_texture;
 uniform sampler2D u_atlas;
 uniform float u_cameraAngle;
 uniform bool u_colorizeImages;
+uniform bool u_keepWithinCircle;
 
 const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
 
 const float radius = 0.5;
 
 void main(void) {
   float dist = length(v_diffVector);
+  vec4 color;
+
+  float c = cos(-u_cameraAngle);
+  float s = sin(-u_cameraAngle);
+  vec2 diffVector = mat2(c, s, -s, c) * (v_diffVector);
 
   // No antialiasing for picking mode:
   #ifdef PICKING_MODE
-  if (dist > v_radius)
-    gl_FragColor = transparent;
-  else
-    gl_FragColor = v_color;
+  color = v_color;
 
   #else
   // First case: No image to display
   if (v_texture.w <= 0.0) {
     if (!u_colorizeImages) {
-      if (dist < v_radius - v_border) {
-        gl_FragColor = v_color;
-      } else if (dist < v_radius) {
-        gl_FragColor = mix(transparent, v_color, (v_radius - dist) / v_border);
-      }
+      color = v_color;
     }
   }
  
   // Second case: Image loaded into the texture
   else {
-    float c = cos(-u_cameraAngle);
-    float s = sin(-u_cameraAngle);
-    vec2 coordinateInTexture = mat2(c, s, -s, c) * (v_diffVector) * vec2(1.0, -1.0) / v_radius / 2.0 + vec2(0.5, 0.5);
+    float coef = u_keepWithinCircle ? 1.0 : ${Math.SQRT2};
+    vec2 coordinateInTexture = diffVector * vec2(1.0, -1.0) / v_radius / 2.0 * coef + vec2(0.5, 0.5);
     vec4 texel = texture2D(u_atlas, (v_texture.xy + coordinateInTexture * v_texture.zw), -1.0);
-    vec4 color;
  
     // Colorize all visible image pixels:
     if (u_colorizeImages) {
@@ -55,14 +52,27 @@ void main(void) {
     else {
       color = vec4(mix(v_color, texel, texel.a).rgb, max(texel.a, v_color.a));
     }
+  }
+  #endif
 
+  // Crop in a circle when u_keepWithinCircle is truthy:
+  if (u_keepWithinCircle) {
     if (dist < v_radius - v_border) {
       gl_FragColor = color;
     } else if (dist < v_radius) {
       gl_FragColor = mix(transparent, color, (v_radius - dist) / v_border);
     }
   }
-  #endif
+
+  // Crop in a square else:
+  else {
+    float squareHalfSize = v_radius * ${Math.SQRT1_2 * Math.cos(Math.PI / 12)};
+    if (abs(diffVector.x) > squareHalfSize || abs(diffVector.y) > squareHalfSize) {
+      gl_FragColor = transparent;
+    } else {
+      gl_FragColor = color;
+    }
+  }
 }
 `;
 

diff --git a/packages/node-image/src/stories/AllFeatures.stories.ts b/packages/node-image/src/stories/AllFeatures.stories.ts
@@ -1,10 +1,10 @@
 import Sigma from "sigma";
 import Graph from "graphology";
 import chroma from "chroma-js";
+import { Meta, StoryObj } from "@storybook/html";
 
 import { createNodeImageProgram } from "../index.ts";
 import "./stage.css";
-import { Meta, StoryObj } from "@storybook/html";
 
 const createPictogramsStage = () => {
   const stage = document.createElement("div");
@@ -51,6 +51,23 @@ const createPictogramsStage = () => {
         correctCentering: true,
       }),
     },
+    {
+      type: "scaled-no-crop",
+      renderer: createNodeImageProgram({
+        size: { mode: "force", value: 256 },
+        drawingMode: "color",
+        keepWithinCircle: false,
+      }),
+    },
+    {
+      type: "scaled-no-crop-centered",
+      renderer: createNodeImageProgram({
+        size: { mode: "force", value: 256 },
+        drawingMode: "color",
+        keepWithinCircle: false,
+        correctCentering: true,
+      }),
+    },
     {
       type: "center-color",
       renderer: createNodeImageProgram({