<a href="https://www.icecubesservice.com/" target="_blank">Original website: icecubesservice.com</a>

body {
  margin: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

a {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 0.25em 0.5em;
  font-family: sans-serif;
  display: inline-block;
  background-color: #000;
  color: #eee;
  text-decoration: none;
  z-index: 999;
}

import {
  Renderer,
  Program,
  Texture,
  Mesh,
  Vec2,
  Vec3,
  Flowmap,
  Plane
} from 'https://cdn.skypack.dev/ogl@0.0.96';

const vertex = /* glsl */ `
attribute vec2 uv;
attribute vec3 position;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float uTime;
uniform sampler2D tFlow;
uniform vec2 uAspectRatio;

uniform float uE1NoiseAmount;
uniform float uE1NoiseFreq;
uniform float uE1Speed;
uniform float uE2NoiseAmount;
uniform float uE2NoiseFreq;
uniform float uE2Speed;
uniform float uE3NoiseAmount;
uniform float uE3NoiseFreq;
uniform float uE3Speed;

varying vec2 vUv;
varying vec2 vE1UVs;
varying vec2 vE2UVs;
varying vec2 vE3UVs;

// Description : Array and textureless GLSL 2D/3D/4D simplex
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

vec3 mod289(vec3 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
    return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r) {
    return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v) {
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  // First corner
  vec3 i = floor(v + dot(v, C.yyy) );
  vec3 x0 = v - i + dot(i, C.xxx) ;

  // Other corners
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy;
  vec3 x3 = x0 - D.yyy;

  // Permutations
  i = mod289(i);
  vec4 p = permute( permute( permute(
  i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
  + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
  + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

  // Gradients: 7x7 points over a square, mapped onto an octahedron.
  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
  float n_ = 0.142857142857; // 1.0/7.0

  vec3  ns = n_ * D.wyz - D.xzx;
  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p, 7*7)

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j, N)

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);
  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));
  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
  vec3 p0 = vec3(a0.xy, h.x);
  vec3 p1 = vec3(a0.zw, h.y);
  vec3 p2 = vec3(a1.xy, h.z);
  vec3 p3 = vec3(a1.zw, h.w);

  //Normalise gradients

  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

  // Mix final noise value

  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3) ) );
}

void main() {
  vec3 flow = texture2D(tFlow, uv).rgb;
  vec2 st = uv;
  st += (flow.rg * flow.b * 50.0);
  vUv = (st - vec2(0.5)) * uAspectRatio;
  
  vec2 freq = vUv * uE1NoiseFreq;
  float offset = uTime * uE1Speed;
  vec2 noise = vec2(
  snoise(vec3(freq, offset)) * uE1NoiseAmount, snoise(vec3(freq, offset + 1250.)) * uE1NoiseAmount);
  vE1UVs = vUv + noise;
  
  freq = vUv * uE2NoiseFreq;
  offset = uTime * uE2Speed;
  noise = vec2(
  snoise(vec3(freq, offset)) * uE2NoiseAmount, snoise(vec3(freq, offset + 1250.)) * uE2NoiseAmount);
  vE2UVs = vUv + noise;
  
  freq = vUv * uE3NoiseFreq;
  offset = uTime * uE3Speed;
  noise = vec2(
  snoise(vec3(freq, offset)) * uE3NoiseAmount, snoise(vec3(freq, offset + 1250.)) * uE3NoiseAmount);
  vE3UVs = vUv + noise;
  
  gl_Position = vec4(position, 1.0);
}
`;

const fragment = /* glsl */ `
precision highp float;

uniform float uTime;
uniform vec2 uAspectRatio;
uniform vec2 uE1Origin;
uniform vec3 uE1Color;
uniform float uE1RadX;
uniform float uE1RadY;
uniform float uE1Rot;
uniform float uE1Blur;
uniform float uE1Alpha;
uniform vec2 uE2Origin;
uniform vec3 uE2Color;
uniform float uE2RadX;
uniform float uE2RadY;
uniform float uE2Rot;
uniform float uE2Blur;
uniform float uE2Alpha;
uniform vec2 uE3Origin;
uniform vec3 uE3Color;
uniform float uE3RadX;
uniform float uE3RadY;
uniform float uE3Rot;
uniform float uE3Blur;
uniform float uE3Alpha;

varying vec2 vUv;
varying vec2 vE1UVs;
varying vec2 vE2UVs;
varying vec2 vE3UVs;

// https://gist.github.com/ayamflow/c06bc0c8a64f985dd431bd0ac5b557cd#file-rotate-uv-glsl-L10

vec2 rotateUV(vec2 uv, float rotation, vec2 mid) {
  return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y);
}

// To draw ellipse, strech UVs to match desired ellipse X and Y radius
// then draw a circle with a radius of 0.5 using those streched UVs
float ellipse(vec2 origin, float radiusX, float radiusY, float rotation, float blur, vec2 pos) {
  vec2 bla = origin;
  vec2 uv = rotateUV(pos, rotation, bla);
  uv = (uv - bla) / vec2(radiusX, radiusY);
  return 1. - smoothstep(0.5 - (0.5 * blur), 0.5 + (0.5 * blur), length(uv));
}

// https://github.com/jamieowen/glsl-blend/blob/master/screen.glsl
float blendScreen(float base, float blend) {
  return 1.0 - ((1.0 - base) * (1.0 - blend));
}

vec3 blendScreen(vec3 base, vec3 blend) {
  return vec3(blendScreen(base.r, blend.r), blendScreen(base.g, blend.g), blendScreen(base.b, blend.b));
}

vec3 blendScreen(vec3 base, vec3 blend, float opacity) {
  return (blendScreen(base, blend) * opacity + base * (1.0 - opacity));
}

highp float random(vec2 co) {
  highp float a = 12.9898;
  highp float b = 78.233;
  highp float c = 43758.5453;
  highp float dt = dot(co.xy, vec2(a, b));
  highp float sn = mod(dt, 3.14);
  return fract(sin(sn) * c);
}

void main() {
  vec3 color = vec3(0.109, 0.109, 0.109);
  float e1 = ellipse(uE1Origin * uAspectRatio, uE1RadX, uE1RadY, uE1Rot, uE1Blur, vE1UVs);
  color = mix(color, uE1Color, e1 * uE1Alpha);
  float e2 = ellipse(uE2Origin * uAspectRatio, uE2RadX, uE2RadY, uE2Rot, uE2Blur, vE2UVs) * uE2Alpha;
  color = mix(color, uE2Color, e2 * uE2Alpha);
  float e3 = ellipse(uE3Origin * uAspectRatio, uE3RadX, uE3RadY, uE3Rot, uE3Blur, vE3UVs) * uE3Alpha;
  color = mix(color, uE3Color, e3 * uE3Alpha);
  color.rgb += vec3(random(vUv + vec2(0.0, uTime * 0.00001)) * 0.03);
  gl_FragColor = vec4(color, 1.);
}
`;

const renderer = new Renderer();
const gl = renderer.gl;
document.body.appendChild(gl.canvas);

const mouse = new Vec2(0.5);
const lastMouse = new Vec2(0.5);
const velocity = new Vec2();
let aspect = 1;
const aspectRatio = { value: new Vec2(1, 1) };

function resize() {
  aspect = renderer.width / renderer.height;
  const vmax = Math.max(renderer.width, renderer.height);
  aspectRatio.value.set(renderer.width / vmax, renderer.height / vmax);
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener("resize", resize, false);
resize();

const flowmap = new Flowmap(gl, { falloff: 0.4, dissipation: 0.99, size: 512 });
const geometry = new Plane(gl, { width: 2, height: 2, widthSegments: 100, heightSegments: 100 });

const program = new Program(gl, {
  vertex,
  fragment,
  uniforms: {
    uTime: { value: 0 },
    uAspectRatio: aspectRatio,
    tFlow: flowmap.uniform,
    
    uE1NoiseAmount: { value: 0.4130 },
    uE1NoiseFreq: { value: 0 },
    uE1Speed: { value: 0.1033 },

    uE2NoiseAmount: { value: 0.0870 },
    uE2NoiseFreq: { value: 1.6304 },
    uE2Speed: { value: 0.4185 },

    uE3NoiseAmount: { value: 0.2500 },
    uE3NoiseFreq: { value: 2.1739 },
    uE3Speed: { value: 0.0815 },

    uE1Origin: { value: new Vec2(-0.2426, -0.2132) },
    uE1Color: { value: new Vec3(0.4595, 0, 1) },
    uE1RadX: { value: 0.2609 },
    uE1RadY: { value: 0.4348 },
    uE1Rot: { value: 45 },
    uE1Blur: { value: 1.9565 },
    uE1Alpha: { value: 1 },

    uE2Origin: { value: new Vec2(0.5000, -0.5000) },
    uE2Color: { value: new Vec3(0.8243, 0, 1) },
    uE2RadX: { value: 0.5000 },
    uE2RadY: { value: 1.3913 },
    uE2Rot: { value: 45 },
    uE2Blur: { value: 0.1600 },
    uE2Alpha: { value: 0.3696 },

    uE3Origin: { value: new Vec2(0.3088, -0.3516) },
    uE3Color: { value: new Vec3(0.9459, 0, 1) },
    uE3RadX: { value: 0.0870 },
    uE3RadY: { value: 0.5217 },
    uE3Rot: { value: 54.7826 },
    uE3Blur: { value: 0.7500 },
    uE3Alpha: { value: 0.4565 },
  }
});

const mesh = new Mesh(gl, { geometry, program });

function updateMouse({ clientX, clientY }) {
  const rect = renderer.gl.canvas.getBoundingClientRect();
  const aspect = renderer.width / renderer.height;
  const x = (clientX - rect.x) / renderer.width;
  const y = 1 - (clientY - rect.y) / renderer.height;
  mouse.set(x, y);
}

const isTouchCapable = "ontouchstart" in window;
if (isTouchCapable) {
  window.addEventListener("touchstart", updateMouse, false);
  window.addEventListener("touchmove", updateMouse, false);
} else {
  window.addEventListener("mousemove", updateMouse, false);
}

const spring = 0.02;
const friction = 0.85;
const springVel = new Vec2();

function update(now) {
  springVel.copy(mouse).sub(lastMouse).multiply(spring);
  velocity.add(springVel).multiply(friction);
  lastMouse.add(velocity);

  flowmap.mouse.copy(lastMouse);
  flowmap.velocity.copy(velocity);
  flowmap.aspect = aspect;

  flowmap.update();
  
  const time = now / 1000;
  mesh.program.uniforms.uTime.value = time;

  renderer.render({ scene: mesh });
  requestAnimationFrame(update);
}

requestAnimationFrame(update);