🔧 Streamline team-rocket effect

resources/shaders/team-rocket.frag

@@ -30,10 +30,8 @@
 // vec4 getInputColor(vec2 coords)
 // void setOutputColor(vec4 outColor)
 
-// The width of the fading effect is loaded from the settings.
+// window time ... how we split the time between the window and the sparkle/star
-
+uniform float uWT;
-//variables 
-uniform float uWT; //window time ... how we split the time between the window and the sparkle/star
 uniform float uXpos;         // the Xposition of the star
 uniform float uYpos;         // the Yposition of the star
 uniform float uSparkleRot;   // the rotation of the star
@@ -41,10 +39,8 @@ uniform float uSparkleSize; // the size of the star
 uniform bool uWinRot;        // window rotation... but it's more of a warp
 uniform vec2 uSeed;          // and random numbers
 
-
+// Used to scale the window.
-//use to scale the window
+vec2 scaleUV(vec2 uv, vec2 scale, vec2 centerOffset) {
-vec2 scaleUV(vec2 uv, vec2 scale, vec2 centerOffset)
-{
   // Put texture coordinate origin to center of window.
   uv -= centerOffset;
   uv = uv * 2.0 - 1.0;
@@ -55,17 +51,12 @@ vec2 scaleUV(vec2 uv, vec2 scale, vec2 centerOffset)
   // scale from center
   uv = uv * 0.5 + 0.5;
 
-
   return uv;
 }
 
-
+// This returns the Spark.
-//this returns the Spark
+float getSpark(vec2 uv, vec2 center, float brightness, float size, float rotation) {
-float getSpark(vec2 uv, vec2 center, float brightness, float size, float rotation)
-{
-  //the brightness of the spark
   brightness = clamp(brightness, 0.001, 1.0);
-  //the size 
   size       = clamp(size, 0.001, 1.0);
 
   float bn = mix(0.0, 0.07, brightness);  // recalculate size
@@ -78,22 +69,16 @@ float getSpark(vec2 uv, vec2 center, float brightness, float size, float rotatio
   // this is basically the brightness
   float p = mix(-1.0, 1000.0, easeInExpo(bn));
 
-  float m = mix(
+  float m =
-      0.0,
+    mix(0.0, 1.0,
-      1.0,
+        clamp(pow(abs(uv.x - 0.5) * 2.0, p) + pow(abs(uv.y - 0.5) * 2.0, p), 0.0, 1.0));
-      clamp(
-          pow(abs(uv.x-0.5)*2.0,p) + pow(abs(uv.y-0.5)*2.0,p),0.0,1.0
-      )
-      );
 
   // calcuate and return this mask
   float mask = easeInSine(1.0 - (m - bn)) - 0.004;
   mask       = clamp(mask, 0.0, 1.0);
   return mask;
-  
 }
 
-
 // fades out at 0 and 1 ...based on the power
 //  1|     __________
 //   |    /          \
@@ -106,8 +91,7 @@ graph above ... where t is close to 0, or 1 the result will fade to zero
 i.e. this is just the function of power(x,p) shifted
 where x is time, and p is 2.0,4.0,8.0,10.0 ... or any positive even number
 */
-float FadeInOut(float t, float power)
+float FadeInOut(float t, float power) {
-{
   float s = -1.0 * pow((t - 0.5) / (0.5), power) + 1.0;
   s       = clamp(s, 0.0, 1.0);
   return s;
@@ -122,21 +106,13 @@ void main() {
   float progress = uForOpening ? 1.0 - uProgress : uProgress;
 
   // scale progress ... the first half of the animation
-  float scalep = remap(
+  float scalep = remap(progress, 0.0, uWT + 0.1, 0.0, 1.0);
-    progress,
-    0.0,uWT+0.1,
-    0.0,1.0
-    );
 
   // scalep = easeInOutSine(scalep);
   scalep = easeOutQuad(scalep);
 
   // sparkle progress ... the second half of the animation
-  float sparkp = remap(
+  float sparkp = remap(progress, uWT - 0.1, 1.0, 0.0, 1.0);
-    progress,
-    uWT-0.1,1.0,
-    0.0,1.0
-    );
   sparkp       = easeInOutSine(sparkp);
 
   /*
@@ -147,11 +123,7 @@ void main() {
 
   // // this is the offset of the window... don't let them go too far each way
   vec2 offset      = vec2(uXpos, uYpos * -1.0) * 0.20;
-  vec2 scaleOffset = mix(
+  vec2 scaleOffset = mix(vec2(0.0), vec2(uXpos, uYpos * -1.0) * 0.50, scalep);
-    vec2(0.0),
-    vec2(uXpos,uYpos*-1.0) * 0.50,
-    scalep
-    );
 
   // the UV for this function
   float aspect = uSize.x / uSize.y;
@@ -169,8 +141,7 @@ void main() {
 
   // rotation and if we are gonna rotate or not
   vec3 rot = vec3(0.0);
-  if (uWinRot)
+  if (uWinRot) {
-  {
     rot = hash32(uSeed);
     rot *= 2.0;
     rot -= 1.0;
@@ -192,22 +163,15 @@ void main() {
   float size = mix(25.0, 50.0, uSparkleSize);
 
   // get the sparkle
-  float sparkle = getSpark(
+  float sparkle =
-      uv,
+    getSpark(uv, offset + vec2(0.5 * aspect, 0.5), FadeInOut(sparkp, 2) * uSparkleSize,
-      offset + vec2(0.5 * aspect,0.5),
+             FadeInOut(sparkp, 2) * size, sparkp * TAU * float(uSparkleRot));
-      FadeInOut(sparkp,2) * uSparkleSize,
-      FadeInOut(sparkp,2) * size,
-      sparkp * TAU * float(uSparkleRot)
-      );
   // fade out at the edges
   sparkle *= FadeInOut(iTexCoord.t, 8);
   sparkle *= FadeInOut(iTexCoord.s, 8);
 
   // set it to the results
-  oColor = alphaOver(
+  oColor = alphaOver(oColor, vec4(1.0, 1.0, 1.0, sparkle));
-    oColor,
-    vec4(1.0,1.0,1.0,sparkle)
-    );
 
   // output the color
   setOutputColor(oColor);

src/effects/TeamRocket.js

@@ -50,31 +50,16 @@ export default class Effect {
 
       // Write all uniform values at the start of each animation.
       shader.connect('begin-animation', (shader, settings) => {
-        shader.set_uniform_float(shader._uWT, 1, [
-          settings.get_double('team-rocket-window-time'),
-        ]);
-
-        shader.set_uniform_float(shader._uXpos, 1, [
-          settings.get_double('team-rocket-x'),
-        ]);
-
-        shader.set_uniform_float(shader._uYpos, 1, [
-          settings.get_double('team-rocket-y'),
-        ]);
-
-        shader.set_uniform_float(shader._uWinRot, 1,
-                                 [settings.get_boolean('team-rocket-win-rot')]);
-
-        shader.set_uniform_float(shader._uSparkleRot, 1, [
-          settings.get_double('team-rocket-sparkle-rot'),
-        ]);
-
-        shader.set_uniform_float(shader._uSparkleSize, 1, [
-          settings.get_double('team-rocket-sparkle-size'),
-        ]);
-
-        // this will be used with a has function to get a random number
         // clang-format off
+        shader.set_uniform_float(shader._uWT,          1, [settings.get_double('team-rocket-window-time')]);
+        shader.set_uniform_float(shader._uXpos,        1, [settings.get_double('team-rocket-x')]);
+        shader.set_uniform_float(shader._uYpos,        1, [settings.get_double('team-rocket-y')]);
+        shader.set_uniform_float(shader._uWinRot,      1, [settings.get_boolean('team-rocket-win-rot')]);
+        shader.set_uniform_float(shader._uSparkleRot,  1, [settings.get_double('team-rocket-sparkle-rot')]);
+        shader.set_uniform_float(shader._uSparkleSize, 1, [settings.get_double('team-rocket-sparkle-size')]);
+        // clang-format on
+
+        // This will be used with a hash function to get a random number.
         shader.set_uniform_float(shader._uSeed, 2, [Math.random(), Math.random()]);
       });
     });
@@ -107,8 +92,6 @@ export default class Effect {
   // This is called by the preferences dialog whenever a new effect profile is loaded. It
   // binds all user interface elements to the respective settings keys of the profile.
   static bindPreferences(dialog) {
-    // Empty for now... Code is added here later in the tutorial!
-
     dialog.bindAdjustment('team-rocket-animation-time');
     dialog.bindAdjustment('team-rocket-window-time');
     dialog.bindAdjustment('team-rocket-x');