2/3

js/regl/main.js

@@ -58,6 +58,15 @@ export default async (canvas, config) => {
 	// }
 	resize();
 
+	window.ripples = [0,0,0]
+	window.onclick = (e) => { // ripple init
+		console.log(e)
+		window.ripples = [Date.now(), e.clientX, e.clientY]
+		console.log(ripples)
+
+	}
+
+
 	const regl = createREGL({
 		canvas,
 		extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],

js/regl/ripplesPass.js

@@ -1,8 +1,6 @@
 import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
 
-// Multiplies the rendered rain and bloom by a loaded in image
 
-// const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg";
 
 export default ({ regl, config }, inputs) => {
     console.log('ripples');
@@ -19,8 +17,17 @@ export default ({ regl, config }, inputs) => {
 			time: regl.context("time"),
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
+			intensity: ()=>{
+				let inten = 8 - (Date.now() - window.ripples[0])/500 
+				if (inten < 0) inten = 0
+				return inten / 50
+			},
 			height: regl.context("viewportWidth"),
 			width: regl.context("viewportHeight"),
+			centerW: ()=> {
+				return window.ripples[1]
+			},
+			centerH: ()=> window.ripples[2]
 		},
 		framebuffer: output,
 	});

shaders/glsl/ripplesPass.frag.glsl

@@ -2,6 +2,9 @@ precision mediump float;
 varying vec2 vUV;
 uniform float width, height;
 uniform float time;
+uniform float intensity;
+uniform float centerW;
+uniform float centerH;
 uniform sampler2D tex;
 uniform sampler2D bloomTex;
 
@@ -10,10 +13,22 @@ void main() {
 	// gl_FragColor = texture2D(tex, vUV);
 	// vec4 color = texture2D(bloomTex, vUV) +  texture2D(tex, vUV);
 
-	vec2 iResolution = vec2(width,height);
+	// float intensity = 0.1;
-	vec2 cp = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
+
+
+	vec2 iResolution = vec2(height,width);
+	//vec2 cp = -1. + 2. * gl_FragCoord.xy / iResolution.xy;
+	//cp = -1. + 2. * vec2(centerW, centerH) / iResolution.xy;
+	vec2 cp = vec2(
+		-1. + 2.* gl_FragCoord.x /iResolution.x + -1.+ 2.*(iResolution.x-centerW)/iResolution.x,
+		-1. + 2.* gl_FragCoord.y /iResolution.y//gl_FragCoord.y //-1. + 2.*(gl_FragCoord.y)/iResolution.y + -1.+ 2.*(iResolution.y-centerH)/iResolution.y
+	);
+	// cp.y = 1. - cp.y - 2. * centerH/iResolution.y;
+	
+
 	float cl = length(cp);
-    vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl/3.) * sin(cl * 1.0 - time * 4.) * 0.3;
+
+    vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl / 4. ) * sin(cl*10. - time * 12.) * intensity*.5;
 	// vec4 col=smoothstep(0.1,.91,texture2D(color).xyz);
 	
 	vec3 col = texture2D(tex, uv).xyz + texture2D(bloomTex, uv).xyz;;