OpenMined
diff --git a/‎1/index.html‎
Lines changed: 262 additions & 0 deletions b/‎1/index.html‎
Lines changed: 262 additions & 0 deletions
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Stream — Ripple</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
+  canvas { display: block; width: 100vw; height: 100vh; }
+</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<script>
+(() => {
+  const canvas = document.getElementById('c');
+  const gl = canvas.getContext('webgl', { antialias: true, alpha: false });
+  if (!gl) { document.body.textContent = 'WebGL not supported'; return; }
+
+  function resize() {
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = window.innerWidth * dpr;
+    canvas.height = window.innerHeight * dpr;
+    canvas.style.width = window.innerWidth + 'px';
+    canvas.style.height = window.innerHeight + 'px';
+    gl.viewport(0, 0, canvas.width, canvas.height);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  const vsSource = `
+    attribute vec2 aPos;
+    varying vec2 vUV;
+    void main() {
+      vUV = aPos * 0.5 + 0.5;
+      gl_Position = vec4(aPos, 0.0, 1.0);
+    }
+  `;
+
+  const fsSource = `
+    precision highp float;
+    varying vec2 vUV;
+    uniform float uTime;
+    uniform vec2 uResolution;
+    uniform vec2 uMouse;
+
+    // Ashima Arts simplex 2D noise
+    vec3 mod289(vec3 x){ return x - floor(x*(1.0/289.0))*289.0; }
+    vec2 mod289(vec2 x){ return x - floor(x*(1.0/289.0))*289.0; }
+    vec3 permute(vec3 x){ return mod289(((x*34.0)+10.0)*x); }
+    float snoise(vec2 v){
+      const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+      vec2 i = floor(v + dot(v, C.yy));
+      vec2 x0 = v - i + dot(i, C.xx);
+      vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+      vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1;
+      i = mod289(i);
+      vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+      vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+      m = m*m; m = m*m;
+      vec3 x = 2.0*fract(p*C.www) - 1.0;
+      vec3 h = abs(x) - 0.5;
+      vec3 ox = floor(x + 0.5);
+      vec3 a0 = x - ox;
+      m *= 1.79284291400159 - 0.85373472095314*(a0*a0+h*h);
+      vec3 g; g.x = a0.x*x0.x + h.x*x0.y; g.yz = a0.yz*x12.xz + h.yz*x12.yw;
+      return 130.0 * dot(m, g);
+    }
+
+    // Cubic bezier for center line
+    float bezier1D(float t, float p0, float p1, float p2, float p3) {
+      float u = 1.0 - t;
+      return u*u*u*p0 + 3.0*u*u*t*p1 + 3.0*u*t*t*p2 + t*t*t*p3;
+    }
+
+    // S-curve center y as function of x(t)
+    // Control points: start upper-left (y=0.25), dip (y=0.72), rise (y=0.22), end upper-right (y=0.32)
+    float getCenterY(float x) {
+      // Invert x->t approximately by iteration (x is monotonic along curve)
+      // Control points in x: -0.05, 0.30, 0.70, 1.05
+      float t = x; // initial guess (close since x control points span ~0..1)
+      for (int i = 0; i < 6; i++) {
+        float ex = bezier1D(t, -0.05, 0.30, 0.70, 1.05);
+        float dex = 3.0*(1.0-t)*(1.0-t)*(0.30-(-0.05)) + 6.0*(1.0-t)*t*(0.70-0.30) + 3.0*t*t*(1.05-0.70);
+        t = t - (ex - x) / max(dex, 0.001);
+        t = clamp(t, 0.0, 1.0);
+      }
+      return bezier1D(t, 0.25, 0.72, 0.22, 0.32);
+    }
+
+    // Stream half-width as function of x
+    float getHalfWidth(float x) {
+      // Wider on left, narrow in center (~x=0.45), medium on right
+      float center = 0.45;
+      float squeeze = 1.0 - 0.55 * exp(-((x - center)*(x - center)) / 0.035);
+      float taper = 1.0 - 0.25 * x;
+      return 0.10 * squeeze * taper;
+    }
+
+    // Warm palette: top=red-orange, mid=gold, bottom=magenta
+    vec3 warmColor(float v) {
+      vec3 top    = vec3(0.92, 0.25, 0.10);
+      vec3 mid    = vec3(0.96, 0.67, 0.12);
+      vec3 bottom = vec3(0.80, 0.16, 0.48);
+      if (v < 0.5) return mix(top, mid, v * 2.0);
+      return mix(mid, bottom, (v - 0.5) * 2.0);
+    }
+
+    // Cool palette: top=lime, mid=green, bottom=teal (blue on top visually)
+    vec3 coolColor(float v) {
+      vec3 top    = vec3(0.55, 0.78, 0.16);
+      vec3 mid    = vec3(0.06, 0.60, 0.40);
+      vec3 bottom = vec3(0.0, 0.63, 0.63);
+      if (v < 0.5) return mix(top, mid, v * 2.0);
+      return mix(mid, bottom, (v - 0.5) * 2.0);
+    }
+
+    void main() {
+      vec2 uv = vUV;
+      float aspect = uResolution.x / uResolution.y;
+
+      float x = uv.x;
+      float y = uv.y;
+
+      // Noise-modulated center line — subtle life
+      float noiseScale = 1.8;
+      float centerNoise = snoise(vec2(x * noiseScale + 0.3, uTime * 0.10)) * 0.028
+                        + snoise(vec2(x * noiseScale * 2.5 + 5.0, uTime * 0.14 + 3.0)) * 0.014
+                        + snoise(vec2(x * 5.0 - uTime * 0.18, 12.0)) * 0.005;
+      // Magnetic attraction — stream bends toward cursor
+      float mdx = x - uMouse.x;
+      float attract = 0.04 * exp(-(mdx * mdx) / 0.03);
+      float bendY = (uMouse.y - getCenterY(x)) * attract;
+      // Ripple — subtle turbulence near cursor
+      float mDistSq = (x - uMouse.x) * (x - uMouse.x) + (y - uMouse.y) * (y - uMouse.y);
+      float ripple = 0.010 * exp(-mDistSq / 0.020) * snoise(vec2(x * 10.0 - uTime * 0.4, y * 10.0));
+      // Ambient ripple — subtle turbulence everywhere
+      float ambientRipple = snoise(vec2(x * 8.0 - uTime * 0.3, y * 6.0 + uTime * 0.15)) * 0.005
+                          + snoise(vec2(x * 12.0 + uTime * 0.2, y * 10.0 - uTime * 0.1)) * 0.003;
+      float centerY = getCenterY(x) + centerNoise + bendY + ripple + ambientRipple;
+
+      // Half width with gentle breathing
+      float hw = getHalfWidth(x);
+      float widthNoise = snoise(vec2(x * 3.0 + 10.0, uTime * 0.12 + 7.0)) * 0.010
+                       + snoise(vec2(x * 6.0 - uTime * 0.08, 20.0)) * 0.004;
+      hw += widthNoise;
+      hw = max(hw, 0.01);
+
+      // Signed distance from center (in y), normalized by half-width
+      float dist = (y - centerY) / hw;
+
+      // Gaussian falloff for soft edges
+      float sigma = 0.7;
+      float gauss = exp(-(dist * dist) / (2.0 * sigma * sigma));
+
+      // Extra softness at edges - wider gaussian for the outermost part
+      float outerSigma = 1.0;
+      float outerGauss = exp(-(dist * dist) / (2.0 * outerSigma * outerSigma));
+
+      // Blend: use tighter gaussian for color intensity, outer for alpha presence
+      float alpha = mix(outerGauss, gauss, 0.5);
+
+      // Add subtle noise to alpha for organic feel
+      float alphaNoise = snoise(vec2(x * 5.0 + uTime * 0.05, y * 5.0 * aspect + uTime * 0.03)) * 0.08;
+      alpha = clamp(alpha + alphaNoise * alpha, 0.0, 1.0);
+
+      alpha = pow(alpha, 0.55);
+      alpha *= smoothstep(0.0, 0.03, alpha);
+
+      // Vertical position within stream: 0=top, 1=bottom
+      float vPos = clamp(dist * 0.5 + 0.5, 0.0, 1.0);
+
+      // Add noise to vertical position for more organic color variation
+      float vNoise = snoise(vec2(x * 3.0 + uTime * 0.07 + 20.0, y * 4.0 * aspect - uTime * 0.04)) * 0.13;
+      vPos = clamp(vPos + vNoise, 0.0, 1.0);
+
+      // Color: blend warm and cool based on x
+      vec3 warm = warmColor(vPos);
+      vec3 cool = coolColor(vPos);
+
+      // Smooth transition from warm to cool
+      float warmCoolMix = smoothstep(0.38, 0.55, x);
+      // Add subtle noise to transition boundary
+      float transNoise = snoise(vec2(x * 2.0 + 50.0, y * 3.0 * aspect + uTime * 0.05)) * 0.08;
+      warmCoolMix = clamp(warmCoolMix + transNoise, 0.0, 1.0);
+
+      vec3 color = mix(warm, cool, warmCoolMix);
+
+      // No center darkening — keep colors clean
+
+      // Boost saturation slightly
+      float lum = dot(color, vec3(0.299, 0.587, 0.114));
+      color = mix(vec3(lum), color, 1.15);
+
+      // Composite over white
+      vec3 white = vec3(1.0);
+      vec3 final = mix(white, color, alpha * 0.96);
+
+      gl_FragColor = vec4(final, 1.0);
+    }
+  `;
+
+  function createShader(type, source) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, source);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+      console.error(gl.getShaderInfoLog(s));
+      gl.deleteShader(s);
+      return null;
+    }
+    return s;
+  }
+
+  const vs = createShader(gl.VERTEX_SHADER, vsSource);
+  const fs = createShader(gl.FRAGMENT_SHADER, fsSource);
+  const prog = gl.createProgram();
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    console.error(gl.getProgramInfoLog(prog));
+    return;
+  }
+  gl.useProgram(prog);
+
+  const aPos = gl.getAttribLocation(prog, 'aPos');
+  const uTime = gl.getUniformLocation(prog, 'uTime');
+  const uRes = gl.getUniformLocation(prog, 'uResolution');
+  const uMouse = gl.getUniformLocation(prog, 'uMouse');
+
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+  let mx = 0.5, my = 0.5, smx = 0.5, smy = 0.5;
+  document.addEventListener('mousemove', function(e) {
+    mx = e.clientX / window.innerWidth;
+    my = 1.0 - e.clientY / window.innerHeight;
+  });
+
+  let startTime = performance.now();
+
+  function draw() {
+    const t = (performance.now() - startTime) / 1000.0;
+    smx += (mx - smx) * 0.08;
+    smy += (my - smy) * 0.08;
+    gl.uniform1f(uTime, t);
+    gl.uniform2f(uRes, canvas.width, canvas.height);
+    gl.uniform2f(uMouse, smx, smy);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    requestAnimationFrame(draw);
+  }
+
+  draw();
+})();
+</script>
+</body>
+</html>