code reviews

docs/api-reference/effects/glfx-shader-modules.md

@@ -152,8 +152,8 @@ Adds a simulated lens edge darkening effect.
 
 Simulates the shallow depth of field normally encountered in close-up photography, which makes the scene seem much smaller than it actually is. This filter assumes the scene is relatively planar, in which case the part of the scene that is completely in focus can be described by a line (the intersection of the focal plane and the scene). An example of a planar scene might be looking at a road from above at a downward angle. The image is then blurred with a blur radius that starts at zero on the line and increases further from the line.
 
- * `start`          [x, y] coordinate of the start of the line segment in pixels. Default value is [0, 0] which is the bottom left corner.
- * `end`            [x, y] coordinate of the end of the line segment in pixels. Default value is [1, 1].
+ * `start`          [x, y] coordinate of the start of the line segment in pixels. Default value is [0, 0] which is the bottom left corner of image.
+ * `end`            [x, y] coordinate of the end of the line segment in pixels. Default value is [1, 1] which is the up right corner of image.
  * `blurRadius`     The maximum radius of the pyramid blur in pixels. Default value is 15.
  * `gradientRadius` The distance in pixels from the line at which the maximum blur radius is reached. Default value is 200.
 
@@ -191,7 +191,7 @@ This is the most basic blur filter, which convolves the image with a pyramid fil
 
 Blurs the image away from a certain point, which looks like radial motion blur.
 
-* `center`  [x, y] coordinate of the blur origin in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center`  [x, y] coordinate of the blur origin in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `strength` The strength of the blur. Values in the range 0 to 1 are usually sufficient, where 0 doesn't change the image and 1 creates a highly blurred image. Default value is 0.3.
 
 <table style="border: 0;" align="center">
@@ -210,7 +210,7 @@ Blurs the image away from a certain point, which looks like radial motion blur.
 
  Simulates a CMYK halftone rendering of the image by multiplying pixel values with a four rotated 2D sine wave patterns, one each for cyan, magenta, yellow, and black.
 
-* `center` [x, y] coordinate of the pattern origin in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center` [x, y] coordinate of the pattern origin in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `angle`  The rotation of the pattern in radians. Default value is 1.1.
 * `size`   The diameter of a dot in pixels. Default value is 4.
 
@@ -230,7 +230,7 @@ Blurs the image away from a certain point, which looks like radial motion blur.
 
 Simulates a black and white halftone rendering of the image by multiplying pixel values with a rotated 2D sine wave pattern.
 
-* `center`  [x, y] coordinate of the pattern origin in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center`  [x, y] coordinate of the pattern origin in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `angle`   The rotation of the pattern in radians. Default value is 1.1.
 * `size`    The diameter of a dot in pixels. Default value is 3.
 
@@ -268,7 +268,7 @@ Picks out different frequencies in the image by subtracting two copies of the im
 
 Renders the image using a pattern of hexagonal tiles. Tile colors are nearest-neighbor sampled from the centers of the tiles.
 
-* `center` [x, y] coordinate of the pattern center in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center` [x, y] coordinate of the pattern center in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `scale`  The width of an individual tile in pixels. Default value is 10.
 
 <table style="border: 0;" align="center">
@@ -305,7 +305,7 @@ Simulates outlining the image in ink by darkening edges stronger than a certain
 
 Bulges or pinches the image in a circle.
 
-* `center`  [x, y] coordinate of the center of the circle of effect in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center`  [x, y] coordinate of the center of the circle of effect in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `radius`  The radius of the circle of effect in pixels. Default value is 200.
 * `strength` -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge). Default value is 0.5.
 
@@ -325,7 +325,7 @@ Bulges or pinches the image in a circle.
 
 Warps a circular region of the image in a swirl.
 
-* `center` [x, y] coordinate of the center of the circular region in pixels. Default value is [0, 0] which is the bottom left corner.
+* `center` [x, y] coordinate of the center of the circular region in pixels. Default value is [0.5, 0.5] which is the center of image.
 * `radius` The radius of the circular region in pixels. Default value is 200.
 * `angle`  The angle in radians that the pixels in the center of the circular region will be rotated by. Default value is 3.
 
@@ -340,3 +340,6 @@ Warps a circular region of the image in a swirl.
   </tbody>
 </table>
 
+## Remarks
+
+* Coordinate is based on the original image. [0, 0] is the bottom left corner, [1, 1] is the up right corner.

examples/glfx/app.js

@@ -134,7 +134,7 @@ function setSelectedFilter(filter) {
         })
         .css({left: x, top: y});
 
-      filter.values[nub.name] = [x, y];
+      filter.values[nub.name] = [x / canvas.width, y / canvas.height];
     }
 
     if (filter.reset) {
@@ -445,11 +445,7 @@ class Filter {
             default:
               if (Array.isArray(uniform.value)) {
                 // Assume texCoords
-                if (uniformName === `center`) {
-                  this.addNub(uniformName, [0.5, 0.5]);
-                } else {
-                  this.addNub(uniformName, uniform.value);
-                }
+                this.addNub(uniformName, uniform.value);
               } else {
                 console.log(uniform);
               }

modules/effects/src/shader-modules/blur-filters/tiltshift.js

@@ -38,7 +38,7 @@ vec4 tiltShift_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
 
   vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));
   float radius = smoothstep(0.0, 1.0,
-    abs(dot(texCoord * texSize - start, normal)) / gradientRadius) * blurRadius;
+    abs(dot(texCoord * texSize - start * texSize, normal)) / gradientRadius) * blurRadius;
 
   for (float t = -30.0; t <= 30.0; t++) {
     float percent = (t + offset - 0.5) / 30.0;

modules/effects/src/shader-modules/blur-filters/zoomblur.js

@@ -15,7 +15,7 @@ uniform float strength;
 vec4 zoomBlur_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
   vec4 color = vec4(0.0);
   float total = 0.0;
-  vec2 toCenter = center - texCoord * texSize;
+  vec2 toCenter = center * texSize - texCoord * texSize;
 
   /* randomize the lookup values to hide the fixed number of samples */
   float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
@@ -42,7 +42,7 @@ vec4 zoomBlur_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
 `;
 
 const uniforms = {
-  center: [0, 0],
+  center: [0.5, 0.5],
   strength: {value: 0.3, min: 0, softMax: 1}
 };
 

modules/effects/src/shader-modules/fun-filters/colorhalftone.js

@@ -19,7 +19,7 @@ float scale = 3.1514 / size;
 
 float pattern(float angle, vec2 texSize, vec2 texCoord) {
   float s = sin(angle), c = cos(angle);
-  vec2 tex = texCoord * texSize - center;
+  vec2 tex = texCoord * texSize - center * texSize;
   vec2 point = vec2(
 	c * tex.x - s * tex.y,
 	s * tex.x + c * tex.y
@@ -46,7 +46,7 @@ vec4 colorHalftone_filterColor(vec4 color, vec2 texSize, vec2 texCoord) {
 `;
 
 const uniforms = {
-  center: [0, 0],
+  center: [0.5, 0.5],
   angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
   size: {value: 4, min: 1, softMin: 3, softMax: 20}
 };

modules/effects/src/shader-modules/fun-filters/dotscreen.js

@@ -16,7 +16,7 @@ float pattern(vec2 texSize, vec2 texCoord) {
   float scale = 3.1415 / size;
 
   float s = sin(angle), c = cos(angle);
-  vec2 tex = texCoord * texSize - center;
+  vec2 tex = texCoord * texSize - center * texSize;
   vec2 point = vec2(
     c * tex.x - s * tex.y,
     s * tex.x + c * tex.y
@@ -31,7 +31,7 @@ vec4 dotScreen_filterColor(vec4 color, vec2 texSize, vec2 texCoord) {
 `;
 
 const uniforms = {
-  center: [0, 0],
+  center: [0.5, 0.5],
   angle: {value: 1.1, softMin: 0, softMax: Math.PI / 2},
   size: {value: 3, min: 1, softMin: 3, softMax: 20}
 };

modules/effects/src/shader-modules/fun-filters/hexagonalpixelate.js

@@ -11,7 +11,7 @@ uniform vec2 center;
 uniform float scale;
 
 vec4 hexagonalPixelate_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
-  vec2 tex = (texCoord * texSize - center) / scale;
+  vec2 tex = (texCoord * texSize - center * texSize) / scale;
   tex.y /= 0.866025404;
   tex.x -= tex.y * 0.5;
 
@@ -45,12 +45,12 @@ vec4 hexagonalPixelate_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoor
   choice.y *= 0.866025404;
   choice *= scale / texSize;
 
-  return texture2D(texture, choice + center / texSize);
+  return texture2D(texture, choice + center);
 }
 `;
 
 const uniforms = {
-  center: {value: [0, 0], hint: 'screenspace'},
+  center: {value: [0.5, 0.5], hint: 'screenspace'},
   scale: {value: 10, min: 1, softMin: 5, softMax: 50}
 };
 

modules/effects/src/shader-modules/warp-filters/bulgepinch.js

@@ -13,8 +13,8 @@ uniform float radius;
 uniform float strength;
 uniform vec2 center;
 
-vec2 bulgePinch_warp(vec2 coord) {
-  coord -= center;
+vec2 bulgePinch_warp(vec2 coord, vec2 texCenter) {
+  coord -= texCenter;
   float distance = length(coord);
   if (distance < radius) {
     float percent = distance / radius;
@@ -24,20 +24,20 @@ vec2 bulgePinch_warp(vec2 coord) {
       coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);
     }
   }
-  coord += center;
+  coord += texCenter;
   return coord;
 }
 
 vec4 bulgePinch_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
   vec2 coord = texCoord * texSize;
-  coord = bulgePinch_warp(coord);
+  coord = bulgePinch_warp(coord, center * texSize);
 
   return warp_sampleColor(texture, texSize, coord);
 }
 `;
 
 const uniforms = {
-  center: [0, 0],
+  center: [0.5, 0.5],
   radius: {value: 200, min: 1, softMax: 600},
   strength: {value: 0.5, min: -1, max: 1}
 };

modules/effects/src/shader-modules/warp-filters/swirl.js

@@ -14,8 +14,8 @@ uniform float radius;
 uniform float angle;
 uniform vec2 center;
 
-vec2 swirl_warp(vec2 coord) {
-  coord -= center;
+vec2 swirl_warp(vec2 coord, vec2 texCenter) {
+  coord -= texCenter;
   float distance = length(coord);
   if (distance < radius) {
     float percent = (radius - distance) / radius;
@@ -27,20 +27,20 @@ vec2 swirl_warp(vec2 coord) {
       coord.x * s + coord.y * c
     );
   }
-  coord += center;
+  coord += texCenter;
   return coord;
 }
 
 vec4 swirl_sampleColor(sampler2D texture, vec2 texSize, vec2 texCoord) {
   vec2 coord = texCoord * texSize;
-  coord = swirl_warp(coord);
+  coord = swirl_warp(coord, center * texSize);
 
   return warp_sampleColor(texture, texSize, coord);
 }
 `;
 
 const uniforms = {
-  center: [0, 0],
+  center: [0.5, 0.5],
   radius: {value: 200, min: 1, softMax: 600},
   angle: {value: 3, softMin: -25, softMax: 25}
 };