From 9fde376caafd12f86bb239ce6084c4902221b408 Mon Sep 17 00:00:00 2001
From: mioe <mioe.boss@gmail.com>
Date: Thu, 9 May 2024 10:19:53 +0300
Subject: [PATCH] add more computed processes

---
 index.html               | 384 +++++++++++++++++++++++++++++++++++++++
 src/App.vue              |   2 +-
 src/components/Table.vue |   9 +
 3 files changed, 394 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 2242b9c..ce52890 100644
--- a/index.html
+++ b/index.html
@@ -9,5 +9,389 @@
 	<body>
 		<div id="app"></div>
 		<script type="module" src="/src/main.js"></script>
+
+		<!-- https://codepen.io/TomHinton/pen/GRPaaeN -->
+		<style>
+			#shader {
+				position: fixed;
+				inset: 0;
+				z-index: -1;
+			}
+		</style>
+		<div id="shader"></div>
+		<script id="vertex" type="x-shader/x-vertex">
+			varying vec2 vUv;
+			void main() {
+				gl_Position = vec4(position, 1.0);
+				vUv = uv;
+			}
+		</script>
+
+		<script id="fragment" type="x-shader/x-fragment">
+		precision highp float;
+
+		uniform vec2 u_resolution;
+		uniform float u_time;
+			varying vec2 vUv;
+
+		const float PI = 3.1415926535897932384626433832795;
+		const float TAU = PI * 2.;
+		const float HALF_PI = PI * .5;
+
+		float wiggly(float cx, float cy, float amplitude, float frequency, float spread){
+
+			float w = sin(cx * amplitude * frequency * PI) * cos(cy * amplitude * frequency * PI) * spread;
+
+			return w;
+		}
+
+
+		void coswarp(inout vec3 trip, float warpsScale ){
+
+			trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (u_time * .25));
+			trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (u_time * .25));
+			trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (u_time * .25));
+
+		}
+
+
+		void uvRipple(inout vec2 uv, float intensity){
+
+			vec2 p = uv -.5;
+
+
+				float cLength=length(p);
+
+				uv= uv +(p/cLength)*cos(cLength*15.0-u_time*.5)*intensity;
+
+		}
+
+		float smoothMod(float x, float y, float e){
+				float top = cos(PI * (x/y)) * sin(PI * (x/y));
+				float bot = pow(sin(PI * (x/y)),2.);
+				float at = atan(top/bot);
+				return y * (1./2.) - (1./PI) * at ;
+		}
+
+
+		vec2 modPolar(vec2 p, float repetitions) {
+				float angle = 2.*3.14/repetitions;
+				float a = atan(p.y, p.x) + angle/2.;
+				float r = length(p);
+				//float c = floor(a/angle);
+				a = smoothMod(a,angle,033323231231561.9) - angle/2.;
+				//a = mix(a,)
+				vec2 p2 = vec2(cos(a), sin(a))*r;
+
+			p2 += wiggly(p2.x + u_time * .05, p2.y + u_time * .05, 2., 4., 0.05);
+
+
+
+				return p2;
+		}
+
+			float stroke(float x, float s, float w){
+			float d = step(s, x+ w * .5) - step(s, x - w * .5);
+			return clamp(d, 0., 1.);
+		}
+
+		//	Classic Perlin 2D Noise
+		//	by Stefan Gustavson
+		//
+		vec4 permute(vec4 x)
+		{
+				return mod(((x*34.0)+1.0)*x, 289.0);
+		}
+
+
+		vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+		float cnoise(vec2 P){
+			vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+			vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+			Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
+			vec4 ix = Pi.xzxz;
+			vec4 iy = Pi.yyww;
+			vec4 fx = Pf.xzxz;
+			vec4 fy = Pf.yyww;
+			vec4 i = permute(permute(ix) + iy);
+			vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
+			vec4 gy = abs(gx) - 0.5;
+			vec4 tx = floor(gx + 0.5);
+			gx = gx - tx;
+			vec2 g00 = vec2(gx.x,gy.x);
+			vec2 g10 = vec2(gx.y,gy.y);
+			vec2 g01 = vec2(gx.z,gy.z);
+			vec2 g11 = vec2(gx.w,gy.w);
+			vec4 norm = 1.79284291400159 - 0.85373472095314 *
+				vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
+			g00 *= norm.x;
+			g01 *= norm.y;
+			g10 *= norm.z;
+			g11 *= norm.w;
+			float n00 = dot(g00, vec2(fx.x, fy.x));
+			float n10 = dot(g10, vec2(fx.y, fy.y));
+			float n01 = dot(g01, vec2(fx.z, fy.z));
+			float n11 = dot(g11, vec2(fx.w, fy.w));
+			vec2 fade_xy = fade(Pf.xy);
+			vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+			float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
+			return 2.3 * n_xy;
+		}
+
+		vec2 rotate2D (vec2 _st, float _angle) {
+				_st -= 0.5;
+				_st =  mat2(cos(_angle),-sin(_angle),
+										sin(_angle),cos(_angle)) * _st;
+				_st += 0.5;
+				return _st;
+		}
+
+
+
+		vec2 rotateTilePattern(vec2 _st){
+
+			float t = (u_time * .25)  ;
+
+				//  Scale the coordinate system by 2x2
+				_st *= 2.0;
+
+				//  Give each cell an index number
+				//  according to its position
+				float index = 0.0;
+				index += step(1., mod(_st.x,2.0));
+				index += step(1., mod(_st.y,2.0))*2.0;
+
+				//      |
+				//  2   |   3
+				//      |
+				//--------------
+				//      |
+				//  0   |   1
+				//      |
+
+				// Make each cell between 0.0 - 1.0
+				_st = fract(_st);
+
+				// Rotate each cell according to the index
+
+			if(index == 0.0){
+						//  Rotate cell 1 by 90 degrees
+						_st = rotate2D(_st,PI );
+				}
+
+				if(index == 1.0){
+						//  Rotate cell 1 by 90 degrees
+						_st = rotate2D(_st,PI*0.5 );
+				} else if(index == 2.0){
+						//  Rotate cell 2 by -90 degrees
+						_st = rotate2D(_st,PI*-0.5 );
+				} else if(index == 3.0){
+						//  Rotate cell 3 by 180 degrees
+						_st = rotate2D(_st,PI );
+				}
+
+				return _st;
+		}
+
+			vec2 tile(vec2 st, float _zoom){
+				float vTime = u_time;
+				st *= _zoom;
+
+				return fract(st);
+		}
+
+			vec2 rotateUV(vec2 uv, vec2 pivot, float rotation) {
+			mat2 rotation_matrix=mat2(  vec2(sin(rotation),-cos(rotation)),
+																	vec2(cos(rotation),sin(rotation))
+																	);
+			uv -= pivot;
+			uv= uv*rotation_matrix;
+			uv += pivot;
+			return uv;
+		}
+
+		void coswarp2(inout vec2 trip, float warpsScale ){
+
+			float vTime = u_time;
+			trip.xy += warpsScale * .1 * cos(3. * trip.yx + (vTime * .25));
+			trip.xy += warpsScale * .05 * cos(11. * trip.yx + (vTime * .25));
+			trip.xy += warpsScale * .025 * cos(17. * trip.yx + (vTime * .25));
+
+		}
+
+		float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
+				return length(max(abs(CenterPosition)-Size+Radius,0.0))-Radius;
+		}
+
+		float shape( in vec2 p, float sides ,float size)
+		{
+
+			float d = 0.0;
+			vec2 st = p *2.-1.;
+
+			// Number of sides of your shape
+			float N = sides ;
+
+			// Angle and radius from the current pixel
+			float a = atan(st.x,st.y)+PI ;
+			float r = (2.* PI)/(N) ;
+
+			// Shaping function that modulate the distance
+			d = cos(floor(.5+a/r)*r-a)*length(st);
+
+
+			return  1.0-smoothstep(size,size +.1,d);
+		}
+
+
+		void main() {
+			vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
+
+			float vTime = u_time * .5 ;
+
+			vec2 uv2 = uv;
+			vec2 uv3= uv;
+
+
+			uv *= 4.0 - (step((uv.x / uv.y), sin(u_time + length(uv+.5))));
+
+			uv.x += (u_time * .1);
+
+				//  Give each cell an index number
+				//  according to its position
+				float index = 0.0;
+				index += step(1., mod(uv.x,2.0));
+				index += step(1., mod(uv.y,2.0))*2.0;
+
+				//      |
+				//  2   |   3
+				//      |
+				//--------------
+				//      |
+				//  0   |   1
+				//      |
+
+				// Make each cell between 0.0 - 1.0
+				uv = fract(uv);
+
+				// Rotate each cell according to the index
+
+			if(index == 0.0){
+						//  Rotate cell 1 by 90 degrees
+						uv = rotate2D(uv,PI );
+					uv = rotateTilePattern(uv);
+
+				}
+
+				if(index == 1.0){
+						//  Rotate cell 1 by 90 degrees
+						uv = rotate2D(uv,PI*0.5 );
+					uv = rotateTilePattern(uv);
+					uv = rotateTilePattern(uv);
+				} else if(index == 2.0){
+						//  Rotate cell 2 by -90 degrees
+						uv = rotate2D(uv,PI*-0.5
+												);
+					uv = rotateTilePattern(uv);
+					uv = rotateTilePattern(uv);
+					uv = rotateTilePattern(uv);
+				} else if(index == 3.0){
+						//  Rotate cell 3 by 180 degrees
+						uv = rotate2D(uv,PI );
+				}
+
+
+		uv = rotateTilePattern(uv);
+			uv = rotateTilePattern(uv);
+
+
+
+			float t = (u_time * .025) + length(uv -.5) ;
+
+			float tx = (u_time * .025) + uv.x ;
+
+				float ty = (u_time * .0125) + uv.y ;
+
+
+
+			vec3 color = vec3(cos(tx), sin(t), sin(ty));
+
+			color *= 1.-step(shape(uv, 4., .5), .3);
+
+			color = mix(color, 1.-color, step(length(uv-.5),.2));
+
+		uv2 = rotateTilePattern(uv2);
+			uv2 = rotateTilePattern(uv2);
+
+
+			color = mix(color, 1.-color, step(shape(uv2, 3., .4),.2));
+
+
+			color = mix(color, 1.-color, step(shape(uv3, 40., sin(u_time)*2.),.2));
+
+
+				gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
+		}
+		</script>
+
+		<script type="module">
+			import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js';
+			let camera, scene, renderer, clock;
+			let uniforms;
+
+			function init() {
+				const container = document.getElementById("shader");
+
+				clock = new THREE.Clock();
+				camera = new THREE.Camera();
+				camera.position.z = 1;
+
+				scene = new THREE.Scene();
+
+				const geometry = new THREE.PlaneBufferGeometry(2, 2);
+
+				uniforms = {
+					u_time: { type: "f", value: 1.0 },
+					u_resolution: { type: "v2", value: new THREE.Vector2() },
+				};
+
+				const material = new THREE.ShaderMaterial({
+					uniforms,
+					vertexShader: document.getElementById("vertex").textContent,
+					fragmentShader: document.getElementById("fragment").textContent
+				});
+
+				const mesh = new THREE.Mesh(geometry, material);
+				scene.add(mesh);
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio(window.devicePixelRatio);
+
+				container.appendChild(renderer.domElement);
+
+				onWindowResize();
+				window.addEventListener("resize", onWindowResize);
+			}
+
+			function onWindowResize() {
+				renderer.setSize(window.innerWidth, window.innerHeight);
+				uniforms.u_resolution.value.x = renderer.domElement.width;
+				uniforms.u_resolution.value.y = renderer.domElement.height;
+			}
+
+			function render() {
+				uniforms.u_time.value = clock.getElapsedTime();
+				renderer.render(scene, camera);
+			}
+
+			function animate() {
+				render();
+				requestAnimationFrame(animate);
+			}
+
+			init();
+			animate();
+		</script>
 	</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index a7d0bc7..c1cf651 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,7 +54,7 @@ onChange((files) => {
 
 		<div
 			v-else
-			class="w-[calc(100svw-48px)] h-[calc(100svh-48px)]"
+			class="w-[calc(100svw-48px)] h-[calc(100svh-48px)] flex flex-col"
 		>
 			<Table
 				:csv="csvData"
diff --git a/src/components/Table.vue b/src/components/Table.vue
index ccafaa7..f469ae4 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -111,5 +111,14 @@ onUpdated(() => {
 	overflow: hidden;
 	border-radius: 16px;
 	border: 1px solid #e5ebf0;
+	backdrop-filter: blur(25px);
+	-webkit-backdrop-filter: blur(25px);
+	background-color: rgba(255,255,255,.9);
+}
+
+.table-container {
+	position: relative;
+	overflow: auto;
+	height: 100%;
 }
 </style>
