parametrize some particle constants

demo/index.js

@@ -24,7 +24,7 @@ getJSON('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_coastl
     canvas.height = canvas.clientHeight;
 
     var ctx = canvas.getContext('2d');
-    ctx.lineWidth = 3;
+    ctx.lineWidth = 2;
     ctx.lineJoin = ctx.lineCap = 'round';
     ctx.strokeStyle = 'white';
     ctx.beginPath();

src/index.js

@@ -24,6 +24,11 @@ export class WindGL {
     constructor(gl) {
         this.gl = gl;
 
+        this.fadeOpacity = 0.999;
+        this.speedFactor = 0.2;
+        this.dropRate = 0.003;
+        this.dropRateBump = 0.01;
+
         this.drawProgram = util.createProgram(gl, drawVert, drawFrag);
         this.screenProgram = util.createProgram(gl, quadVert, screenFrag);
         this.updateProgram = util.createProgram(gl, quadVert, updateFrag);
@@ -86,7 +91,7 @@ export class WindGL {
         util.bindFramebuffer(gl, this.framebuffer, this.screenTexture);
         gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
-        this.drawTexture(this.backgroundTexture, 0.999);
+        this.drawTexture(this.backgroundTexture, this.fadeOpacity);
         this.drawParticles();
 
         util.bindFramebuffer(gl, null);
@@ -149,6 +154,9 @@ export class WindGL {
         gl.uniform2f(program.u_wind_res, this.windData.width, this.windData.height);
         gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
         gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
+        gl.uniform1f(program.u_speed_factor, this.speedFactor);
+        gl.uniform1f(program.u_drop_rate, this.dropRate);
+        gl.uniform1f(program.u_drop_rate_bump, this.dropRateBump);
 
         gl.drawArrays(gl.TRIANGLES, 0, 6);
 

src/shaders/update.frag.glsl

@@ -6,6 +6,9 @@ uniform vec2 u_wind_res;
 uniform vec2 u_wind_min;
 uniform vec2 u_wind_max;
 uniform float u_rand_seed;
+uniform float u_speed_factor;
+uniform float u_drop_rate;
+uniform float u_drop_rate_bump;
 
 varying vec2 v_tex_pos;
 
@@ -36,11 +39,12 @@ void main() {
     float speed_t = length(velocity) / length(u_wind_max);
 
     float distortion = max(0.1, cos(radians(pos.y * 180.0 - 90.0)));
-    vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.00002;
+    vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
 
     vec2 seed = (pos + v_tex_pos) * u_rand_seed;
 
-    float drop = step(0.997 - speed_t * 0.01, rand(seed));
+    float dropRate = u_drop_rate + speed_t * u_drop_rate_bump;
+    float drop = step(1.0 - dropRate, rand(seed));
     pos = mix(fract(1.0 + pos + offset), vec2(rand(seed + 1.3), rand(seed + 2.1)), drop);
 
     gl_FragColor = vec4(